Migrate to dart sass

.gitignore

@@ -12,6 +12,8 @@
 !/log/.keep
 /tmp/*
 /coverage
+/app/assets/builds/*
+!/app/assets/builds/.keep
 
 node_modules
 yarn-error.log

Gemfile

@@ -4,14 +4,14 @@ gem "rails", "7.1.3.4"
 
 gem "bootsnap", require: false
 gem "bootstrap-kaminari-views"
+gem "dartsass-rails"
 gem "govuk_app_config"
 gem "hashdiff"
 gem "jquery-ui-rails"
 gem "kaminari"
 gem "pg"
 gem "prometheus-client"
 gem "rack-proxy"
-gem "sassc-rails"
 gem "select2-rails", "< 4" # There are unresolved visual and HTML changes with select2-rails 4
 gem "sentry-sidekiq"
 gem "simple_form"

Gemfile.lock

@@ -117,6 +117,9 @@ GEM
       rexml
     crass (1.0.6)
     csv (3.3.0)
+    dartsass-rails (0.5.1)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.3.4)
     diff-lcs (1.5.1)
     docile (1.4.0)
@@ -650,14 +653,17 @@ GEM
       rubocop (~> 1.61)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sass-embedded (1.77.8)
+      google-protobuf (~> 4.26)
+      rake (>= 13)
+    sass-embedded (1.77.8-aarch64-linux-gnu)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-arm64-darwin)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-x86_64-linux-gnu)
+      google-protobuf (~> 4.26)
     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
     select2-rails (3.5.11)
     selenium-webdriver (4.21.1)
       base64 (~> 0.2)
@@ -702,7 +708,6 @@ GEM
     terser (1.2.3)
       execjs (>= 0.3.0, < 3)
     thor (1.3.1)
-    tilt (2.0.10)
     timeout (0.4.1)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
@@ -742,6 +747,7 @@ DEPENDENCIES
   better_errors
   bootsnap
   bootstrap-kaminari-views
+  dartsass-rails
   factory_bot_rails
   fakefs
   gds-api-adapters
@@ -764,7 +770,6 @@ DEPENDENCIES
   rails (= 7.1.3.4)
   rspec-rails
   rubocop-govuk
-  sassc-rails
   select2-rails (< 4)
   sentry-sidekiq
   simple_form

Procfile.dev

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

app/assets/config/manifest.js

@@ -1,3 +1,3 @@
 //= link_tree ../images
 //= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
+//= link_tree ../builds

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

@@ -51,6 +51,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/initializers/dartsass.rb

@@ -0,0 +1,8 @@
+APP_STYLESHEETS = {
+  "application.scss" => "application.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"