Chore: Move css processing to cssbundling-rails

Because: Cssbundling-rails is the default way to handle css through the asset pipeline in Rails. This commit: - Add cssbundling-rails gem - update gitignore to ignore asdf local ruby version file - stop sprockets minifying css with sass - remove unused application_stylesheet scss file - delete webpacker application css file - move stylesheets from javascript to assets directory - Update active_admin scss file to import from npm packages - run cssbundling install command - use cssnano to compress postcss content - update stylesheet link tag to import application file Update package.json
TheOdinProject · Sep 11, 2023 · f8c0d4f · f8c0d4f
1 parent 4393e5c
commit f8c0d4f
Show file tree

Hide file tree

Showing 23 changed files with 536 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -56,3 +56,9 @@ yarn-debug.log*
 # Vim Swap File
 .swp
 .vscode/settings.json
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+# Ruby tool versions
+.tool-versions
diff --git a/Gemfile b/Gemfile
@@ -10,6 +10,7 @@ gem 'active_material', '~> 1.5'
 gem 'barnes', '~> 0.0'
 gem 'bootsnap', '~> 1.16', require: false
 gem 'classy-yaml', '~> 0.8'
+gem 'cssbundling-rails', '~> 1.2'
 gem 'debug', '~> 1.7'
 gem 'devise', '~> 4.9'
 gem 'discard', '~> 1.2'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -128,6 +128,8 @@ GEM
     crass (1.0.6)
     css_parser (1.14.0)
       addressable
+    cssbundling-rails (1.2.0)
+      railties (>= 6.0.0)
     cuprite (0.14.3)
       capybara (~> 3.0)
       ferrum (~> 0.13.0)
@@ -584,6 +586,7 @@ DEPENDENCIES
   capybara (~> 3.39)
   classy-yaml (~> 0.8)
   climate_control (~> 1.2)
+  cssbundling-rails (~> 1.2)
   cuprite (~> 0.14)
   debug (~> 1.7)
   devise (~> 4.9)

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,3 +1,4 @@
 web: bundle exec puma -C config/puma_development.rb -p 3000
 worker: bundle exec sidekiq
 webpack: bin/webpacker-dev-server
+css: yarn build:css --watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,3 +1,3 @@
 //= link_tree ../images
 //= link active_admin.js
-//= link application_stylesheet.css
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/active_admin.scss b/app/assets/stylesheets/active_admin.scss
@@ -1,11 +1,10 @@
 $am-theme-primary: #cc9543;
 $am-theme-accent: #4a4a4a;
 
-@import 'activeadmin_addons/all';
-@import 'activeadmin_addons/material';
+@import 'activeadmin_addons/src/stylesheets/all';
 
