From 70817001dc861d11dc362b6aae5ab14c0ef5960f Mon Sep 17 00:00:00 2001 From: David Biddle Date: Fri, 10 Jan 2025 13:57:58 +0000 Subject: [PATCH 1/4] Switch to modern Sass API We were previously using the 'legacy' Sass API, which is deprecated. This commit switches to the modern version This will cause some assets not to build properly - this is [a known issue](https://trello.com/c/pfzCTVnB/2066-investigate-asset-building-issue-with-modern-sass-api) which we'll solve in an upcoming commit. --- vite.config.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 2fba2135..b85c84eb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,14 +3,13 @@ import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' export default defineConfig({ - plugins: [ - RubyPlugin(), - ], + plugins: [RubyPlugin()], build: { emptyOutDir: true }, css: { preprocessorOptions: { scss: { - includePaths: ['./node_modules/govuk-frontend/'], + api: 'modern', + loadPaths: ['./node_modules/govuk-frontend/'], quietDeps: true }, devSourcemaps: true @@ -18,7 +17,10 @@ export default defineConfig({ }, resolve: { alias: { - '@govuk': path.resolve(__dirname, 'node_modules/govuk-frontend/dist/govuk'), + '@govuk': path.resolve( + __dirname, + 'node_modules/govuk-frontend/dist/govuk' + ), '@images': path.resolve(__dirname, 'app/frontend/images') } } From 4a0cef9a7f2ef5af44aa5054e01dc86518b72dcd Mon Sep 17 00:00:00 2001 From: David Biddle Date: Fri, 10 Jan 2025 13:59:55 +0000 Subject: [PATCH 2/4] Load govuk-frontend Sass with NodePackageImporter There's a bug in the way Vite's inbuilt sass importing works that means some of our assets don't build properly if we import the govuk-frontend styles using the @govuk alias. We can get around this by using Sass's builtin NodEpackageImporter to import the govuk-frontend styles. This bypasses the Vite import code that causes the issue. It's also better for a couple of other reasons. It makes it clear that this import is coming from an npm package (which was obscured slightly when we were using the alias). It also makes us resilient to structure changes in the govuk-frontend package (NodePackageImporter uses the 'sass' field in govuk-frontend's package.json to determine the file to import, so we no longer need to point to a specific file which could change). --- app/frontend/entrypoints/application.scss | 2 +- vite.config.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss index 5a15706c..7e321e0a 100644 --- a/app/frontend/entrypoints/application.scss +++ b/app/frontend/entrypoints/application.scss @@ -5,7 +5,7 @@ $govuk-suppressed-warnings: ( ie8 ); -@import "@govuk/all"; +@import "pkg:govuk-frontend"; @import "../styles/responsive-embed"; @import "../styles/sub-navigation"; diff --git a/vite.config.ts b/vite.config.ts index b85c84eb..e72442f1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import * as path from 'node:path' import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' +import { NodePackageImporter } from 'sass' export default defineConfig({ plugins: [RubyPlugin()], @@ -9,7 +10,7 @@ export default defineConfig({ preprocessorOptions: { scss: { api: 'modern', - loadPaths: ['./node_modules/govuk-frontend/'], + importers: [new NodePackageImporter()], quietDeps: true }, devSourcemaps: true From ff79c93ac45d37bcce3d8e6a9bbbcbf1de123ad4 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Fri, 10 Jan 2025 14:00:42 +0000 Subject: [PATCH 3/4] Remove duplicate imports These files were being imported twice unnecessarily - this commit removes the duplicates. --- app/frontend/entrypoints/application.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss index 7e321e0a..129a11fc 100644 --- a/app/frontend/entrypoints/application.scss +++ b/app/frontend/entrypoints/application.scss @@ -7,9 +7,6 @@ $govuk-suppressed-warnings: ( @import "pkg:govuk-frontend"; -@import "../styles/responsive-embed"; -@import "../styles/sub-navigation"; - @import "../styles/borders"; @import "../styles/breadcrumbs"; @import "../styles/header"; From 319986d7abd215c6b7b2cb7960cca84e5307ebc3 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Fri, 10 Jan 2025 14:01:26 +0000 Subject: [PATCH 4/4] Use $govuk-assets-path We were configuring both $govuk-fonts-path and $govuk-images-path. This was overly verbose, since for our folder structure we can configure $govuk-assets-path and it will generate values for $govuk-fonts-path and $govuk-images-path identical to those we were passing in. --- app/frontend/entrypoints/application.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss index 129a11fc..47463002 100644 --- a/app/frontend/entrypoints/application.scss +++ b/app/frontend/entrypoints/application.scss @@ -1,5 +1,4 @@ -$govuk-images-path: "@govuk/assets/images/"; -$govuk-fonts-path: "@govuk/assets/fonts/"; +$govuk-assets-path: "@govuk/assets/"; $govuk-global-styles: true; $govuk-suppressed-warnings: ( ie8