Skip to content

Remove sass-rails gem and use cssbundling and dartsass instead #807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 16, 2024
+160 −47
Merged

Remove sass-rails gem and use cssbundling and dartsass instead #807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
937584e
Remove sass-rails gem and use cssbundling and dartsass instead
andresg4 Aug 14, 2024
25a3a1d
Keep jquery-ui latest version
andresg4 Aug 14, 2024
97cae0e
Fixes
andresg4 Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ gem 'activeadmin', '~> 3.2'
gem 'active_storage_base64', '~> 3.0.0'
gem 'aws-sdk-s3', '~> 1.157', require: false
gem 'bootsnap', '~> 1.18'
gem 'cssbundling-rails', '~> 1.4', '>= 1.4.1'
gem 'delayed_job_active_record', '~> 4.1'
gem 'devise', '~> 4.9'
gem 'devise_token_auth', '~> 1.2', '>= 1.2.3'
Expand All @@ -30,9 +31,8 @@ gem 'pundit', '~> 2.3'
gem 'rack-cors', '~> 2.0'
gem 'rswag-api', '~> 2.13.0'
gem 'rswag-ui', '~> 2.13.0'
gem 'sass-rails', '~> 6.0.0'
gem 'sendgrid', '~> 1.2.4'
gem 'sprockets', '~> 4.2.1'
gem 'sprockets-rails', '~> 3.5', '>= 3.5.2'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this changing from sprockets to sprokets-rails?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we keep the sprockets gem and remove the sass-rails, we get this error 'require': cannot load such file -- sprockets/railtie. Replacing it with the sprockets-rails one solves it. I'm not really sure why this happens

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to understand why and what is the impact of this change. I assume we're good, but let's validate it doesn't have any negative impact

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just in case, sprockets-rails was already being installed as a dependency on sass-rails. https://github.com/rootstrap/rails_api_base/pull/807/files#diff-89cade48462044ee1b672dc5f4c3ec250fbd29effcd8932096a23c1283c6731fL571-L573

Basically our previous setup wasn't so good, that's the whole issue here. sprockets-rails is required for our app that we are using the traditional asset pipeline.

gem 'strong_migrations', '~> 2.0'
gem 'yaaf', '~> 3.0'
# Use Redis adapter to run Action Cable in production
Expand Down
26 changes: 8 additions & 18 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,8 @@ GEM
bigdecimal
rexml
crass (1.0.6)
cssbundling-rails (1.4.1)
railties (>= 6.0.0)
csv (3.3.0)
date (3.3.4)
debug_inspector (1.2.0)
Expand Down Expand Up @@ -352,8 +354,6 @@ GEM
racc (~> 1.4)
nokogiri (1.16.7-arm64-darwin)
racc (~> 1.4)
nokogiri (1.16.7-x86_64-linux)
racc (~> 1.4)
octokit (9.1.0)
faraday (>= 1, < 3)
sawyer (~> 0.9)
Expand Down Expand Up @@ -535,16 +535,6 @@ GEM
sanitize (6.1.0)
crass (~> 1.0.2)
nokogiri (>= 1.12.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)
railties (>= 4.0.0)
sassc (>= 2.0)
sprockets (> 3.0)
sprockets-rails
tilt
sawyer (0.9.2)
addressable (>= 2.3.5)
faraday (>= 0.17.3, < 3)
Expand All @@ -568,9 +558,9 @@ GEM
sprockets (4.2.1)
concurrent-ruby (~> 1.0)
rack (>= 2.2.4, < 4)
sprockets-rails (3.4.2)
actionpack (>= 5.2)
activesupport (>= 5.2)
sprockets-rails (3.5.2)
actionpack (>= 6.1)
activesupport (>= 6.1)
sprockets (>= 3.0.0)
stringio (3.1.1)
strong_migrations (2.0.0)
Expand All @@ -579,7 +569,6 @@ GEM
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
thor (1.3.1)
tilt (2.3.0)
timeout (0.4.1)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
Expand All @@ -605,6 +594,7 @@ GEM