-@import "active_admin/mixins";
-@import "active_material";
+@import "@activeadmin/activeadmin/src/scss/mixins";
+@import "active_material/src/stylesheets/active_material";
 
 input[type="submit"] {
   &:disabled {

diff --git a/app/javascript/application.css → ...ssets/stylesheets/application.postcss.css b/app/javascript/application.css → ...ssets/stylesheets/application.postcss.css
@@ -1,4 +1,4 @@
-/* turning off base styles for now as they override heading sizes */
+/* Entry point for your PostCSS build */
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -11,4 +11,4 @@
 @import './stylesheets/prism-theme.css';
 @import './stylesheets/pagy.css';
 @import './stylesheets/animations.css';
-@import './stylesheets/static-pages.css';
+@import './stylesheets/static-pages.css';
diff --git a/app/assets/stylesheets/application_stylesheet.scss b/app/assets/stylesheets/application_stylesheet.scss
diff --git a/app/javascript/stylesheets/animations.css → ...ts/stylesheets/stylesheets/animations.css b/app/javascript/stylesheets/animations.css → ...ts/stylesheets/stylesheets/animations.css
diff --git a/app/javascript/stylesheets/buttons.css → ...ssets/stylesheets/stylesheets/buttons.css b/app/javascript/stylesheets/buttons.css → ...ssets/stylesheets/stylesheets/buttons.css
diff --git a/app/javascript/stylesheets/layout.css → ...assets/stylesheets/stylesheets/layout.css b/app/javascript/stylesheets/layout.css → ...assets/stylesheets/stylesheets/layout.css
diff --git a/...javascript/stylesheets/lesson-content.css → ...tylesheets/stylesheets/lesson-content.css b/...javascript/stylesheets/lesson-content.css → ...tylesheets/stylesheets/lesson-content.css
diff --git a/app/javascript/stylesheets/pagy.css → app/assets/stylesheets/stylesheets/pagy.css b/app/javascript/stylesheets/pagy.css → app/assets/stylesheets/stylesheets/pagy.css
diff --git a/app/javascript/stylesheets/prism-theme.css → ...s/stylesheets/stylesheets/prism-theme.css b/app/javascript/stylesheets/prism-theme.css → ...s/stylesheets/stylesheets/prism-theme.css
diff --git a/app/javascript/stylesheets/static-pages.css → .../stylesheets/stylesheets/static-pages.css b/app/javascript/stylesheets/static-pages.css → .../stylesheets/stylesheets/static-pages.css
diff --git a/app/javascript/stylesheets/typography.css → ...ts/stylesheets/stylesheets/typography.css b/app/javascript/stylesheets/typography.css → ...ts/stylesheets/stylesheets/typography.css
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -24,8 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <%= stylesheet_link_tag 'application_stylesheet', media: 'all', 'data-turbo-track': 'reload' %>
-    <%= stylesheet_pack_tag 'application', 'data-turbo-track': 'reload' %>
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
 
     <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
     <%= render 'shared/analytics' %>

diff --git a/app/views/layouts/errors.html.erb b/app/views/layouts/errors.html.erb
@@ -5,8 +5,7 @@
       <%= content_for(:title) || 'Your Career in Web Development Starts Here | The Odin Project' %>
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag 'application_stylesheet', media: 'all' %>
-    <%= stylesheet_pack_tag 'application' %>
+    <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
   </head>
   <body class="text-center h-screen m-0">

diff --git a/config/application.rb b/config/application.rb
@@ -17,5 +17,6 @@ class Application < Rails::Application
     # the framework and any gems in your application.
     config.exceptions_app = routes
     config.middleware.insert_after ActionDispatch::Static, Rack::Deflater
+    config.assets.css_compressor = nil
   end
 end
diff --git a/package.json b/package.json
@@ -3,9 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "eslint": "eslint --max-warnings 0 './app/javascript/**/*.js' './app/components/**/*.js'"
+    "eslint": "eslint --max-warnings 0 './app/javascript/**/*.js' './app/components/**/*.js'",
+    "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
+    "build:css:application": "postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css",
+    "build:css:active_admin": "sass ./app/assets/stylesheets/active_admin.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules --style=compressed"
   },
   "dependencies": {
+    "@activeadmin/activeadmin": "^3.0.0",
     "@babel/core": "7",
     "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
@@ -22,7 +26,9 @@
     "@stimulus/polyfills": "^2.0.0",
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10",
+    "active_material": "^2.0.2",
+    "activeadmin_addons": "^2.0.0-beta.2",
+    "autoprefixer": "^10.4.15",
     "axios": "^1.3.5",
     "babel-loader": "9",
     "babel-plugin-prismjs": "^2.1.0",
@@ -32,14 +38,17 @@
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "debounce": "^1.2.1",
+    "cssnano": "^6.0.1",
     "el-transition": "^0.0.7",
     "hint.css": "^2.7.0",
     "js-base64": "^3.7.5",
     "lodash": "^4.17.21",
     "mermaid": "^9.4.3",
     "mini-css-extract-plugin": "^2.7.6",
+    "npm-run-all": "^4.1.5",
     "pnp-webpack-plugin": "1",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.28",
+    "postcss-cli": "^10.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",

diff --git a/postcss.config.js b/postcss.config.js
@@ -9,6 +9,9 @@ module.exports = {
         flexbox: 'no-2009'
       },
       stage: 3
+    }),
+    require('cssnano')({
+      preset: 'default'
     })
   ]
 }