From cff87b6620f792e187dc95f9ebc1ccfbc4059472 Mon Sep 17 00:00:00 2001 From: davidtrussler Date: Thu, 8 Aug 2024 12:09:10 +0100 Subject: [PATCH] Migrate to Dart Sass - Initial installation - Configuration - Add builds folder - Update the manifest file - Add an initializer - Delete unused Sass configuration - Configure build options - Replace asset helpers - Update permissions for `bin/dev` - Update `Procfile.dev` to include the worker process - Add Glyphicons to legacy CSS file --- .gitignore | 3 +++ Gemfile | 2 +- Gemfile.lock | 21 ++++++++++++------- Procfile.dev | 3 +++ app/assets/builds/.keep | 0 app/assets/config/manifest.js | 4 +--- .../stylesheets/legacy-application.scss | 7 +++++++ app/assets/stylesheets/sortable_table.scss | 6 +++--- bin/dev | 6 ++++++ config/environments/development.rb | 3 ++- config/environments/production.rb | 3 --- config/initializers/dartsass.rb | 8 +++++++ 12 files changed, 47 insertions(+), 19 deletions(-) create mode 100644 Procfile.dev create mode 100644 app/assets/builds/.keep create mode 100755 bin/dev create mode 100644 config/initializers/dartsass.rb diff --git a/.gitignore b/.gitignore index 8f2334ab5..0afe0d74f 100644 --- a/.gitignore +++ b/.gitignore @@ -12,12 +12,15 @@ coverage test/reports .generators .rakeTasks +/app/assets/builds/* +!/app/assets/builds/.keep *.daemonette-dump data/local_interactions.csv config/initializers/dev_*.rb reports/* .byebug_history + # Local transactions import reports removed_ghosts*.csv ghosts*.csv diff --git a/Gemfile b/Gemfile index 4e2045ff6..50efad651 100644 --- a/Gemfile +++ b/Gemfile @@ -5,6 +5,7 @@ gem "rails", "7.0.8.3" gem "aws-sdk-s3", "~> 1" gem "bootsnap", require: false gem "bootstrap-kaminari-views" +gem "dartsass-rails" gem "diffy" gem "erb_lint" gem "erubis" @@ -34,7 +35,6 @@ gem "null_logger" gem "plek" gem "rails_autolink" gem "rest-client", require: false -gem "sassc-rails" gem "select2-rails", "~> 3.5.9" # Updating this will mean updating the styling as 4 & > have a new approach to class names. gem "sentry-sidekiq" gem "sprockets-rails" diff --git a/Gemfile.lock b/Gemfile.lock index b96f327dd..0b7f02553 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -142,6 +142,9 @@ GEM bigdecimal rexml crass (1.0.6) + dartsass-rails (0.5.1) + railties (>= 6.0.0) + sass-embedded (~> 1.63) database_cleaner-core (2.0.1) database_cleaner-mongoid (2.0.1) database_cleaner-core (~> 2.0.0) @@ -723,14 +726,17 @@ GEM sanitize (6.1.0) crass (~> 1.0.2) nokogiri (>= 1.12.0) + 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) @@ -792,7 +798,6 @@ GEM terser (1.2.3) execjs (>= 0.3.0, < 3) thor (1.3.1) - tilt (2.0.10) timecop (0.9.10) timeout (0.4.1) tzinfo (2.0.6) @@ -832,6 +837,7 @@ DEPENDENCIES capybara-select-2 ci_reporter_minitest climate_control + dartsass-rails database_cleaner-mongoid diffy erb_lint @@ -873,7 +879,6 @@ DEPENDENCIES rails_autolink rest-client rubocop-govuk - sassc-rails select2-rails (~> 3.5.9) sentry-sidekiq shoulda diff --git a/Procfile.dev b/Procfile.dev new file mode 100644 index 000000000..64210186e --- /dev/null +++ b/Procfile.dev @@ -0,0 +1,3 @@ +web: bin/rails server -p 3000 +css: bin/rails dartsass:watch +worker: bundle exec sidekiq -C ./config/sidekiq.yml diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index c69f3cdb7..69f2f3330 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,7 +1,5 @@ //= link_tree ../images //= link application.js -//= link application.css - //= link legacy-application.js -//= link legacy-application.css //= link es6-components.js +//= link_tree ../builds diff --git a/app/assets/stylesheets/legacy-application.scss b/app/assets/stylesheets/legacy-application.scss index 689bc91de..497d4873a 100644 --- a/app/assets/stylesheets/legacy-application.scss +++ b/app/assets/stylesheets/legacy-application.scss @@ -22,3 +22,10 @@ // GOVUK Design System @import "govuk_publishing_components/all_components"; + +// Include glyphicons - still required in legacy styles but cannot be loaded from Bootstrap via Dart Sass +@font-face { + font-family: "Glyphicons Halflings"; + src: url("bootstrap/glyphicons-halflings-regular.eot"); + src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg") +} diff --git a/app/assets/stylesheets/sortable_table.scss b/app/assets/stylesheets/sortable_table.scss index 614ebd1ad..143bc1f80 100644 --- a/app/assets/stylesheets/sortable_table.scss +++ b/app/assets/stylesheets/sortable_table.scss @@ -21,7 +21,7 @@ } th .sortable { - background-image: image-url("bg.gif"); + background-image: url("bg.gif"); cursor: pointer; background-repeat: no-repeat; background-position: center right; @@ -29,12 +29,12 @@ th .sortable { } th .asc { - background-image: image-url("asc.gif"); + background-image: url("asc.gif"); background-color: #dddddd; } th .desc { - background-image: image-url("desc.gif"); + background-image: url("desc.gif"); background-color: #dddddd; } diff --git a/bin/dev b/bin/dev new file mode 100755 index 000000000..a97073e78 --- /dev/null +++ b/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 "$@" diff --git a/config/environments/development.rb b/config/environments/development.rb index ddcafbb3e..d58f3d7cc 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -69,7 +69,8 @@ # Asset digests allow you to set far-future HTTP expiration dates on all assets, # yet still be able to expire them through the digest params. - config.assets.digest = true + # Set to false to see the latest stylesheet changes if running Sass in watch mode + config.assets.digest = false # Suppress logger output for asset requests. config.assets.quiet = true diff --git a/config/environments/production.rb b/config/environments/production.rb index b5c9a1cee..5c8ae7619 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -36,9 +36,6 @@ # Generate digests for assets URLs. config.assets.digest = true - # 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" diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb new file mode 100644 index 000000000..1cf0036a3 --- /dev/null +++ b/config/initializers/dartsass.rb @@ -0,0 +1,8 @@ +APP_STYLESHEETS = { + "application.scss" => "application.css", + "legacy-application.scss" => "legacy-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"