From 2e4e817512fe800d9e90edd55b127cf9fa13bb49 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:01:26 +0100 Subject: [PATCH 1/6] Replace sassc-rails with dartsass-rails --- Gemfile | 2 +- Gemfile.lock | 23 +++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/Gemfile b/Gemfile index 0209bb5dd..7094404c4 100644 --- a/Gemfile +++ b/Gemfile @@ -7,6 +7,7 @@ gem "activerecord-session_store" gem "acts-as-taggable-on" gem "aws-sdk-s3" gem "bootsnap", require: false +gem "dartsass-rails" gem "gds-api-adapters" gem "gds-sso" gem "google-api-client" @@ -28,7 +29,6 @@ gem "sentry-sidekiq" gem "whenever" gem "sass" -gem "sass-rails" gem "sprockets" gem "terser" diff --git a/Gemfile.lock b/Gemfile.lock index 0bf565a5e..c2822757d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -165,6 +165,9 @@ GEM cucumber (>= 5, < 10) railties (>= 5.2, < 8) cucumber-tag-expressions (4.1.0) + dartsass-rails (0.5.1) + railties (>= 6.0.0) + sass-embedded (~> 1.63) database_cleaner (2.0.2) database_cleaner-active_record (>= 2, < 3) database_cleaner-active_record (2.1.0) @@ -747,19 +750,20 @@ GEM rubyzip (2.3.2) sass (3.7.4) sass-listen (~> 4.0.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) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) - sass-rails (6.0.0) - sassc-rails (~> 2.1, >= 2.1.1) 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) @@ -810,7 +814,6 @@ GEM terser (1.2.3) execjs (>= 0.3.0, < 3) thor (1.3.1) - tilt (2.3.0) timecop (0.9.10) timeout (0.4.1) trailblazer-option (0.1.2) @@ -858,6 +861,7 @@ DEPENDENCIES bootsnap capybara-select-2 cucumber-rails + dartsass-rails database_cleaner factory_bot_rails gds-api-adapters @@ -884,7 +888,6 @@ DEPENDENCIES rspec-rails rubocop-govuk sass - sass-rails select2-rails (~> 3.5.11) sentry-sidekiq shoulda-matchers From 30a767b8642450384f1eb3d307df46b7d8305c87 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:04:06 +0100 Subject: [PATCH 2/6] Configure builds - Create `dartsass.builds` initializer and add all Sass files to be compiled. See https://github.com/rails/dartsass-rails#configuring-builds - Create .keep - Update manifest file to use /builds directory - Ignore /builds --- .gitignore | 2 ++ app/assets/builds/.keep | 0 app/assets/config/manifest.js | 3 +-- config/initializers/dartsass.rb | 9 +++++++++ 4 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 app/assets/builds/.keep create mode 100644 config/initializers/dartsass.rb diff --git a/.gitignore b/.gitignore index 231a1fe14..8582e3515 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,8 @@ # Ignore compiled assets /public/assets +/app/assets/builds/* +!/app/assets/builds/.keep # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored .yarn/* 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 4f5f7613a..24f60f7d2 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,7 +1,6 @@ //= link_tree ../images -//= link application.css -//= link legacy_layout.css //= link application.js //= link es6-components.js //= link legacy_layout.js //= link html5.js +//= link_tree ../builds diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb new file mode 100644 index 000000000..fe5911f79 --- /dev/null +++ b/config/initializers/dartsass.rb @@ -0,0 +1,9 @@ +APP_STYLESHEETS = { + "application.scss" => "application.css", + "legacy_layout.scss" => "legacy_layout.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" From b58546945aebd8c31f8565067238c30756793681 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:06:45 +0100 Subject: [PATCH 3/6] Add watch task - Also, turn digests off in development --- Procfile.dev | 2 ++ bin/dev | 8 ++++++++ config/environments/development.rb | 3 +++ 3 files changed, 13 insertions(+) create mode 100644 Procfile.dev create mode 100755 bin/dev diff --git a/Procfile.dev b/Procfile.dev new file mode 100644 index 000000000..852e6c710 --- /dev/null +++ b/Procfile.dev @@ -0,0 +1,2 @@ +web: bin/rails server -p 3000 +css: bin/rails dartsass:watch diff --git a/bin/dev b/bin/dev new file mode 100755 index 000000000..74ade1664 --- /dev/null +++ b/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 "$@" diff --git a/config/environments/development.rb b/config/environments/development.rb index 59661536c..59e038242 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -54,6 +54,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 From 36637b070aa9c9d1df225600e70be7be648fa24e Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:07:15 +0100 Subject: [PATCH 4/6] Delete unused Sass config --- config/environments/production.rb | 4 ---- 1 file changed, 4 deletions(-) diff --git a/config/environments/production.rb b/config/environments/production.rb index 5d75dac58..c4851bd19 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -78,10 +78,6 @@ # Do not dump schema after migrations. config.active_record.dump_schema_after_migration = false - # Rather than use a CSS compressor, use the SASS style to perform compression - config.sass.style = :compressed - config.sass.line_comments = false - # Enable DNS rebinding protection and other `Host` header attacks. # config.hosts = [ # "example.com", # Allow requests from example.com From 05a4814df863758f4e884b461fd4227b2ac98dde Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:14:05 +0100 Subject: [PATCH 5/6] Fix build error - was getting `undefined method assets` when trying to build transition in docker - followed this advice to fix the problem: https://stackoverflow.com/questions/50984265/ruby-on-rails-console-undefined-method-assets --- config/application.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/config/application.rb b/config/application.rb index a0d41d85b..36f812766 100644 --- a/config/application.rb +++ b/config/application.rb @@ -13,6 +13,7 @@ require "action_view/railtie" # require "action_cable/engine" require "rails/test_unit/railtie" +require "sprockets/railtie" # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. From 9d6ab0637a791c9fded7542bfe1cad86422f7da3 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2024 12:21:33 +0100 Subject: [PATCH 6/6] Fix icons - relying upon glyphicons as part of bootstrap, but the Sass for that doesn't compile properly in dart-sass because it uses `url(font-path(path))` - instead copy the font-face declaration from bootstrap into our code, overridding the original with this one, which fixes the icon paths and the icons - see similar problem fixed in content-tagger: https://github.com/alphagov/content-tagger/pull/1768 --- app/assets/stylesheets/legacy_layout.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/legacy_layout.scss b/app/assets/stylesheets/legacy_layout.scss index 2e3997ac8..c33ae998f 100644 --- a/app/assets/stylesheets/legacy_layout.scss +++ b/app/assets/stylesheets/legacy_layout.scss @@ -23,3 +23,9 @@ @import "legacy/style"; @import "legacy/versions"; @import "legacy/glossary"; + +@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") +}