Migrate to Dart Sass from LibSass

[jon-kirwan]

What

Migrate to Dart Sass from LibSass.

Why

• LibSass is now deprecated
• Making changes ahead of Design System team dropping support for LibSass Dropping support for Ruby Sass and LibSass govuk-frontend#2632.

Visual Changes

None.

How can I test these changes?

• run yarn jasmine:prepare (or run bundle exec rake app:assets:clobber app:assets:precompile)
• what should happen? The Sass files should be compiled. Keep an eye on the command line for warnings indicating the compilation process using Dart Sass

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(300%, 4) or calc(300% / 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
   │
26 │   three-quarters: (300% / 4),
   │                    ^^^^^^^^
   ...

• the /builds folder: app/assets/builds should now be populated with CSS files. Note, the
• subsequently, all assets ought to be generated successfully within the /public directory
• no test failures to indicate the correct number of stylesheets are generated
• deploy to Integration. You'll notice that in the 'build and publish image' task, the steps taken resemble those mentioned earlier, dartsass-rails is bundled and any Dart Sass warnings encountered during the compilation process are reported)
• inspect several pages, e.g.
  manage your GOV.UK email subscriptions, what do you want to get emails about?, get emails from GOV.UK, how often do you want to get emails? to ensure the absence of errors.

Anything else

Once the PR gets the green light, any temporary commits and references to local gems e.g. gem "govuk_publishing_components", path: "../govuk_publishing_components" will be removed.

See:

• Migrate to Dart Sass from LibSass collections#3447
• Migrate to Dart Sass from LibSass govuk_publishing_components#3726
• Migrate to Dart Sass from LibSass static#3190
• Migrate to Dart Sass from LibSass govuk-developer-docs#4216.

[MartinJJones]

Works great for me when testing locally 👍

Just wanted to ask if we will also include the generated files from running the ./bin/rails dartsass:install command to help watch for any CSS changes, similar to alphagov/government-frontend@1ed1fae

If so, I think we would also need to create a separate PR to add support for this in govuk-docker

[jon-kirwan]

Works great for me when testing locally 👍

Just wanted to ask if we will also include the generated files from running the ./bin/rails dartsass:install command to help watch for any CSS changes, similar to alphagov/government-frontend@1ed1fae

I'm on the fence about adding it here because of the limited number of pages (perhaps around 4?) and the difficulties of testing frontend changes without being signed in but perhaps I should consider enabling it here? What do you think? It might have been useful with the recent cross service header changes.

[MartinJJones]

I'm on the fence about adding it here because of the limited number of pages (perhaps around 4?) and the difficulties of testing frontend changes without being signed in but perhaps I should consider enabling it here? What do you think? It might have been useful with the recent cross service header changes.

Thanks, these are good points, sounds reasonable to me for this application, and you have already added a section on this in the developer docs should another developer want to add support for this in the future - https://github.com/alphagov/govuk-developer-docs/blob/3bac7fd893e0442f1e1afd3a28bdebe600bd5174/source/manual/migrate-to-dart-sass-from-libsass.html.md#watch-mode

[MartinJJones]

Changes look good to me, nice work!

Happy to approve the PR once the merge conflict is resolved, I think this will likely solve itself when testing is complete and "TEMP" commits removed/squashed.

[MartinJJones]

Changes look good to me 👍