Migrate to Sass modules

nhsuk · Feb 20, 2025 · 7db8e5d · 7db8e5d
1 parent cbcf74b
commit 7db8e5d
Show file tree

Hide file tree

Showing 76 changed files with 443 additions and 135 deletions.
diff --git a/docs/contributing/coding-standards.md b/docs/contributing/coding-standards.md
@@ -133,10 +133,12 @@ Create separate selectors rather using an `&` in the middle of a selector.
 This enables the NHSUK styles to be used inside other applications, where, for example, an ID is being used to isolate a section of a page to style separately from the rest of an application; e.g.
 
 ```scss
+@use "sass:meta";
+
 div#nhsuk-ers {
-// ...
-@import "node_modules/nhsuk-frontend/packages/core/all";
-// ...
+  // ...
+  @include meta.load-css("node_modules/nhsuk-frontend/packages/core/all");
+  // ...
 }
 ```
 

diff --git a/docs/installation/installing-with-npm.md b/docs/installation/installing-with-npm.md
@@ -36,20 +36,28 @@ You will need to import a couple of things into your project before you can star
 
 To build the stylesheet you will need a pipeline set up to compile [Sass](https://sass-lang.com/) files to CSS. We recommend using [gulp](https://gulpjs.com/) and [gulp-sass](https://www.npmjs.com/package/gulp-sass) however you can use any tools that you are familiar with.
 
-You need to import the NHS.UK frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass imports).
+You need to include the NHS.UK frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass `@use`).
 
 ```scss
-@import "node_modules/nhsuk-frontend/packages/nhsuk";
+@use "node_modules/nhsuk-frontend/packages/nhsuk" as *;
 ```
 
-Alternatively you can import each of the individual components separately, meaning you can import just the components that you are using.
+Alternatively you can use NHS.UK frontend styles with custom configuration:
+
+```scss
+@use "node_modules/nhsuk-frontend/packages/nhsuk" as * with (
+  $nhsuk-include-font-face: false
+);
+```
+
+Or to use only the minimum components necessary:
 
 ```scss
 // Core (required)
-@import "node_modules/nhsuk-frontend/packages/core/all";
+@use "node_modules/nhsuk-frontend/packages/core/all" as *;
 
 // Individual component (optional)
-@import "node_modules/nhsuk-frontend/packages/components/action-link/action-link";
+@use "node_modules/nhsuk-frontend/packages/components/action-link/action-link" as *;
 ```
 
 ## Importing JavaScript

diff --git a/packages/components/action-link/_action-link.scss b/packages/components/action-link/_action-link.scss
@@ -1,3 +1,11 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/typography" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Action link component
 ///

diff --git a/packages/components/back-link/_back-link.scss b/packages/components/back-link/_back-link.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/links" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Back link component
 ///

diff --git a/packages/components/breadcrumb/_breadcrumb.scss b/packages/components/breadcrumb/_breadcrumb.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Breadcrumb component
 ///

diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Button component
 ///

diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Card component
 ///

