Added cssbundling-rails for SASS compilation

DMPRoadmap · Jan 13, 2023 · 56e54e8 · 56e54e8
1 parent b82338d
commit 56e54e8
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -112,8 +112,8 @@ yarn-debug.log*
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+/app/assets/builds/*
+!/app/assets/builds/.keep
 
 # Ignore briley AWS cloud9 script to start the application
 cloud9-start.sh
-/app/assets/builds/*
-!/app/assets/builds/.keep
diff --git a/Gemfile b/Gemfile
@@ -23,15 +23,14 @@ gem 'mimemagic'
 # Use Puma as the app server
 gem 'puma', group: :puma, require: false
 
-# Use SCSS for stylesheets
-# TODO : might need to move to cssbundling-rails
-# SEE: https://dev.to/kolide/how-to-migrate-a-rails-6-app-from-sass-rails-to-cssbundling-rails-4l41
-gem 'sass-rails'
-
 # Use esbuild, rollup.js, or Webpack to bundle your JavaScript, then deliver it via the asset pipeline in Rails
 # Read more: https://github.com/rails/jsbundling-rails
 gem 'jsbundling-rails'
 
+# Use Tailwind CSS, Bootstrap, Bulma, PostCSS, or Dart Sass to bundle and process your CSS
+# Read more: https://github.com/rails/cssbundling-rails
+gem 'cssbundling-rails'
+
 # Turbo gives you the speed of a single-page web application without having to write any JavaScript..
 # Read more: https://github.com/hotwired/turbo-rails
 #            https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -121,6 +121,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.1.2)
+      railties (>= 6.0.0)
     danger (9.1.0)
       claide (~> 1.0)
       claide-plugins (>= 0.9.2)
@@ -441,8 +443,6 @@ GEM
     ruby2_keywords (0.0.5)
     ruby_dig (0.0.2)
     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)
@@ -553,6 +553,7 @@ DEPENDENCIES
   capybara
   capybara-webmock
   contact_us
+  cssbundling-rails
   danger (~> 9.0)
   database_cleaner
   devise
@@ -596,7 +597,6 @@ DEPENDENCIES
   rspec-rails
   rubocop
   rubocop-i18n
-  sass-rails
   sassc-rails
   selenium-webdriver
   shoulda

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,2 +1,3 @@
 web: unset PORT && bin/rails server
 js: yarn build --watch
+css: yarn build:css --watch
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,5 +1,4 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
 
 // We use Webpacker to manage our JS, so removed the '=' sign here to tell
 // Sprockets to ignore JS

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -66,6 +66,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
   <body>
       <div class="skip">

diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
-const erbLoader = require('./loaders/erb')
+const erbLoader = require('./loaders/erb');
 
 const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
 

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "lint": "yarn run eslint --ext .js app/javascript/**/*.js",
     "test": "karma start spec/karma/unit.js",
-    "build": "webpack --config ./config/webpack/webpack.config.js"
+    "build": "webpack --config ./config/webpack/webpack.config.js",
+    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   },
   "babel": {
     "presets": [
@@ -56,6 +57,7 @@
     "popper.js": "^1.16.1",
     "rails-erb-loader": "^5.5.2",
     "regenerator-runtime": "^0.13.5",
+    "sass": "^1.57.1",
     "timeago.js": "^4.0.2",
     "tinymce": "^5.10.0",
     "webpack": "^5.75.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1646,7 +1646,7 @@ chart.js@^3.8.0:
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
   integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
 
-chokidar@^3.5.1:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2516,6 +2516,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c"
   integrity sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==
 
+immutable@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.2.tgz#2da9ff4384a4330c36d4d1bc88e90f9e0b0ccd16"
+  integrity sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3524,6 +3529,15 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.57.1:
+  version "1.57.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.57.1.tgz#dfafd46eb3ab94817145e8825208ecf7281119b5"
+  integrity sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==
+  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"
@@ -3622,6 +3636,11 @@ socket.io@^4.4.1:
     socket.io-adapter "~2.4.0"
     socket.io-parser "~4.2.1"
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"