Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to modern Sass API #1136

Merged
merged 5 commits into from
Jan 16, 2025
Merged

Switch to modern Sass API #1136

merged 5 commits into from
Jan 16, 2025

Conversation

DavidBiddle
Copy link
Contributor

What problem does this pull request solve?

Trello card: https://trello.com/c/pfzCTVnB/2066-investigate-asset-building-issue-with-modern-sass-api

We were seeing an issue with assets failing to build properly using the 'modern' Sass API. After investigating this appears to be caused by a bug in the Vite internal sass importer (vitejs/vite#19196).

This PR:

  • uses the sass NodePackageImporter to import govuk-frontend, which bypasses that bug and also offers us some other advantages (see commit message for more details)
  • updates to use the modern API
  • uses a more compact API for setting the asset paths

Things to consider when reviewing

  • Does it work when run on your machine?
  • Is it clear what the code is doing?
  • Do the commit messages explain why the changes were made?
  • Are there all the unit tests needed?
  • Has all relevant documentation been updated?

There's [a bug in the way Vite's inbuilt sass importing works](vitejs/vite#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).
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.
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.
@DavidBiddle DavidBiddle force-pushed the switch-to-modern-sass-api branch from 064c97f to 757202b Compare January 15, 2025 16:54
@DavidBiddle DavidBiddle merged commit 5bc1bc4 into main Jan 16, 2025
4 checks passed
@DavidBiddle DavidBiddle deleted the switch-to-modern-sass-api branch January 16, 2025 08:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants