From 51d3b20e2b18acadeacb077617c033a9d62a5304 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 16:01:16 +0000 Subject: [PATCH 1/5] Update gemfile.lock --- Gemfile.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/Gemfile.lock b/Gemfile.lock index a85138f7a..084b696b1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -455,6 +455,7 @@ PLATFORMS arm64-darwin-21 arm64-darwin-22 arm64-darwin-23 + arm64-darwin-24 x86_64-darwin-20 x86_64-darwin-21 x86_64-darwin-22 From 8791e00094e0cd03fb4b34f13722ec2dfb282c09 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 16:02:15 +0000 Subject: [PATCH 2/5] Switch to modern Sass API --- vite.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 29afefd33..a6e1323f1 100644 --- a/vite.config.js +++ b/vite.config.js @@ -8,7 +8,8 @@ export default defineConfig({ css: { preprocessorOptions: { scss: { - includePaths: ['./node_modules/govuk-frontend/'], + api: 'modern', + loadPaths: ['./node_modules/govuk-frontend/'], quietDeps: true }, devSourcemaps: true From 132a6fc6528c05a6c4460fdd0335d4a13a8e7e30 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 16:06:20 +0000 Subject: [PATCH 3/5] Load govuk-frontend Sass with NodePackageImporter There's [a bug in the way Vite's inbuilt sass importing works](https://github.com/vitejs/vite/issues/19196) 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.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss index d03280a09..ce190bc16 100644 --- a/app/frontend/entrypoints/application.scss +++ b/app/frontend/entrypoints/application.scss @@ -2,7 +2,7 @@ $govuk-images-path: "@govuk/assets/images/"; $govuk-fonts-path: "@govuk/assets/fonts/"; $govuk-global-styles: true; -@import "@govuk/all"; +@import "pkg:govuk-frontend"; @import "dfe-autocomplete/src/dfe-autocomplete"; @import "../../components/form_header_component/"; @import "../styles/app-panel"; diff --git a/vite.config.js b/vite.config.js index a6e1323f1..7166249a4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,7 @@ import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' import * as path from 'node:path' +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 2ace7774ddc6e49fd01d2dbe03beb2dd8912fc25 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 16:20:19 +0000 Subject: [PATCH 4/5] Load dfe-autocomplete Sass with NodePackageImporter While dfe-autocomplete doesn't appear to be affected by the same Vite bug that caused us to use this importer for the govuk-frontend package, it still makes sense to use the NodePackageImporter since it's consistent and makes it obvious what's being imported. --- app/frontend/entrypoints/application.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss index ce190bc16..b3c297688 100644 --- a/app/frontend/entrypoints/application.scss +++ b/app/frontend/entrypoints/application.scss @@ -3,6 +3,6 @@ $govuk-fonts-path: "@govuk/assets/fonts/"; $govuk-global-styles: true; @import "pkg:govuk-frontend"; -@import "dfe-autocomplete/src/dfe-autocomplete"; +@import "pkg:dfe-autocomplete/src/dfe-autocomplete"; @import "../../components/form_header_component/"; @import "../styles/app-panel"; From 757202b4cde7d044efaca3caad82ca5d1ef16e36 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 16:08:09 +0000 Subject: [PATCH 5/5] 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 b3c297688..c22d5b22f 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; @import "pkg:govuk-frontend";