[WIP] Migrate from libsass to dart sass

.gitignore

@@ -33,3 +33,6 @@ config/environments/*.local.yml
 
 /node_modules
 /public/assets
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -11,14 +11,8 @@ gem 'rails', '~> 7.0'
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem 'sprockets-rails'
 
-# Use SCSS for stylesheets
-gem 'sassc-rails'
 # Use Puma as the app server
 gem 'puma', '~> 5.0'
-# Use Uglifier as compressor for JavaScript assets
-gem 'uglifier', '>= 2.7.2'
-# See https://github.com/sstephenson/execjs#readme for more supported runtimes
-# gem 'therubyracer', platforms: :ruby
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
@@ -115,7 +109,6 @@ source 'https://gems.contribsys.com/' do
 end
 
 gem 'sidekiq', '~> 7.0'
-gem 'sul_styles'
 gem 'dotenv'
 gem 'riiif'
 gem 'rsolr'
@@ -138,3 +131,5 @@ gem 'blacklight-oembed', '~> 1.0'
 
 # Used for shared reporting https://github.com/sul-dlss/exhibits/issues/2069
 gem 'redis', '~> 5.0'
+
+gem "cssbundling-rails", "~> 1.1"

Gemfile.lock

@@ -231,6 +231,8 @@ GEM
       rexml
     csl-styles (2.0.1)
       csl (~> 2.0)
+    cssbundling-rails (1.1.2)
+      railties (>= 6.0.0)
     database_cleaner (2.0.1)
       database_cleaner-active_record (~> 2.0.0)
     database_cleaner-active_record (2.0.1)
@@ -711,8 +713,6 @@ GEM
     stanford-mods (3.3.1)
       activesupport
       mods (~> 3.0, >= 3.0.3)
-    sul_styles (0.7.0)
-      rails (>= 4.1, < 8)
     test_xml (0.1.8)
       diffy (~> 3.0)
       nokogiri (>= 1.3.2)
@@ -748,8 +748,6 @@ GEM
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     uber (0.1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     underscore-rails (1.8.3)
     unf (0.1.4)
       unf_ext
@@ -813,6 +811,7 @@ DEPENDENCIES
   citeproc-ruby
   config
   csl-styles
+  cssbundling-rails (~> 1.1)
   database_cleaner
   debug
   devise
@@ -851,7 +850,6 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-oembed
-  sassc-rails
   selenium-webdriver (!= 3.13.0)
   sidekiq (~> 7.0)
   sidekiq-pro (~> 7.0)!
@@ -864,13 +862,11 @@ DEPENDENCIES
   sprockets-rails
   sqlite3
   stanford-mods (~> 3.0)
-  sul_styles
   traject
   turbolinks (~> 5)
   turnout
   twitter-typeahead-rails (= 0.11.1.pre.corejavascript)
   tzinfo-data
-  uglifier (>= 2.7.2)
   web-console (>= 4.1.0)
   webdrivers
   webmock

Procfile.dev

@@ -0,0 +1,2 @@
+web: unset PORT && bin/rails server
+css: yarn build:css --watch

README.md

@@ -31,19 +31,19 @@ See [projectblacklight/spotlight](https://github.com/projectblacklight/spotlight
 Install dependencies, set up the databases and run migrations:
 ```console
 $ bundle install
-$ bundle exec rake db:setup
+$ bin/rails db:setup
 ```
 
 You can spin up the Rails server, solr_wrapper, and populate the Solr index using this command:
 ```console
-$ REMOTE_USER="[email protected]" bundle exec rake server
+$ REMOTE_USER="[email protected]" bin/dev
 ```
 When prompted to create an admin user, the email should match the email provided in  `REMOTE_USER`. This will allow you to bypass authentication.
 
 ## Testing
 Run RuboCop and tests:
 ```console
-$ bundle exec rake
+$ bin/rake
 ```
 
 **Tip:** if you receive the error message `ERROR: Core 'blacklight-core' already exists!` you have an instance of Solr running elsewhere. Clean out your data with `solr_wrapper clean` or search for rogue instances with `ps aux | grep solr`.

app/assets/config/manifest.js

@@ -3,3 +3,4 @@
 //= link application.css
 //= link application_parker.css
 //= link openseadragon-assets.js
+//= link_tree ../builds

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1,2 @@
+// Entry point for your Sass build
+@import "base";

app/assets/stylesheets/base.scss

@@ -1,4 +1,4 @@
-@import 'blacklight_range_limit/blacklight_range_limit';
+@import 'blacklight-range-limit/app/assets/stylesheets/blacklight_range_limit/blacklight_range_limit';
 @import 'bootstrap-slider/dist/css/bootstrap-slider';
 @import "bootstrap-tagsinput";
 @import "variables"; // bootstrap variable overrides

app/assets/stylesheets/sul-styles.scss

@@ -0,0 +1,4 @@
+@import 'sul-styles/su_web_colors';
+@import 'sul-styles/su_primary_colors';
+@import 'sul-styles/variables';
+@import 'sul-styles/sul_footer';

app/assets/stylesheets/sul-styles/su_primary_colors.scss

@@ -0,0 +1,34 @@
+/*
+  Stanford Primary Colors
+  from https://identity.stanford.edu/overview/color.html
+*/
+
+// Primary Palette
+$color-cardinal-red: #8c1515;
+$color-cool-gray: #4d4f53;
+$color-black: #000;
+
+// Neutral Color Palette
+$color-pantone-467: #d2c295;
+$color-pantone-465: #b3995d;
+$color-pantone-403: #928b81;
+$color-pantone-401: #b6b1a9;
+$color-pantone-7527: #dad7cb;
+$color-pantone-5665: #c7d1c5;
+$color-pantone-445: #4d5357;
+$color-pantone-405: #5f574f;
+
+// Deep Tone Color Palette
+$color-pantone-1817: #5e3032;
+$color-pantone-7526: #8d3c1e;
+$color-pantone-3165: #00505c;
+$color-pantone-561: #175e54;
+$color-pantone-262: #53284f;
+
+// Bright Color Palette
+$color-pantone-2925: #0098db;
+$color-pantone-3145: #007c92;
+$color-pantone-334: #009b76;
+$color-pantone-7511: #b26f16;
+$color-pantone-144: #e98300;
+$color-pantone-124: #eaab00;

