Merge pull request #3034 from alphagov/migrate-to-dart-sass

Migrate to Dart Sass from LibSass

.gitignore

@@ -16,6 +16,8 @@
 /tmp
 
 /public/assets
+/app/assets/builds/*
+!/app/assets/builds/.keep
 /test/wraith/wip*
 shots/*
 /coverage

Gemfile

@@ -6,6 +6,7 @@ gem "rails", "7.0.8"
 
 gem "bootsnap", require: false
 gem "dalli"
+gem "dartsass-rails"
 gem "gds-api-adapters"
 gem "govspeak"
 gem "govuk_ab_testing"
@@ -19,7 +20,6 @@ gem "rails-i18n"
 gem "rails_translation_manager"
 gem "rinku", require: "rails_rinku"
 gem "rss"
-gem "sassc-rails"
 gem "slimmer"
 gem "sprockets-rails"
 gem "uglifier"

Gemfile.lock

@@ -106,6 +106,9 @@ GEM
     crass (1.0.6)
     csv (3.2.5)
     dalli (3.2.6)
+    dartsass-rails (0.5.0)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.3.4)
     debug_inspector (1.1.0)
     docile (1.4.0)
@@ -114,7 +117,6 @@ GEM
     execjs (2.8.1)
     faker (3.2.2)
       i18n (>= 1.8.11, < 2)
-    ffi (1.15.5)
     gds-api-adapters (92.1.0)
       addressable
       link_header
@@ -548,14 +550,9 @@ GEM
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
+    sass-embedded (1.69.7)
+      google-protobuf (~> 3.25)
+      rake (>= 13.0.0)
     selenium-webdriver (4.16.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -591,7 +588,6 @@ GEM
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     thor (1.3.0)
-    tilt (2.0.11)
     timecop (0.9.8)
     timeout (0.4.1)
     tzinfo (2.0.6)
@@ -622,6 +618,7 @@ DEPENDENCIES
   capybara
   climate_control
   dalli
+  dartsass-rails
   faker
   gds-api-adapters
   govspeak
@@ -644,7 +641,6 @@ DEPENDENCIES
   rinku
   rss
   rubocop-govuk
-  sassc-rails
   shoulda-context
   simplecov
   slimmer

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3090
+css: bin/rails dartsass:watch

app/assets/config/manifest.js

@@ -1,20 +1,4 @@
 //= link_tree ../images
 //= link application.js
 //= link webchat.js
-//= link application.css
-//= link components/_back-to-top.css
-//= link components/_banner.css
-//= link components/_contents-list-with-body.css
-//= link components/_download-link.css
-//= link components/_error-message.css
-//= link components/_figure.css
-//= link components/_important-metadata.css
-//= link components/_published-dates.css
-//= link components/_publisher-metadata.css
-//= link views/_guide.css
-//= link views/_html-publication.css
-//= link views/_manual.css
-//= link views/_published-dates-button-group.css
-//= link views/_service_manual_guide.css
-//= link views/_specialist-document.css
-//= link views/_travel-advice.css
+//= link_tree ../builds

app/assets/stylesheets/views/_service_manual_guide.scss

@@ -1,5 +1,17 @@
 @import "govuk_publishing_components/individual_component_support";
-@import "../modules/*";
+@import "../modules/change-history";
+@import "../modules/collection";
+@import "../modules/community-contact";
+@import "../modules/govspeak-wrapper";
+@import "../modules/hero";
+@import "../modules/notice";
+@import "../modules/page-contents";
+@import "../modules/page-header";
+@import "../modules/panel";
+@import "../modules/related-content";
+@import "../modules/service-standard-point";
+@import "../modules/sticky";
+@import "../modules/typography";
 
 .js-enabled {
   .app-change-history__past {

bin/dev

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"

config/environments/development.rb

@@ -45,6 +45,9 @@
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  # To see the latest stylesheet changes, if running Sass in watch mode
+  config.assets.digest = false
+
   # Raises error for missing translations.
   config.i18n.raise_on_missing_translations = true
 

config/environments/production.rb

@@ -33,10 +33,6 @@
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false
 
-  # Rather than use a CSS compressor, use the SASS style to perform compression.
-  config.sass.style = :compressed
-  config.sass.line_comments = false
-
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.asset_host = "http://assets.example.com"
 

config/initializers/dartsass.rb

@@ -0,0 +1,24 @@
+APP_STYLESHEETS = {
+  "application.scss" => "application.css",
+  "components/_back-to-top.scss" => "components/_back-to-top.css",
+  "components/_banner.scss" => "components/_banner.css",
+  "components/_contents-list-with-body.scss" => "components/_contents-list-with-body.css",
+  "components/_download-link.scss" => "components/_download-link.css",
+  "components/_error-message.scss" => "components/_error-message.css",
+  "components/_figure.scss" => "components/_figure.css",
+  "components/_important-metadata.scss" => "components/_important-metadata.css",
+  "components/_published-dates.scss" => "components/_published-dates.css",
+  "components/_publisher-metadata.scss" => "components/_publisher-metadata.css",
+  "views/_guide.scss" => "views/_guide.css",
+  "views/_html-publication.scss" => "views/_html-publication.css",
+  "views/_manual.scss" => "views/_manual.css",
+  "views/_published-dates-button-group.scss" => "views/_published-dates-button-group.css",
+  "views/_service_manual_guide.scss" => "views/_service_manual_guide.css",
+  "views/_specialist-document.scss" => "views/_specialist-document.css",
+  "views/_travel-advice.scss" => "views/_travel-advice.css",
+}.freeze
+
+all_stylesheets = APP_STYLESHEETS.merge(GovukPublishingComponents::Config.all_stylesheets)
+Rails.application.config.dartsass.builds = all_stylesheets
+
+Rails.application.config.dartsass.build_options << " --quiet-deps"

startup.sh

@@ -13,11 +13,10 @@ if [[ $1 == "--live" ]] ; then
   set_env "gov.uk"
   export GOVUK_PROXY_STATIC_ENABLED=true
   export PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-https://assets.publishing.service.gov.uk}
+  ./bin/dev
 else
   echo "ERROR: other startup modes are not supported"
   echo ""
   echo "https://docs.publishing.service.gov.uk/manual/local-frontend-development.html"
   exit 1
 fi
-
-bundle exec rails s -p 3090