diff --git a/packages/components/character-count/_character-count.scss b/packages/components/character-count/_character-count.scss
@@ -1,3 +1,5 @@
+@use "../../core/tools/spacing" as *;
+
 .nhsuk-character-count {
   @include nhsuk-responsive-margin(6, "bottom");
 

diff --git a/packages/components/checkboxes/_checkboxes.scss b/packages/components/checkboxes/_checkboxes.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Checkboxes component
 ///

diff --git a/packages/components/contents-list/_contents-list.scss b/packages/components/contents-list/_contents-list.scss
@@ -1,3 +1,8 @@
+@use "../../core/settings/typography" as *;
+@use "../../core/tools/functions" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+
 ////
 /// Contents list component
 ///

diff --git a/packages/components/date-input/_date-input.scss b/packages/components/date-input/_date-input.scss
@@ -1,3 +1,6 @@
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/spacing" as *;
+
 ////
 /// Date input component
 ///

diff --git a/packages/components/details/_details.scss b/packages/components/details/_details.scss
@@ -1,3 +1,12 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/shape-arrow" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Details component
 ///

diff --git a/packages/components/do-dont-list/_do-dont-list.scss b/packages/components/do-dont-list/_do-dont-list.scss
@@ -1,3 +1,6 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/mixins" as *;
+
 ////
 /// Do and Don't list component
 ///

diff --git a/packages/components/error-message/_error-message.scss b/packages/components/error-message/_error-message.scss
@@ -1,3 +1,7 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Error message component
 ///

diff --git a/packages/components/error-summary/_error-summary.scss b/packages/components/error-summary/_error-summary.scss
@@ -1,3 +1,10 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Error summary component
 ///

diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss
@@ -1,3 +1,8 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Fieldset component
 ///

diff --git a/packages/components/footer/_footer.scss b/packages/components/footer/_footer.scss
@@ -1,11 +1,16 @@
+@use "sass:math";
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Footer component
 ///
 /// @group components
 ////
 
-@use "sass:math";
-
 .nhsuk-footer-container {
   @include clearfix;
   @include print-hide;

diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+
 /// These are the styles for the organisation header variants.
 
 .nhsuk-header--organisation {

diff --git a/packages/components/header/_header-service.scss b/packages/components/header/_header-service.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 /// These are the styles for the service header variants.
 
 .nhsuk-header__link--service {

diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
@@ -1,3 +1,9 @@
+@use "../../core/tools/links" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 /// These are the styles for the transactional header variants.
 
 .nhsuk-header__transactional-service-name {

diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
@@ -1,3 +1,8 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+
 /// These are the styles for the white header variants.
 
 .nhsuk-header--white {

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -1,3 +1,13 @@
+@use "../../core/objects/width-container" as *;
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/links" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Header component
 ///

diff --git a/packages/components/hero/_hero.scss b/packages/components/hero/_hero.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+
 ////
 /// Hero component shared styles
 ///

diff --git a/packages/components/hint/_hint.scss b/packages/components/hint/_hint.scss
@@ -1,3 +1,7 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Hint component
 ///

diff --git a/packages/components/images/_images.scss b/packages/components/images/_images.scss
@@ -1,3 +1,9 @@
+@use "sass:math";
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Image component
 ///
@@ -9,8 +15,6 @@
 /// @group components
 ////
 
-@use "sass:math";
-
 .nhsuk-image {
   background-color: $color_nhsuk-white;
   border-bottom: 1px solid $color_nhsuk-grey-4;

diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss
@@ -1,3 +1,11 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/functions" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Input component
 ///

diff --git a/packages/components/inset-text/_inset-text.scss b/packages/components/inset-text/_inset-text.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+
 ////
 /// Inset text component
 ///

diff --git a/packages/components/label/_label.scss b/packages/components/label/_label.scss
@@ -1,3 +1,7 @@
+@use "../../core/settings/typography" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Label component
 ///

diff --git a/packages/components/pagination/_pagination.scss b/packages/components/pagination/_pagination.scss
@@ -1,3 +1,10 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Pagination component
 ///

diff --git a/packages/components/panel/_panel.scss b/packages/components/panel/_panel.scss
@@ -1,3 +1,10 @@
+@use "../../core/settings/colours" as *;
+// @use "../../core/tools/focused" as *;
+// @use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Panel component
 ///

diff --git a/packages/components/radios/_radios.scss b/packages/components/radios/_radios.scss
@@ -1,3 +1,12 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+@use "../checkboxes/checkboxes" as *;
+
 ////
 /// Radios component
 ///

diff --git a/packages/components/select/_select.scss b/packages/components/select/_select.scss
@@ -1,3 +1,9 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/globals" as *;
+@use "../../core/tools/focused" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Select component
 ///

diff --git a/packages/components/skip-link/_skip-link.scss b/packages/components/skip-link/_skip-link.scss
@@ -1,3 +1,6 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/spacing" as *;
+
 ////
 /// Skip link component
 ///

diff --git a/packages/components/summary-list/_summary-list.scss b/packages/components/summary-list/_summary-list.scss
@@ -1,3 +1,8 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Summary list component
 ///

diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss
@@ -1,3 +1,10 @@
+@use "../../core/settings/colours" as *;
+@use "../../core/settings/typography" as *;
+@use "../../core/tools/mixins" as *;
+@use "../../core/tools/sass-mq" as *;
+@use "../../core/tools/spacing" as *;
+@use "../../core/tools/typography" as *;
+
 ////
 /// Table component
 ///