PLATFORMS
arm64-darwin-22
arm64-darwin-23
ruby
x86_64-linux

Expand All @@ -618,6 +608,7 @@ DEPENDENCIES
bootsnap (~> 1.18)
brakeman (~> 6.1)
capybara (~> 3.40)
cssbundling-rails (~> 1.4, >= 1.4.1)
delayed_job_active_record (~> 4.1)
devise (~> 4.9)
devise_token_auth (~> 1.2, >= 1.2.3)
Expand Down Expand Up @@ -665,12 +656,11 @@ DEPENDENCIES
rubocop-rake (~> 0.6.0)
rubocop-rspec (~> 3.0)
rubocop-rspec_rails (~> 2.30.0)
sass-rails (~> 6.0.0)
selenium-webdriver (~> 4.23.0)
sendgrid (~> 1.2.4)
shoulda-matchers (~> 6.3)
simplecov (~> 0.22.0)
sprockets (~> 4.2.1)
sprockets-rails (~> 3.5, >= 3.5.2)
strong_migrations (~> 2.0)
tzinfo-data
webmock (~> 3.23)
Expand Down
3 changes: 2 additions & 1 deletion Procfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
web: ./bin/rails server -p 3000 -b 0.0.0.0
js: yarn build --watch
js: yarn build:js --watch
css: yarn build:css --watch
1 change: 0 additions & 1 deletion app/assets/config/manifest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds
13 changes: 0 additions & 13 deletions app/assets/stylesheets/application.css
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application" %>
</head>

<body>
Expand Down
7 changes: 5 additions & 2 deletions bin/dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
if gem list --no-installed --exact --silent foreman; then
echo "Installing foreman..."
gem install foreman
fi

exec foreman start -f Procfile.dev "$@"
# Default to port 3000 if not specified
export PORT="${PORT:-3000}"

exec foreman start -f Procfile.dev --env /dev/null "$@"
6 changes: 5 additions & 1 deletion bin/fullstack.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# Add gems
insert_into_file 'Gemfile', after: "# Gems\n" do <<-EOF
gem 'cssbundling-rails', '~> 1.3'
gem 'stimulus-rails', '~> 1.3'
gem 'turbo-rails', '2.0.0.pre.beta.2'
gem 'view_component', '~> 3.7'
Expand All @@ -22,6 +21,11 @@
# Run CSS generator
rails_command 'css:install:tailwind'

# Add Sass build for Active Admin styles
insert_into_file 'package.json', after: "application.css --minify" do
' && sass ./app/assets/stylesheets/active_admin.scss:./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules'
end

# Update application layout
gsub_file 'app/views/layouts/application.html.erb', " <%= stylesheet_link_tag \"application\" %>\n", ''
insert_into_file 'app/views/layouts/application.html.erb', before: /^ <\/head>$/ do <<-EOF
Expand Down
13 changes: 8 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "rails_api_base",
"private": "true",
"engines" : {
"node" : "20.10.0",
"yarn" : "1.22"
"engines": {
"node": "20.10.0",
"yarn": "1.22"
},
"dependencies": {
"@activeadmin/activeadmin": "3.2.3",
Expand All @@ -12,9 +12,12 @@
"esbuild": "0.23.0",
"jquery": "3.7.1",
"jquery-ui": "1.14.0",
"jquery-ujs": "1.2.3"
"jquery-ujs": "1.2.3",
"sass": "^1.77.8"
},
"scripts": {
"build": "node esbuild.config.mjs"
"build": "yarn build:js && yarn build:css",
"build:js": "node esbuild.config.mjs",
"build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the build script run this as well? Maybe we can call this prebuild so it runs automatically?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this was added by the cssbundling gem. I mean, the default behavior.

Copy link
Contributor

@JulianPasquale JulianPasquale Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm just saying that would be nice to have something like

"scripts": {
  "build": "yarn build:js && yarn build:css",
  "build:js": "node esbuild.config.mjs",
  "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules"
}

That way build runs both process. Or another option would be to rename the build:css script to prebuild so it's always executed when we call build. (I like the first option because it's more flexible tbh).

Anyway, if you want to keep it this way, we might need to add the build:css step to our Dockerfile.dev

}
}
132 changes: 130 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,11 +136,46 @@
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz#0e984f0f2344ee513c185d87d77defac4c0c8224"
integrity sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==

