Switch from rails-sassc to cssbundling-rails (#7121)

MarkUsProject · Jun 15, 2024 · 8e0986b · 8e0986b
1 parent 463c860
commit 8e0986b
Show file tree

Hide file tree

Showing 27 changed files with 114 additions and 525 deletions.
diff --git a/.dockerfiles/entrypoint-dev-rails.sh b/.dockerfiles/entrypoint-dev-rails.sh
@@ -31,5 +31,8 @@ sed -i -e :a -e '/^\n*$/{$d;N;};/\n$/ba' /app/db/structure.sql
 
 rm -f ./tmp/pids/server.pid
 
+# cssbundling-rails development command
+npm run build-dev:css &
+
 # Then exec the container's main process (what's set as CMD in the Dockerfile or compose.yaml).
 exec "$@"
diff --git a/.github/workflows/test_ci.yml b/.github/workflows/test_ci.yml
@@ -86,7 +86,9 @@ jobs:
           sudo sed -ri 's/(rights=")none("\s+pattern="PDF")/\1read\2/' /etc/ImageMagick-6/policy.xml
           cp config/database.yml.ci config/database.yml
       - name: Build assets
-        run: bundle exec rake javascript:build
+        run: |
+          bundle exec rake javascript:build
+          bundle exec rake css:build
       - name: Set up database
         run: bundle exec rails db:migrate
       - name: Install chrome

diff --git a/Changelog.md b/Changelog.md
@@ -38,6 +38,7 @@
 - Upgrade CI chromedriver to 125.0.6422.60 (#7082)
 - Fix flaky `Assignment#summary_json` test (#7111)
 - Upgrade pdfjs-dist to v4.3.136 (#7113)
+- Switch from rails-sassc to cssbundling-rails for CSS asset management (#7121)
 
 ## [v2.4.11]
 

diff --git a/Gemfile b/Gemfile
@@ -19,7 +19,6 @@ gem 'pluck_to_hash'
 gem 'autoprefixer-rails'
 gem 'jsbundling-rails'
 gem 'js-routes'
-gem 'sass-rails'
 gem 'terser'
 
 # Background tasks
@@ -124,3 +123,5 @@ end
 group :unicorn do
   gem 'unicorn'
 end
+
+gem 'cssbundling-rails', '~> 1.4'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -138,6 +138,8 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     debug (1.9.2)
       irb (~> 1.10)
@@ -413,16 +415,6 @@ GEM
     rufus-scheduler (3.9.1)
       fugit (~> 1.1, >= 1.1.6)
     rugged (1.7.2)
-    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
     selenium-webdriver (4.21.1)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
@@ -506,6 +498,7 @@ DEPENDENCIES
   combine_pdf
   config
   cookies_eu
+  cssbundling-rails (~> 1.4)
   debug (>= 1.0.0)
   descriptive_statistics
   dry-validation
@@ -546,7 +539,6 @@ DEPENDENCIES
   rtesseract
   rubyzip
   rugged
-  sass-rails
   selenium-webdriver
   shoulda
   shoulda-callback-matchers (~> 1.1.1)

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,14 +1,9 @@
 //= link_tree ../javascripts .js
-//= link_directory ../stylesheets .css
-//= link common/SyntaxHighlighter.css
-//= link common/jupyterlab-markus-custom.css
 
 //= link_tree ../../../vendor/assets/javascripts .js
-//= link_tree ../../../vendor/assets/stylesheets .css
 //= link cookies_eu.js
 
 // Images and fonts so that views can link to them
 //
 //= link_tree ../images
 //= link_tree ../builds
-//= link flatpickr/dist/flatpickr.css
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/common/_login.scss b/app/assets/stylesheets/common/_login.scss
@@ -92,7 +92,7 @@
   }
 
   .login-image {
-    background: transparent asset-url('markus_logo.svg') no-repeat center center / contain;
+    background: transparent url('markus_logo.svg') no-repeat center center / contain;
     height: 115px;
     margin: 0 auto;
     width: 220px;

diff --git a/app/assets/stylesheets/common/_navigation.scss b/app/assets/stylesheets/common/_navigation.scss
@@ -58,7 +58,7 @@ nav {
 }
 
 #logo-img {
-  background: transparent asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
+  background: transparent url('markus_logo.svg') no-repeat center center / 90px 30px;
   margin-right: $dimen-horizontal-nav;
   min-height: 38px;
   width: 90px;
@@ -70,11 +70,11 @@ nav {
 
 .color-dark {
   #logo-img {
-    background-image: asset-url('markus_logo_dark.svg');
+    background-image: url('markus_logo_dark.svg');
   }
 
   #mobile_menu {
-    background-image: asset-url('markus_logo_dark.svg');
+    background-image: url('markus_logo_dark.svg');
   }
 }
 
@@ -131,7 +131,7 @@ nav {
 }
 
 #mobile_menu {
-  background: $background-support asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
+  background: $background-support url('markus_logo.svg') no-repeat center center / 90px 30px;
   border-bottom: 1px solid $primary-three;
   display: none;
   height: 3.5em;

diff --git a/app/assets/stylesheets/entrypoints/application.scss b/app/assets/stylesheets/entrypoints/application.scss
@@ -0,0 +1,15 @@
+// Entry point for your Sass build
+@use 'clickable';
+@use 'fonts';
+@use 'common/pdfjs_custom';
+@use 'common/core';
+
+@use 'flatpickr/dist/flatpickr.min';
+@use 'react-table/react-table';
+@use 'react-tabs/style/react-tabs';
+@use 'react-keyed-file-browser/dist/react-keyed-file-browser';
+
+// We create a copy of the vendored assets in the cookies_eu gem due to limitation of cssbundling-rails.
+// See https://github.com/rails/cssbundling-rails/issues/81.
+@use 'cookies_eu';
+@use 'jquery-ui';
diff --git a/app/assets/stylesheets/entrypoints/notebook_common.scss b/app/assets/stylesheets/entrypoints/notebook_common.scss
@@ -0,0 +1,5 @@
+@use 'jupyterlab';
+@use 'jupyterlab-extra';
+
+@use 'fonts';
+@use 'common/jupyterlab-markus-custom';
diff --git a/app/assets/stylesheets/entrypoints/notebook_dark.scss b/app/assets/stylesheets/entrypoints/notebook_dark.scss
@@ -0,0 +1,2 @@
+@use 'jupyterlab-theme-dark-extension';
+@use 'pygments-monokai';
diff --git a/app/assets/stylesheets/entrypoints/notebook_light.scss b/app/assets/stylesheets/entrypoints/notebook_light.scss
@@ -0,0 +1,2 @@
+@use 'jupyterlab-theme-light-extension';
+@use 'pygments-default';
diff --git a/app/assets/stylesheets/entrypoints/result_main.scss b/app/assets/stylesheets/entrypoints/result_main.scss
@@ -0,0 +1,3 @@
+@use 'common/SyntaxHighlighter';
+@use 'context_menu';
+@use 'grader';
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
@@ -3,12 +3,12 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 100 1000;
-  src: asset-url('fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  src: url('fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
 }
 
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 100 1000;
-  src: asset-url('fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  src: url('fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
 }
diff --git a/app/assets/stylesheets/result_main.scss b/app/assets/stylesheets/result_main.scss
diff --git a/app/views/exam_templates/assign_errors.html.erb b/app/views/exam_templates/assign_errors.html.erb
@@ -1,6 +1,5 @@
 <% content_for :head do %>
-  <%= stylesheet_link_tag('grader') %>
-  <%= stylesheet_link_tag('context_menu') %>
+  <%= stylesheet_link_tag 'result_main' %>
   <%= stylesheet_link_tag 'result' %>
 
   <%= javascript_include_tag 'result', nonce: true %>

diff --git a/app/views/groups/assign_scans.html.erb b/app/views/groups/assign_scans.html.erb
@@ -1,6 +1,5 @@
 <% content_for :head do %>
-  <%= stylesheet_link_tag 'grader',
-                          'jquery-ui' %>
+  <%= stylesheet_link_tag 'result_main' %>
   <%= stylesheet_link_tag 'result' %>
   <%= javascript_include_tag 'result', nonce: true %>
 <% end %>

diff --git a/app/views/layouts/notebook.html.erb b/app/views/layouts/notebook.html.erb
@@ -2,16 +2,11 @@
 <html lang="<%= I18n.locale %>">
   <head>
     <% if @notebook_type == 'jupyter-notebook' %>
-      <%= stylesheet_link_tag 'jupyterlab' %>
-      <%= stylesheet_link_tag 'jupyterlab-extra' %>
-      <%= stylesheet_link_tag 'fonts' %>
-      <%= stylesheet_link_tag 'common/jupyterlab-markus-custom' %>
+      <%= stylesheet_link_tag 'notebook_common' %>
       <% if @current_user&.theme == 'dark' %>
-        <%= stylesheet_link_tag 'jupyterlab-theme-dark-extension' %>
-        <%= stylesheet_link_tag 'pygments-monokai' %>
+        <%= stylesheet_link_tag 'notebook_dark' %>
       <% else %>
-        <%= stylesheet_link_tag 'jupyterlab-theme-light-extension' %>
-        <%= stylesheet_link_tag 'pygments-default' %>
+        <%= stylesheet_link_tag 'notebook_light' %>
       <% end %>
       <%= javascript_include_tag 'require', nonce: true %>
       <%= javascript_tag nonce: true do %>

diff --git a/config/initializers/compressors.rb b/config/initializers/compressors.rb
@@ -1,7 +1,7 @@
 if Rails.env.production?
   Rails.application.config.assets.js_compressor = :terser
-  Rails.application.config.assets.css_compressor = :sass
 else
   Rails.application.config.assets.js_compressor = nil
-  Rails.application.config.assets.css_compressor = nil
 end
+
+Rails.application.config.assets.css_compressor = nil
diff --git a/package.json b/package.json
@@ -66,6 +66,8 @@
   "scripts": {
     "build": "node_modules/.bin/webpack --progress --config webpack.production.js",
     "build-dev": "node_modules/.bin/webpack --progress --config webpack.development.js",
+    "build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds/ --no-source-map --load-path=node_modules --load-path=./app/assets/stylesheets --load-path=./vendor/assets/stylesheets --style=compressed",
+    "build-dev:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds/ --watch --load-path=node_modules --load-path=./app/assets/stylesheets --load-path=./vendor/assets/stylesheets",
     "test": "node_modules/.bin/jest --no-cache",
     "test-cov": "node_modules/.bin/jest --no-cache --collect-coverage"
   }

diff --git a/vendor/assets/stylesheets/cookies_eu.scss b/vendor/assets/stylesheets/cookies_eu.scss
@@ -0,0 +1,59 @@
+$cookies-eu-background-color: #F2F2F2;
+$cookies-eu-border-color: #E4E4E4;
+$cookies-eu-button-background-color: #4D90FE;
+$cookies-eu-button-color: #FFFFFF;
+$cookies-eu-mobile: 'max-width: 767px';
+
+.cookies-eu {
+  line-height: 40px;
+
+  position: fixed;
+  z-index: 999;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 0 20px;
+
+  text-align: center;
+
+  border-top: 1px solid $cookies-eu-border-color;
+  background: $cookies-eu-background-color;
+
+  @media ($cookies-eu-mobile) {
+    font-size: 12px;
+    line-height: 30px;
+
+    position: initial;
+  }
+
+  .cookies-eu-content-holder {
+    display: inline-block;
+
+    padding: 0 20px;
+  }
+
+  .cookies-eu-button-holder {
+    display: inline-block;
+
+    .cookies-eu-ok {
+      font-size: 11px;
+      font-weight: bold;
+
+      line-height: 20px;
+
+      min-width: 26px;
+      margin-right: 5px;
+      padding: 2px 11px;
+
+      cursor: pointer;
+      text-align: center;
+      white-space: nowrap;
+
+      color: $cookies-eu-button-color;
+      border: 0;
+      outline: none;
+      background-color: $cookies-eu-button-background-color;
+    }
+  }
+}
diff --git a/vendor/assets/stylesheets/jquery-ui-timepicker-addon.css b/vendor/assets/stylesheets/jquery-ui-timepicker-addon.css