saeloun · palhimalaya · Dec 7, 2024 · Dec 10, 2024
diff --git a/.gitignore b/.gitignore
@@ -61,3 +61,6 @@ yarn-debug.log*
 /config/credentials/test.key
 
 /config/credentials/production.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/Gemfile b/Gemfile
@@ -26,6 +26,9 @@ gem "puma", "~> 6.4.3"
 # Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
 # gem "tailwindcss-rails", ">= 0.5.3"
 
+# Use CSSBundling to bundle CSS
+gem "cssbundling-rails", "~> 1.4"
+
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jbuilder", "~> 2.11"
 
@@ -48,7 +51,6 @@ gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby]
 gem "bootsnap", ">= 1.4.4", require: false
 
 # Use Sass to process CSS
-# gem "sassc-rails", "~> 2.1"
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 gem "image_processing", ">= 1.2"
@@ -60,7 +62,6 @@ gem "shakapacker", "6.0.0"
 gem "react-rails", "2.6.2"
 
 # Use SCSS for stylesheets
-gem "sass-rails"
 
 # #--- gems for server & infra configuration ---##
 gem "dotenv-rails"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -174,6 +174,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.4.1)
+      railties (>= 6.0.0)
     data_migrate (9.3.0)
       activerecord (>= 6.1)
       railties (>= 6.1)
@@ -557,8 +559,6 @@ GEM
       bundler-audit (~> 0.9.0)
     rubyzip (2.3.2)
     safely_block (0.4.0)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -667,6 +667,7 @@ PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
   arm64-darwin-23
+  arm64-darwin-24
   x86_64-darwin-21
   x86_64-darwin-22
   x86_64-linux
@@ -683,6 +684,7 @@ DEPENDENCIES
   bundler-audit
   capybara (>= 3.26)
   countries
+  cssbundling-rails (~> 1.4)
   data_migrate
   database_cleaner (~> 2.0)
   debug (>= 1.0.0)
@@ -732,7 +734,6 @@ DEPENDENCIES
   rubocop-rspec
   ruby_audit
   rubyzip
-  sass-rails
   searchkick
   selenium-webdriver (>= 4.0.0)
   sentry-rails

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,3 +1,4 @@
 web: bin/rails s -b 0.0.0.0 -p 3000
 webpacker: bin/webpacker-dev-server
 solidqueue: bundle exec rake solid_queue:start
+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,5 +1,5 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
 //= link_tree ../js .js
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -0,0 +1 @@
+// Entry point for your Sass build
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -1,15 +1,17 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@use "tailwindcss/utilities";
+@use "team";
+@use "time-tracking";
+@use "react-calendar";
+@use "toast";
+@use "pto";
+@use "authentication";
+@use "rc-steps";
+@use "navbar";
 @import "react-toastify/dist/ReactToastify.min.css";
 @import "react-responsive-carousel/lib/styles/carousel.min.css";
-@import "team";
-@import "time-tracking";
-@import "react-calendar";
-@import "toast";
-@import "pto";
-@import "authentication";
-@import "rc-steps";
+
 
 @layer base {
   @font-face {
@@ -29,7 +31,6 @@
 }
 
 @layer components {
-  @import "navbar";
   .sidebar {
     &__container {
       box-shadow: -2px 6px 11px grey;

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -7,6 +7,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_pack_tag "application" %>
     <%= javascript_pack_tag "application" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
   <body>
     <main class="min-h-screen bg-miru-white-400">

diff --git a/bin/dev b/bin/dev
@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -12,3 +12,8 @@
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
+
+# Setting `Rails.application.config.assets.css_compressor = nil` is disabling the CSS compression for
+# assets in a Ruby on Rails application. By setting it to `nil`, the CSS files will not be compressed
+# when they are served to the client. We are using cssbundling-rails gem to compress the CSS files.
+Rails.application.config.assets.css_compressor = nil
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "ramda": "^0.28.0",
     "rc-steps": "^6.0.0",
     "react": "^18.2.0",
+    "react_ujs": "^2.6.1",
     "react-calendar": "2.18.1",
     "react-circular-progressbar": "^2.1.0",
     "react-datepicker": "^4.11.0",
@@ -73,8 +74,7 @@
     "react-toastify": "^8.1.0",
     "react-tooltip": "^5.7.5",
     "react-transition-group": "4.4.5",
-    "react_ujs": "^2.6.1",
-    "sass": "^1.58.3",
+    "sass": "^1.82.0",
     "sass-loader": "^13.2.0",
     "shakapacker": "^6.0.0",
     "style-loader": "^3.3.1",
@@ -132,7 +132,8 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "lint": "eslint ./app/javascript"
+    "lint": "eslint ./app/javascript",
+    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   },
   "babel": {
     "presets": [

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,9 @@
 module.exports = {
-  purge: [],
+  purge: [
+    "./app/**/*.html.erb",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+  ],
   darkMode: false, // or 'media' or 'class'
   theme: {
     container: {