anymatch@~3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
dependencies:
normalize-path "^3.0.0"
picomatch "^2.0.4"

arctic_admin@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/arctic_admin/-/arctic_admin-4.3.1.tgz#276fb2fcfb4eca219e350e427e36d330a597833e"
integrity sha512-2z5HHVobZZCWgJiWelG/RG4pnbo+iXTAOCEcAC6TBSI4LI7u8h1ugBkYgg9IF15jFh7Z8j2c1Qw7gxrCH0wgkQ==

binary-extensions@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==

braces@~3.0.2:
version "3.0.3"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
dependencies:
fill-range "^7.1.1"

"chokidar@>=3.0.0 <4.0.0":
version "3.6.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"

esbuild@0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.0.tgz#de06002d48424d9fdb7eb52dbe8e95927f852599"
Expand Down Expand Up @@ -171,19 +206,112 @@ esbuild@0.23.0:
"@esbuild/win32-ia32" "0.23.0"
"@esbuild/win32-x64" "0.23.0"

jquery-ui@1.14.0, jquery-ui@^1.13.3:
fill-range@^7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
dependencies:
to-regex-range "^5.0.1"

fsevents@~2.3.2:
version "2.3.3"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==

glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
dependencies:
is-glob "^4.0.1"

immutable@^4.0.0:
version "4.3.7"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==

is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
dependencies:
binary-extensions "^2.0.0"

is-extglob@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==

is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
dependencies:
is-extglob "^2.1.1"

is-number@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

jquery-ui@1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.14.0.tgz#b75d417826f0bab38125f907356d2e3313a9c6d5"
integrity sha512-mPfYKBoRCf0MzaT2cyW5i3IuZ7PfTITaasO5OFLAQxrHuI+ZxruPa+4/K1OMNT8oElLWGtIxc9aRbyw20BKr8g==
dependencies:
jquery ">=1.12.0 <5.0.0"

jquery-ui@^1.13.3:
version "1.13.3"
resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.13.3.tgz#d9f5292b2857fa1f2fdbbe8f2e66081664eb9bc5"
integrity sha512-D2YJfswSJRh/B8M/zCowDpNFfwsDmtfnMPwjJTyvl+CBqzpYwQ+gFYIbUUlzijy/Qvoy30H1YhoSui4MNYpRwA==
dependencies:
jquery ">=1.8.0 <4.0.0"

jquery-ujs@1.2.3, jquery-ujs@^1.2.2:
version "1.2.3"
resolved "https://registry.yarnpkg.com/jquery-ujs/-/jquery-ujs-1.2.3.tgz#dcac6026ab7268e5ee41faf9d31c997cd4ddd603"
integrity sha512-59wvfx5vcCTHMeQT1/OwFiAj+UffLIwjRIoXdpO7Z7BCFGepzq9T9oLVeoItjTqjoXfUrHJvV7QU6pUR+UzOoA==

jquery@3.7.1, "jquery@>=1.12.0 <5.0.0", jquery@^3.4.1:
jquery@3.7.1, "jquery@>=1.12.0 <5.0.0", "jquery@>=1.8.0 <4.0.0", jquery@^3.4.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==

normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==

picomatch@^2.0.4, picomatch@^2.2.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

readdirp@~3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
dependencies:
picomatch "^2.2.1"

sass@^1.77.8:
version "1.77.8"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"

"source-map-js@>=0.6.2 <2.0.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==

to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
dependencies:
is-number "^7.0.0"