[SPIKE] Sass WIP by 36degrees · Pull Request #6929 · alphagov/govuk-frontend

36degrees · 2026-04-08T15:05:20Z

No description provided.

This will help us identify where future updates change the visibility of members currently exposed when you use the package.

Ideally we’d `use` core, as all of our Sass API members should be in the base layer. Unfortunately we have an undocumented mixin 'govuk-global-styles' hidden within core. Although it is undocumented, it does have some external use [1] To avoid breaking compatibility, we need to `forward` core so that 'govuk-global-styles' mixin remains part of the API. I’ve raised #6927 to address this in the future. [1]: https://github.com/search?q=%22%40include+govuk-global-styles%22+-path%3A%22_global-styles.scss%22&type=code

github-actions · 2026-04-08T15:08:12Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/_index.scss b/packages/govuk-frontend/dist/govuk/components/_index.scss
index 14d30c106..2a53f1c9c 100644
--- a/packages/govuk-frontend/dist/govuk/components/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/_index.scss
@@ -1,37 +1,37 @@
-@import "accordion";
-@import "back-link";
-@import "breadcrumbs";
-@import "button";
-@import "character-count";
-@import "checkboxes";
-@import "cookie-banner";
-@import "date-input";
-@import "details";
-@import "error-message";
-@import "error-summary";
-@import "exit-this-page";
-@import "fieldset";
-@import "file-upload";
-@import "footer";
-@import "header";
-@import "hint";
-@import "input";
-@import "inset-text";
-@import "label";
-@import "notification-banner";
-@import "pagination";
-@import "panel";
-@import "password-input";
-@import "phase-banner";
-@import "radios";
-@import "select";
-@import "service-navigation";
-@import "skip-link";
-@import "summary-list";
-@import "table";
-@import "tabs";
-@import "tag";
-@import "task-list";
-@import "textarea";
-@import "warning-text";
+@forward "accordion";
+@forward "back-link";
+@forward "breadcrumbs";
+@forward "button";
+@forward "character-count";
+@forward "checkboxes";
+@forward "cookie-banner";
+@forward "date-input";
+@forward "details";
+@forward "error-message";
+@forward "error-summary";
+@forward "exit-this-page";
+@forward "fieldset";
+@forward "file-upload";
+@forward "footer";
+@forward "header";
+@forward "hint";
+@forward "input";
+@forward "inset-text";
+@forward "label";
+@forward "notification-banner";
+@forward "pagination";
+@forward "panel";
+@forward "password-input";
+@forward "phase-banner";
+@forward "radios";
+@forward "select";
+@forward "service-navigation";
+@forward "skip-link";
+@forward "summary-list";
+@forward "table";
+@forward "tabs";
+@forward "tag";
+@forward "task-list";
+@forward "textarea";
+@forward "warning-text";
 
diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index f48f82914..c520f1a59 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -2,8 +2,8 @@
 /// @group components/button
 ////
 
-@use "../../base";
 @forward "../../base";
+@use "../../base";
 
 /// Button component background colour
 ///
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
index da5e0233f..fc7678911 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
@@ -1,9 +1,10 @@
 @use "../../base";
+@forward "../../base";
 
-@import "../error-message";
-@import "../hint";
-@import "../label";
-@import "../textarea";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
+@forward "../textarea";
 
 @include base.govuk-exports("govuk/component/character-count") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
index dcf085e18..e6af4808a 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
@@ -1,10 +1,10 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../fieldset";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../fieldset";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/checkboxes") {
   $govuk-touch-target-gutter: 4px;
diff --git a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
index 81b608cd4..ba438c787 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
@@ -1,7 +1,7 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../button";
+@forward "../button";
 
 @include base.govuk-exports("govuk/component/cookie-banner") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss b/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss
index 0dc9a3d79..4744227fe 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/_index.scss
@@ -1,11 +1,11 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../input";
-@import "../hint";
-@import "../label";
-@import "../fieldset";
+@forward "../error-message";
+@forward "../input";
+@forward "../hint";
+@forward "../label";
+@forward "../fieldset";
 
 @include base.govuk-exports("govuk/component/date-input") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