app/assets/stylesheets/sul-styles/su_web_colors.scss

@@ -0,0 +1,34 @@
+/*
+  Stanford Web Colors
+  from https://identity.stanford.edu/web-toolkit/color.html
+*/
+
+// Red
+$color-cardinal-red: #8c1515;
+$color-dark-red: #820000;
+
+// Black
+$color-blackish: #2e2d29;
+$color-black-80: #585754;
+
+// Warm Gray
+$color-gray: #3f3c30;
+$color-gray-90: #565347;
+$color-gray-60: #8a887d;
+
+// Sandstone
+$color-sandstone: #ddcf99;
+$color-sandstone-50: #eee6cb;
+$color-sandstone-35: #f3efd8;
+$color-sandstone-25: #f6f3e5;
+$color-sandstone-20: #f8f6ea;
+
+// Beige
+$color-beige: #9d9573;
+$color-beige-85: #aca68d;
+$color-beige-60: #c4bfa9;
+$color-beige-40: #d5d0c0;
+$color-beige-30: #e3dfd5;
+$color-beige-20: #e9e6df;
+$color-beige-10: #f2f1eb;
+$color-beige-05: #fbfbf9;

app/assets/stylesheets/sul-styles/sul_footer.scss

@@ -0,0 +1,77 @@
+#su-content {
+  padding-bottom: $footer-height !important;
+}
+
+#sul-footer-container {
+  background-color: $sul-footer-bg-color;
+  border-top: 1px solid $sul-footer-border-top-color;
+  -webkit-box-shadow: $sul-footer-shadow;
+  box-shadow: $sul-footer-shadow;
+  clear: both;
+  margin-top: -1 * $footer-height;
+  min-height: $footer-height;
+  padding: 0 !important;
+  position: relative;
+}
+
+#sul-footer {
+  display: table;
+  font-size: small;
+  height: 80px;
+  margin: 0 auto;
+  padding: 0;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  li {
+    display: inline;
+    margin: 0 13px 3px 0;
+    padding: 0;
+
+    a {
+      color: $color-blackish;
+      white-space: nowrap;
+    }
+
+    a,
+    a:hover,
+    a:focus {
+      border-bottom: 1px dotted $color-gray-60;
+      text-decoration: none;
+    }
+  }
+}
+
+#sul-footer-img {
+  display: table-cell;
+  vertical-align: middle;
+  width: 162px;
+}
+
+#sul-footer-links {
+  display: table-cell;
+  padding-left: 15px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  #sul-footer {
+    width: 750px;
+  }
+}
+
+@media (min-width: 980px) {
+  #sul-footer {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  #sul-footer {
+    width: 1170px;
+  }
+}

app/assets/stylesheets/sul-styles/variables.scss

@@ -0,0 +1,5 @@
+$sul-footer-bg-color: $color-beige-10;
+$sul-footer-border-top-color: $color-beige-20;
+$footer-height: 200px;
+$sul-footer-shadow-color: rgba(0, 0, 0, 0.2);
+$sul-footer-shadow: 0 4px 8px -8px $sul-footer-shadow-color inset;

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 "$@"

package.json

@@ -1,6 +1,11 @@
 {
   "dependencies": {
+    "blacklight-range-limit": "8.2.4-beta.1",
     "bootstrap": "^4.6.2",
-    "bootstrap-slider": "^11.0.2"
+    "bootstrap-slider": "^11.0.2",
+    "sass": "^1.57.1"
+  },
+  "scripts": {
+    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }