Switch css bundling to esbuild

Gemfile

@@ -11,7 +11,6 @@ gem 'pg', '>= 1.2.3', '< 2.0'
 # Use Puma as the app server
 gem 'puma', '>= 5.5.2'
 # Use SCSS for stylesheets
-gem 'sass-rails', '>= 6'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -67,7 +66,6 @@ gem 'administrate', github: 'excid3/administrate', branch: 'jumpstart'
 gem 'administrate-field-active_storage'
 
 gem 'activerecord-import'
-gem 'bootstrap', '~> 4.3', '>= 4.3.1'
 gem 'data_migrate'
 gem 'devise', '~> 4.8.1', '>= 4.7.0'
 gem 'devise-bootstrapped', github: 'excid3/devise-bootstrapped',
@@ -113,4 +111,6 @@ gem 'jsbundling-rails', '~> 1.0'
 
 gem 'store_model', '~> 0.12.0'
 
-gem "local_time", "~> 2.1"
+gem 'local_time', '~> 2.1'
+
+gem "cssbundling-rails", "~> 1.0"

Gemfile.lock

@@ -119,16 +119,10 @@ GEM
       globalid
     anyway_config (2.2.2)
       ruby-next-core (>= 0.11.0)
-    autoprefixer-rails (10.3.3.0)
-      execjs (~> 2)
     bcrypt (3.1.16)
     bindex (0.8.1)
     bootsnap (1.9.3)
       msgpack (~> 1.0)
-    bootstrap (4.6.1)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
-      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.36.0)
@@ -154,6 +148,8 @@ GEM
     concurrent-ruby (1.1.9)
     connection_pool (2.2.5)
     crass (1.0.6)
+    cssbundling-rails (1.0.0)
+      railties (>= 6.0.0)
     data_migrate (7.0.2)
       activerecord (>= 5.0)
       railties (>= 5.0)
@@ -182,7 +178,6 @@ GEM
     erubis (2.7.0)
     et-orbi (1.2.6)
       tzinfo
-    execjs (2.8.1)
     factory_bot (6.2.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.2.0)
@@ -288,7 +283,6 @@ GEM
     orm_adapter (0.5.0)
     permessage_deflate (0.1.4)
     pg (1.2.3)
-    popper_js (1.16.0)
     pry (0.13.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -380,8 +374,6 @@ GEM
     ruby_parser (3.18.1)
       sexp_processor (~> 4.16)
     rubyzip (2.3.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)
@@ -456,7 +448,7 @@ GEM
       chronic (>= 0.6.3)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.5.1)
+    zeitwerk (2.5.3)
 
 PLATFORMS
   ruby
@@ -467,11 +459,11 @@ DEPENDENCIES
   administrate-field-active_storage
   anycable-rails
   bootsnap
-  bootstrap (~> 4.3, >= 4.3.1)
   byebug
   capybara (~> 3.36.0)
   client_side_validations
   client_side_validations-simple_form
+  cssbundling-rails (~> 1.0)
   data_migrate
   devise (~> 4.8.1, >= 4.7.0)
   devise-bootstrapped!
@@ -507,7 +499,6 @@ DEPENDENCIES
   rails_performance
   redis (~> 4.0)
   rspec-rails (~> 5.0.2)
-  sass-rails (>= 6)
   scenic
   selenium-webdriver (~> 4.1.0)
   sendgrid-actionmailer

Procfile.dev

@@ -3,3 +3,4 @@ worker: RUBY_YJIT_ENABLE=1 bundle exec sidekiq
 anycable: RUBY_YJIT_ENABLE=1 bundle exec anycable
 ws: anycable-go --port=8080
 js: ASSET_HOST="http://localhost:3000" CABLE_URL="ws://localhost:8080/cable" yarn build --watch
+css: yarn build:css --watch

app/assets/stylesheets/application.scss → app/assets/stylesheets/application.bootstrap.scss

@@ -2,8 +2,7 @@
 //$light-orange: #ff8c00;
 //$navbar-default-color: $light-orange;
 
-@import "font-awesome-sprockets";
-@import "font-awesome";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
 
 //@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
 //@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
@@ -13,9 +12,7 @@
 //"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
 //"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $spacer: 0.7rem;
-@import "bootstrap";
-
-// Add SASS theme customizations here..
+@import "bootstrap/scss/bootstrap";
 @import "bootstrap-colorpicker";
 
 //$h1-font-size: $font-size-base * 2.25 !default;

app/assets/stylesheets/groups.scss

@@ -1,5 +1,3 @@
-@import "bootstrap";
-
 #groups {
   margin-bottom: 4rem;
 }

app/javascript/application.js

@@ -54,3 +54,4 @@ document.addEventListener("turbolinks:render", () => {
 
   Turbolinks.scroll = {}
 })
+import * as bootstrap from "bootstrap"

package.json

@@ -4,13 +4,15 @@
   "dependencies": {
     "@client-side-validations/client-side-validations": "^0.1.4",
     "@client-side-validations/simple-form": "^0.1.3",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@popperjs/core": "^2.11.0",
     "@preact/compat": "^17.0.3",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@reduxjs/toolkit": "^1.5.0",
     "axios": "^0.21.1",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "^4.6.1",
     "bootstrap-colorpicker": "^3.2.0",
     "data-confirm-modal": "^1.6.2",
     "esbuild": "^0.14.8",
@@ -33,6 +35,7 @@
     "react-redux": "^7.2.2",
     "react-tiny-popover": "^6.0.5",
     "redux-logger": "^3.0.6",
+    "sass": "^1.45.2",
     "stimulus": "^1.1.1",
     "svg-loaders-react": "^2.2.1",
     "turbolinks": "^5.2.0",
@@ -43,6 +46,7 @@
     "webpack-dev-server": "^3.10.3"
   },
   "scripts": {
-    "build": "node esbuild.config.js"
+    "build": "node esbuild.config.js",
+    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   }
 }

yarn.lock

@@ -202,6 +202,16 @@
   resolved "https://registry.yarnpkg.com/@client-side-validations/simple-form/-/simple-form-0.1.3.tgz#83ca3c4e67267a091cc53b24281c2329f8d5d1ba"
   integrity sha512-xcgddMtHwhIRUcpmZYRXIpXrxEPwrjaP4ZEX9k22RLt495+9gPuaIWWyCewyhEubUhNcy0TWvW80gGJt0Ah7eQ==
 
+"@fortawesome/fontawesome-free@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
+  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
+
+"@popperjs/core@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
+  integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
+
 "@preact/compat@^17.0.3", "react-dom@npm:@preact/[email protected]", "react@npm:@preact/[email protected]":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@preact/compat/-/compat-17.0.3.tgz#5e41def12b4b6d00d6f86e6b24ef46b029a99626"
@@ -602,10 +612,10 @@ bootstrap@>=4.0:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
   integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
 
-bootstrap@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
-  integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
+bootstrap@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
+  integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -2933,6 +2943,15 @@ sass@^1.45.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.45.2:
+  version "1.45.2"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.2.tgz#130b428c1692201cfa181139835d6fc378a33323"
+  integrity sha512-cKfs+F9AMPAFlbbTXNsbGvg3y58nV0mXA3E94jqaySKcC8Kq3/8983zVKQ0TLMUrHw7hF9Tnd3Bz9z5Xgtrl9g==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"