index dc7693c46..79b471847 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
@@ -1,7 +1,7 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../../core/lists";
+@use "../../core/lists";
 
 @include base.govuk-exports("govuk/component/error-summary") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss b/packages/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss
index 66d0c6c3e..b0b3c5c19 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss
@@ -1,7 +1,7 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../button";
+@forward "../button";
 
 @include base.govuk-exports("govuk/component/exit-this-page") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 9ab056309..e408d9bbd 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -1,9 +1,9 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/file-upload") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/input/_index.scss b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
index ed39c0e86..09af314ce 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
@@ -1,9 +1,9 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/input") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
index 1dc5fe3e4..2a2ddd822 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
@@ -1,8 +1,8 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../button";
-@import "../input";
+@forward "../button";
+@forward "../input";
 
 @include base.govuk-exports("govuk/component/password-input") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
index 82c821d35..2baad331b 100644
--- a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
@@ -1,7 +1,7 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../tag";
+@forward "../tag";
 
 @include base.govuk-exports("govuk/component/phase-banner") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index b3c36271c..4bd9a104d 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -1,10 +1,10 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../fieldset";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../fieldset";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/radios") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/select/_index.scss b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
index 9dde81b42..116e55dbb 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
@@ -1,9 +1,9 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/select") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
index d70ff1df6..6a12f0d1e 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
@@ -1,7 +1,7 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../tag";
+@forward "../tag";
 
 @include base.govuk-exports("govuk/component/task-list") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
index 111e9b5d8..79152d07e 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
@@ -1,9 +1,9 @@
 @forward "../../base";
 @use "../../base";
 
