From cdea41017c7255061a1cc7abfd6d930dca326872 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 15:41:02 +0000 Subject: [PATCH 1/4] Update gemfile.lock --- Gemfile.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/Gemfile.lock b/Gemfile.lock index a5cfb881f..31f21a4a3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -514,6 +514,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 f307b1af7659850807160c44ed2fee0088fd6937 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 15:43:53 +0000 Subject: [PATCH 2/4] 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 1b0bf446c..be5d2ade2 100644 --- a/vite.config.js +++ b/vite.config.js @@ -10,7 +10,8 @@ export default defineConfig({ css: { preprocessorOptions: { scss: { - includePaths: ['./node_modules/govuk-frontend/'], + api: 'modern', + loadPaths: ['./node_modules/govuk-frontend/'], quietDeps: true }, devSourcemaps: true From 03309fc12736d4f23909eb25389777222c668fb1 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 15:48:43 +0000 Subject: [PATCH 3/4] 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 8757bebfb..246685eea 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 "../styles/app_form_states"; @import "../styles/app_memorandum_of_understanding"; diff --git a/vite.config.js b/vite.config.js index be5d2ade2..c330afed1 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,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()], @@ -11,7 +12,7 @@ export default defineConfig({ preprocessorOptions: { scss: { api: 'modern', - loadPaths: ['./node_modules/govuk-frontend/'], + importers: [new NodePackageImporter()], quietDeps: true }, devSourcemaps: true From f98237be6bd728c25f8bd1cb2129fa347c0cf270 Mon Sep 17 00:00:00 2001 From: David Biddle Date: Wed, 15 Jan 2025 15:51:54 +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 246685eea..87410cfbc 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";