Merge pull request #2709 from alphagov/use-dartsass-rails-vs-sassc-rails

Use dartsass-rails vs sassc-rails

.gitignore

@@ -30,3 +30,7 @@ yarn-error.log
 
 # Ignore compiled Rails assets
 /public/assets
+
+# For dartsass-rails
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -7,6 +7,7 @@ gem "addressable"
 gem "ancestry"
 gem "bootsnap", require: false
 gem "browser"
+gem "dartsass-rails"
 gem "devise"
 gem "devise-encryptable"
 gem "devise_invitable"
@@ -24,7 +25,6 @@ gem "rails-html-sanitizer"
 gem "rake"
 gem "rotp"
 gem "rqrcode"
-gem "sassc-rails"
 gem "sentry-sidekiq"
 gem "sprockets-rails"
 gem "uglifier"

Gemfile.lock

@@ -112,6 +112,9 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    dartsass-rails (0.5.0)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.3.4)
     debug_inspector (1.2.0)
     devise (4.9.3)
@@ -609,14 +612,15 @@ GEM
     ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    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.70.0)
+      google-protobuf (~> 3.25)
+      rake (>= 13.0.0)
+    sass-embedded (1.70.0-aarch64-linux-gnu)
+      google-protobuf (~> 3.25)
+    sass-embedded (1.70.0-arm64-darwin)
+      google-protobuf (~> 3.25)
+    sass-embedded (1.70.0-x86_64-linux-gnu)
+      google-protobuf (~> 3.25)
     selenium-webdriver (4.17.0)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
@@ -651,7 +655,6 @@ GEM
     statsd-ruby (1.5.0)
     systemu (2.6.5)
     thor (1.3.0)
-    tilt (2.3.0)
     timecop (0.9.8)
     timeout (0.4.1)
     tzinfo (2.0.6)
@@ -696,6 +699,7 @@ DEPENDENCIES
   capybara
   capybara-email
   climate_control
+  dartsass-rails
   devise
   devise-encryptable
   devise_invitable
@@ -727,7 +731,6 @@ DEPENDENCIES
   rotp
   rqrcode
   rubocop-govuk
-  sassc-rails
   sentry-sidekiq
   shoulda-context
   simplecov

Procfile.dev

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

Rakefile

@@ -5,10 +5,5 @@ require File.expand_path("config/application", __dir__)
 
 Signon::Application.load_tasks
 
-require "sprockets/rails/task"
-Sprockets::Rails::Task.new(Rails.application) do |t|
-  t.log_level = Logger::WARN
-end
-
 Rake::Task[:default].clear_prerequisites
 task default: %i[lint jasmine test]

app/assets/config/manifest.js

@@ -1,3 +1,3 @@
 //= link_tree ../images
-//= link application.css
+//= link_tree ../builds
 //= link application.js

app/assets/stylesheets/application.scss

@@ -4,7 +4,8 @@ $govuk-page-width: 1140px;
 @import "user_research_recruitment_banner";
 
 // Components from this application
-@import "components/*";
+@import "components/contact-details";
+@import "components/table";
 
 // TODO: move into component
 .gem-c-success-alert,

app/assets/stylesheets/components/_table.scss

@@ -10,7 +10,7 @@ $vertical-on-smallscreen-breakpoint: 940px;
 $sort-link-active-colour: govuk-colour("white");
 $sort-link-arrow-size: 14px;
 $sort-link-arrow-size-small: 8px;
-$sort-link-arrow-spacing: $sort-link-arrow-size / 2;
+$sort-link-arrow-spacing: calc($sort-link-arrow-size / 2);
 $table-row-hover-background-colour: rgba(43, 140, 196, .2);
 $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
 

bin/dev

@@ -0,0 +1,6 @@
+#!/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

@@ -63,6 +63,10 @@
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  # Disable digest to see the latest stylesheet changes when running Sass in watch mode
+  # See https://guides.rubyonrails.org/v7.1.3/asset_pipeline.html#turning-digests-off
+  config.assets.digest = false
+
   # Raises error for missing translations.
   # config.i18n.raise_on_missing_translations = true
 

config/environments/production.rb

@@ -27,9 +27,6 @@
   # Compress CSS using a preprocessor.
   # config.assets.css_compressor = :sass
 
-  # Do not add source map line comments into css files
-  config.sass.line_comments = false
-
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false
 

config/initializers/dartsass.rb

@@ -0,0 +1 @@
+Rails.application.config.dartsass.build_options << " --quiet-deps"

lib/tasks/assets.rake

@@ -0,0 +1,6 @@
+require "sprockets/rails/task"
+Sprockets::Rails::Task.new(Rails.application) do |t|
+  t.log_level = Logger::WARN
+end
+
+Rake::Task["assets:precompile"].enhance(["dartsass:build"])