-@import "../error-message";
-@import "../hint";
-@import "../label";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 @include base.govuk-exports("govuk/component/textarea") {
   @include base.govuk-custom-properties;
diff --git a/packages/govuk-frontend/dist/govuk/core/_global-styles.scss b/packages/govuk-frontend/dist/govuk/core/_global-styles.scss
index 0c7d0e1fa..69aff3844 100644
--- a/packages/govuk-frontend/dist/govuk/core/_global-styles.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_global-styles.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 @import "links";
 @import "typography";
diff --git a/packages/govuk-frontend/dist/govuk/core/_index.scss b/packages/govuk-frontend/dist/govuk/core/_index.scss
index 360867714..2b522a088 100644
--- a/packages/govuk-frontend/dist/govuk/core/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_index.scss
@@ -1,3 +1,11 @@
+// This layer has not been updated to use `@use` because it uses both
+// placeholders and extends, and there is a bug with `@extends` when used with
+// placeholders in a module that is then imported (affecting Sass < 1.92.0)
+// – see https://github.com/sass/dart-sass/issues/2616
+//
+// We'll need to keep using @import for this layer until we drop support for
+// including GOV.UK Frontend using `@import`.
+
 @import "links";
 @import "lists";
 @import "typography";
diff --git a/packages/govuk-frontend/dist/govuk/core/_links.scss b/packages/govuk-frontend/dist/govuk/core/_links.scss
index 810681b37..8b97ed1ec 100644
--- a/packages/govuk-frontend/dist/govuk/core/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_links.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 
 @include base.govuk-exports("govuk/core/links") {
diff --git a/packages/govuk-frontend/dist/govuk/core/_lists.scss b/packages/govuk-frontend/dist/govuk/core/_lists.scss
index ba765e8aa..248f35387 100644
--- a/packages/govuk-frontend/dist/govuk/core/_lists.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_lists.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 
 @include base.govuk-exports("govuk/core/lists") {
diff --git a/packages/govuk-frontend/dist/govuk/core/_section-break.scss b/packages/govuk-frontend/dist/govuk/core/_section-break.scss
index a44d042e6..5416e40be 100644
--- a/packages/govuk-frontend/dist/govuk/core/_section-break.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_section-break.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 
 @include base.govuk-exports("govuk/core/section-break") {
diff --git a/packages/govuk-frontend/dist/govuk/core/_typography.scss b/packages/govuk-frontend/dist/govuk/core/_typography.scss
index 77d178e55..2d5af85c1 100644
--- a/packages/govuk-frontend/dist/govuk/core/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_typography.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 
 @include base.govuk-exports("govuk/core/typography") {
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_device-pixels.scss b/packages/govuk-frontend/dist/govuk/helpers/_device-pixels.scss
index 9eafaf2b8..e3d1577a1 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_device-pixels.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_device-pixels.scss
@@ -2,6 +2,8 @@
 /// @group helpers
 ////
 
+@use "sass:list";
+
 /// Media query for retina images (device-pixel-ratio)
 ///
 /// @param {Number} $ratio [2] - Device pixel ratio
@@ -27,8 +29,6 @@
 ///
 /// @access public
 
-@use "sass:list";
-
 @mixin govuk-device-pixel-ratio($ratio: 2) {
   @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
     only screen and (min-resolution: #{($ratio * 96)}dpi),
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_index.scss b/packages/govuk-frontend/dist/govuk/helpers/_index.scss
index 465736b60..8ec70a666 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_index.scss
@@ -9,4 +9,5 @@
 @forward "spacing";
 @forward "typography";
 @forward "visually-hidden";
+@forward "width-container";
 
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_spacing.scss b/packages/govuk-frontend/dist/govuk/helpers/_spacing.scss
index 5a251ed32..6cb50a908 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_spacing.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_spacing.scss
@@ -62,8 +62,6 @@
 /// spacing scale, which defines different spacing values at different
 /// breakpoints. Wrapper for the `govuk-responsive-spacing.govuk-responsive-spacing` mixin.
 ///
-/// @see {mixin} govuk-responsive.govuk-responsive-spacing
-///
 /// @param {Number} $responsive-spacing-point - Point on the responsive spacing
 /// scale, corresponds to a map of breakpoints and spacing values
 /// @param {String} $direction [all] - Direction to add spacing to
@@ -94,8 +92,6 @@
 /// spacing scale, which defines different spacing values at different
 /// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
 ///
-/// @see {mixin} _govuk-responsive-spacing
-///
 /// @param {Number} $responsive-spacing-point - Point on the responsive spacing
 ///   scale, corresponds to a map of breakpoints and spacing values
 /// @param {String} $direction [all] - Direction to add spacing to
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_width-container.import.scss b/packages/govuk-frontend/dist/govuk/helpers/_width-container.import.scss
new file mode 100644
index 000000000..39b0d06e1
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/helpers/_width-container.import.scss
@@ -0,0 +1,2 @@
+@forward "width-container";
+
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_width-container.scss b/packages/govuk-frontend/dist/govuk/helpers/_width-container.scss
new file mode 100644
index 000000000..5ac0d3aef
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/helpers/_width-container.scss
@@ -0,0 +1,73 @@
+////
+/// @group helpers/width-container
+////
+
+@use "sass:string";
+
+@use "../settings/measurements" as *;
+@use "media-queries" as *;
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+///  .app-width-container--wide {
+///    @include govuk-width-container(1200px);
+///  }
+///
+/// @access public
+
+@mixin govuk-width-container($width: $govuk-page-width) {
+  // By default, limit the width of the container to the page width
+  max-width: $width;
+
+  // On mobile, add half width gutters
+  margin-right: $govuk-gutter-half;
+  margin-left: $govuk-gutter-half;
+
+  // Respect 'display cutout' safe area (avoids notches and rounded corners)
+  @supports (margin: string.unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+    // Use max() to pick largest margin, default or with safe area
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
+    margin-left: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
+  }
+
+  // On tablet, add full width gutters
+  @media #{govuk-from-breakpoint(tablet)} {
+    margin-right: $govuk-gutter;
+    margin-left: $govuk-gutter;
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+      // Use max() to pick largest margin, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: string.unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
+      margin-left: string.unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
+    }
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @media (min-width: #{($width + $govuk-gutter * 2)}) {
+    margin-right: auto;
+    margin-left: auto;
+
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}
+
diff --git a/packages/govuk-frontend/dist/govuk/index.scss b/packages/govuk-frontend/dist/govuk/index.scss
index 05ffca0ba..7d282d8e4 100644
--- a/packages/govuk-frontend/dist/govuk/index.scss
+++ b/packages/govuk-frontend/dist/govuk/index.scss
@@ -1,10 +1,12 @@
 @forward "base--forwarding";
 
-@import "core";
-@import "objects";
+// Forward access to 'govuk-global-styles' mixin
+@forward "core";
+@forward "objects";
 
-@import "components";
+// Forward so users can still set button-related variables
+@forward "components";
 
-@import "utilities";
-@import "overrides";
+@forward "utilities";
+@forward "overrides";
 
diff --git a/packages/govuk-frontend/dist/govuk/objects/_button-group.scss b/packages/govuk-frontend/dist/govuk/objects/_button-group.scss
index 6e17cc198..cd987fa5c 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_button-group.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_button-group.scss
@@ -1,3 +1,4 @@
+@forward "../base";
 @use "../base";
 
 @include base.govuk-exports("govuk/objects/button-group") {
diff --git a/packages/govuk-frontend/dist/govuk/objects/_index.scss b/packages/govuk-frontend/dist/govuk/objects/_index.scss
index 5408a55a1..d67176529 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_index.scss
@@ -1,7 +1,7 @@
-@import "button-group";
-@import "form-group";
-@import "grid";
-@import "main-wrapper";
-@import "template";
-@import "width-container";
+@forward "button-group";
+@forward "form-group";
+@forward "grid";
+@forward "main-wrapper";
+@forward "template";
+@forward "width-container";
 
diff --git a/packages/govuk-frontend/dist/govuk/objects/_width-container.scss b/packages/govuk-frontend/dist/govuk/objects/_width-container.scss
index a81787630..7bed47048 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_width-container.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_width-container.scss
@@ -1,79 +1,13 @@
 ////
 /// @group objects/layout
 ////
-@use "sass:string";
-
 @use "../base";
 
-/// Width container mixin
-///
-/// Used to create page width and custom width container classes.
-///
-/// @param {String} $width [$govuk-page-width] - Width in pixels
-///
-/// @example scss - Creating a 1200px wide container class
-///  .app-width-container--wide {
-///    @include govuk-width-container(1200px);
-///  }
-///
-/// @access public
-
-@mixin govuk-width-container($width: base.$govuk-page-width) {
-  // By default, limit the width of the container to the page width
-  max-width: $width;
-
-  // On mobile, add half width gutters
-  margin-right: base.$govuk-gutter-half;
-  margin-left: base.$govuk-gutter-half;
-
-  // Respect 'display cutout' safe area (avoids notches and rounded corners)
-  @supports (margin: string.unquote("max(calc(0px))")) {
-    $gutter-safe-area-right: calc(#{base.$govuk-gutter-half} + env(safe-area-inset-right));
-    $gutter-safe-area-left: calc(#{base.$govuk-gutter-half} + env(safe-area-inset-left));
-
-    // Use max() to pick largest margin, default or with safe area
-    // Escaped due to Sass max() vs. CSS native max()
-    margin-right: string.unquote("max(#{base.$govuk-gutter-half}, #{$gutter-safe-area-right})");
-    margin-left: string.unquote("max(#{base.$govuk-gutter-half}, #{$gutter-safe-area-left})");
-  }
-
-  // On tablet, add full width gutters
-  @media #{base.govuk-from-breakpoint(tablet)} {
-    margin-right: base.$govuk-gutter;
-    margin-left: base.$govuk-gutter;
-
-    // Respect 'display cutout' safe area (avoids notches and rounded corners)
-    @supports (margin: string.unquote("max(calc(0px))")) {
-      $gutter-safe-area-right: calc(#{base.$govuk-gutter-half} + env(safe-area-inset-right));
-      $gutter-safe-area-left: calc(#{base.$govuk-gutter-half} + env(safe-area-inset-left));
-
-      // Use max() to pick largest margin, default or with safe area
-      // Escaped due to Sass max() vs. CSS native max()
-      margin-right: string.unquote("max(#{base.$govuk-gutter}, #{$gutter-safe-area-right})");
-      margin-left: string.unquote("max(#{base.$govuk-gutter}, #{$gutter-safe-area-left})");
-    }
-  }
-
-  // As soon as the viewport is greater than the width of the page plus the
-  // gutters, just centre the content instead of adding gutters.
-  @media (min-width: #{($width + base.$govuk-gutter * 2)}) {
-    margin-right: auto;
-    margin-left: auto;
-
-    // Since a safe area may have previously been set above,
-    // we need to duplicate this margin that centers the page.
-    @supports (margin: string.unquote("max(calc(0px))")) {
-      margin-right: auto;
-      margin-left: auto;
-    }
-  }
-}
-
 @include base.govuk-exports("govuk/objects/width-container") {
   @include base.govuk-custom-properties;
 
   .govuk-width-container {
-    @include govuk-width-container;
+    @include base.govuk-width-container;
   }
 }
 
diff --git a/packages/govuk-frontend/dist/govuk/overrides/_index.scss b/packages/govuk-frontend/dist/govuk/overrides/_index.scss
index b85625354..809730235 100644
--- a/packages/govuk-frontend/dist/govuk/overrides/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/overrides/_index.scss
@@ -1,6 +1,6 @@
-@import "display";
-@import "spacing";
-@import "text-align";
-@import "typography";
-@import "width";
+@use "display";
+@use "spacing";
+@use "text-align";
+@use "typography";
+@use "width";
 
diff --git a/packages/govuk-frontend/dist/govuk/utilities/_index.scss b/packages/govuk-frontend/dist/govuk/utilities/_index.scss
index cdbb8a57d..f27bd7405 100644
--- a/packages/govuk-frontend/dist/govuk/utilities/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/utilities/_index.scss
@@ -1,3 +1,3 @@
-@import "clearfix";
-@import "visually-hidden";
+@use "clearfix";
+@use "visually-hidden";

Action run for 04dfa1d

github-actions · 2026-04-08T15:08:40Z

📋 Stats

No changes to any distributed file sizes!

Action run for 04dfa1d

As there are now no Sass API members in the objects layer, there’s nothing to forward.

For reasons unknown this also changes where the govuk-global-styles mixin appears in the API order

Putting the `@use` between the Sassdoc and the mixin breaks the link between the two, and results in sassdoc related warnings popping up: ``` » [WARNING] Annotation `parameter` is not allowed on comment from type `unknown` in `_device-pixels.scss:5:28`. » [WARNING] Annotation `content` is not allowed on comment from type `unknown` in `_device-pixels.scss:5:28`. ```

36degrees added 4 commits April 8, 2026 14:47

Snapshot the Sass API

f754352

This will help us identify where future updates change the visibility of members currently exposed when you use the package.

Add test for extending placeholders in core

ad4136d

Add note on core needing to keep using @import

7dcdc06

36degrees marked this pull request as draft April 8, 2026 15:05

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6929 April 8, 2026 15:05 Inactive

36degrees added 15 commits April 8, 2026 16:21

Move govuk-width-container mixin to helpers

b6c27fd

Update width container tests to use @use

58bc429

Update index to use objects

3b62fcd

As there are now no Sass API members in the objects layer, there’s nothing to forward.

Update objects index to use objects

27a43eb

Update index to use components

d496192

Make index forward components

da93e0c

For reasons unknown this also changes where the govuk-global-styles mixin appears in the API order

Update components index to use/forward components

a6eb7ac

Update components to use sub components

cd40d04

Update index to use utilities

4080322

Update utilities index to use utilities

ad5ba63

Update index to use overrides

55615cf

Update overrides index to use overrides

e7d0b72

Add missing forward of base in character count

ffaeaab

Remove references to internal mixins from API docs

968b481

36degrees force-pushed the sass-wip branch from 0b14ec9 to 968b481 Compare April 8, 2026 15:22

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6929 April 8, 2026 15:22 Inactive

36degrees added 2 commits April 8, 2026 17:51

Add yet more tests for common cases

8385c24

Forward all the things

04dfa1d

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6929 April 8, 2026 16:52 Inactive

govuk-design-system-ci deployed to govuk-frontend-pr-6929 April 15, 2026 12:41 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SPIKE] Sass WIP#6929

[SPIKE] Sass WIP#6929
36degrees wants to merge 21 commits intofeature/sass-modulesfrom
sass-wip

36degrees commented Apr 8, 2026

Uh oh!

github-actions bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

36degrees commented Apr 8, 2026

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other changes to npm package

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Stats

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading