From 7025d49de347fe609e34f47a39faa9fd1edd0d42 Mon Sep 17 00:00:00 2001 From: Edward Loveall Date: Thu, 1 Sep 2022 09:58:47 -0400 Subject: [PATCH] Asset fixes Using esbuild to compile SCSS files works for the SCSS part, but not for assets that are referenced inside the SCSS files. Images are processed by the asset pipeline. The pipeline turns images like `foo.png` into `foo-138b348edbc780482d40f0abc5b57e487c0ecf24cfbde42d54007cfd8db0d7a4.pn g`. SCSS files still refer to them as `url("foo.png")`, but the final path to the image must include the hash in production. To make sure the final CSS file can find these images, sprockets-rails [scans] all CSS files using `AssetUrlProcessor`, which replaces `url("foo.png")` with the hashed version. Another complication was in a previous version of my asset pipeline esbuild located assets relative to the CSS file the refernced them. Sprockets doesn't look there. It [searches] any directory in `app/assets`. All the asset urls in SCSS files needed to be changed to be relative to those search paths instead, e.g. `../../images/foo.png` to `foo.png`. I have three base css files: application, blog, and admin. To support them all I changed the `sass` command to look in `./app/assets/stylesheets` and build to `./app/assets/builds` instead of looking at each individual file ([sass reference]). It built the `admin.css` file inside of an `admin/` directory, so the `stylesheet_link_tag` had to change to reflect that. Building asseets in development now either requires running the css, js, _and_ rails server. You can use `bin/dev` to start all three, or start them manually: ``` yarn build --watch yarn build:css --watch rails s ``` ## Other cleanup I wasn't able to get normalize.css imported from the node modules, but I also removed it and it didn't seem to break anything. So I'm going to keep it removed, as well as remove the `normalize-rails` gem. Finally, I was able to remove the `esbuild-sass-plugin` node module since I'm not using esbuild to bundle sass anymore. [scans]: https://github.com/rails/cssbundling-rails/issues/22 [searches]: https://guides.rubyonrails.org/asset_pipeline.html#search-paths [sass reference]: https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode --- Gemfile | 2 +- Gemfile.lock | 7 ++-- Procfile.dev | 1 + app/assets/builds/.keep | 0 app/assets/entry_points/blog.js | 3 -- app/assets/stylesheets/_hotline_webring.scss | 4 +- app/assets/stylesheets/_ie.scss | 2 +- app/assets/stylesheets/_songs.scss | 5 +-- app/assets/stylesheets/admin/admin.scss | 1 - .../entry_points => javascript}/admin.js | 4 +- app/javascript/application.js | 3 ++ app/javascript/blog.js | 1 + app/views/layouts/admin.html.erb | 2 +- app/views/layouts/application.html.erb | 1 + bin/assets | 41 ------------------- bin/dev | 2 +- config/environments/production.rb | 1 + package.json | 6 +-- yarn.lock | 23 +++-------- 19 files changed, 28 insertions(+), 81 deletions(-) create mode 100644 app/assets/builds/.keep delete mode 100644 app/assets/entry_points/blog.js rename app/{assets/entry_points => javascript}/admin.js (53%) create mode 100644 app/javascript/application.js create mode 100644 app/javascript/blog.js delete mode 100755 bin/assets diff --git a/Gemfile b/Gemfile index 2668f275..965ccef1 100644 --- a/Gemfile +++ b/Gemfile @@ -4,6 +4,7 @@ ruby "3.0.4" gem "autoprefixer-rails" gem "bullet" +gem "cssbundling-rails" gem "dotenv-rails" gem "flutie" gem "high_voltage" @@ -11,7 +12,6 @@ gem "image_processing" gem "jbuilder" gem "jsbundling-rails" gem "kaminari" -gem "normalize-rails" gem "oath" gem "pg" gem "puma" diff --git a/Gemfile.lock b/Gemfile.lock index 271ff1f9..df6fab74 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -107,6 +107,8 @@ GEM crack (0.4.5) rexml crass (1.0.6) + cssbundling-rails (1.1.1) + railties (>= 6.0.0) database_cleaner (2.0.1) database_cleaner-active_record (~> 2.0.0) database_cleaner-active_record (2.0.1) @@ -205,7 +207,6 @@ GEM racc (~> 1.4) nokogiri (1.13.7-x86_64-linux) racc (~> 1.4) - normalize-rails (8.0.1) oath (1.1.0) bcrypt rails @@ -315,7 +316,7 @@ GEM simplecov-html (0.12.3) simplecov_json_formatter (0.1.3) smart_properties (1.17.0) - sprockets (4.0.2) + sprockets (4.1.1) concurrent-ruby (~> 1.0) rack (> 1, < 3) sprockets-rails (3.4.2) @@ -366,6 +367,7 @@ DEPENDENCIES bullet bundler-audit capybara-selenium + cssbundling-rails database_cleaner dotenv-rails factory_bot_rails @@ -378,7 +380,6 @@ DEPENDENCIES jsbundling-rails kaminari launchy - normalize-rails oath pg pry-byebug diff --git a/Procfile.dev b/Procfile.dev index 03c54b1d..2b0b260f 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,2 +1,3 @@ web: bin/rails server -p 3000 js: yarn build --watch +css: yarn build:css --watch diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep new file mode 100644 index 00000000..e69de29b diff --git a/app/assets/entry_points/blog.js b/app/assets/entry_points/blog.js deleted file mode 100644 index e2104f51..00000000 --- a/app/assets/entry_points/blog.js +++ /dev/null @@ -1,3 +0,0 @@ -import "../javascripts/detector"; - -import "../stylesheets/blog.scss"; diff --git a/app/assets/stylesheets/_hotline_webring.scss b/app/assets/stylesheets/_hotline_webring.scss index b836924d..0b8b49ac 100644 --- a/app/assets/stylesheets/_hotline_webring.scss +++ b/app/assets/stylesheets/_hotline_webring.scss @@ -27,12 +27,12 @@ section.hotline-webring { } a.previous { - background-image: url("../images/hlwr-prev.svg"); + background-image: url("hlwr-prev.svg"); background-position: center left; } a.next { - background-image: url("../images/hlwr-next.svg"); + background-image: url("hlwr-next.svg"); background-position: center right; } } diff --git a/app/assets/stylesheets/_ie.scss b/app/assets/stylesheets/_ie.scss index 941413d0..0e5a33aa 100644 --- a/app/assets/stylesheets/_ie.scss +++ b/app/assets/stylesheets/_ie.scss @@ -1,6 +1,6 @@ body.ie { header { - background: url("../images/logo.gif") no-repeat center; + background: url("logo.gif") no-repeat center; } header h1 { diff --git a/app/assets/stylesheets/_songs.scss b/app/assets/stylesheets/_songs.scss index 93ed217b..ac7994db 100644 --- a/app/assets/stylesheets/_songs.scss +++ b/app/assets/stylesheets/_songs.scss @@ -40,8 +40,7 @@ div.player { } a.button { - background: var(--button-color) url("../images/play.svg") no-repeat center - center; + background: var(--button-color) url("play.svg") no-repeat center center; border: 2px solid var(--song-progress-color); border-radius: 50%; box-sizing: border-box; @@ -54,7 +53,7 @@ div.player { } a.button.playing { - background-image: url("../images/pause.svg"); + background-image: url("pause.svg"); } span.remaining { diff --git a/app/assets/stylesheets/admin/admin.scss b/app/assets/stylesheets/admin/admin.scss index 628e969d..acec6223 100644 --- a/app/assets/stylesheets/admin/admin.scss +++ b/app/assets/stylesheets/admin/admin.scss @@ -3,7 +3,6 @@ @use "sass:math"; @import "../reset"; -@import "normalize.css"; @import "variables"; @import "base"; diff --git a/app/assets/entry_points/admin.js b/app/javascript/admin.js similarity index 53% rename from app/assets/entry_points/admin.js rename to app/javascript/admin.js index ab820c4f..726bcbf3 100644 --- a/app/assets/entry_points/admin.js +++ b/app/javascript/admin.js @@ -3,6 +3,4 @@ import Rails from "@rails/ujs"; Rails.start(); require("@rails/activestorage").start(); -import "../javascripts/draggable"; - -import "../stylesheets/admin/admin.scss"; +import "../assets/javascripts/draggable"; diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 00000000..03c453ca --- /dev/null +++ b/app/javascript/application.js @@ -0,0 +1,3 @@ +import "../assets/javascripts/detector"; +import "../assets/javascripts/scrollDown"; +import "../assets/javascripts/song"; diff --git a/app/javascript/blog.js b/app/javascript/blog.js new file mode 100644 index 00000000..8ed55c17 --- /dev/null +++ b/app/javascript/blog.js @@ -0,0 +1 @@ +import "../assets/javascripts/detector"; diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index aa1051b7..dd9c6693 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -9,7 +9,7 @@ <%= title %> <%= favicon_link_tag('favicon.png') %> - <%= stylesheet_link_tag :admin, "data-turbo-track": "reload", defer: true %> + <%= stylesheet_link_tag "admin/admin", "data-turbo-track": "reload", defer: true %> <%= javascript_include_tag :admin, "data-turbo-track": "reload", defer: true %> <%= csrf_meta_tags %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 59fe48b8..048b2ba3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -17,6 +17,7 @@ <%= stylesheet_link_tag :application, "data-turbo-track": "reload", defer: true %> <%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %> <%= csrf_meta_tags %> + <%= stylesheet_link_tag "application" %> <%= render 'header' %> diff --git a/bin/assets b/bin/assets deleted file mode 100755 index 4165ca2b..00000000 --- a/bin/assets +++ /dev/null @@ -1,41 +0,0 @@ -#!/usr/bin/env node - -const sassPlugin = require("esbuild-sass-plugin").sassPlugin; - -let watch = process.argv.includes("--watch"); -let minify = process.argv.includes("--minify"); -let sourcemap = true; -const prod = process.argv.includes("prod"); - -if (watch) { - watch = { - onRebuild(error, result) { - if (error) console.error("Build failed:", error); - else console.log("Built"); - }, - }; -} - -if (prod) { - watch = false; - minify = false; - sourcemap = false; -} - -console.log("Building..."); -require("esbuild") - .build({ - bundle: true, - loader: { ".gif": "file", ".svg": "file" }, - entryPoints: [ - "app/assets/entry_points/application.js", - "app/assets/entry_points/blog.js", - "app/assets/entry_points/admin.js", - ], - minify, - outdir: "app/assets/builds", - plugins: [sassPlugin()], - sourcemap, - watch, - }) - .catch(() => process.exit(1)); diff --git a/bin/dev b/bin/dev index a1104a50..c1cb98b0 100755 --- a/bin/dev +++ b/bin/dev @@ -1,6 +1,6 @@ #!/usr/bin/env bash -if ! command -v foreman &> /dev/null +if ! foreman version &> /dev/null then echo "Installing foreman..." gem install foreman diff --git a/config/environments/production.rb b/config/environments/production.rb index 803a641f..e8bed31e 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -29,6 +29,7 @@ # Do not fallback to assets pipeline if a precompiled asset is missed. config.assets.compile = false + config.assets.resolve_assets_in_css_urls = true # Enable serving of images, stylesheets, and JavaScripts from an asset server. # config.asset_host = "http://assets.example.com" diff --git a/package.json b/package.json index 945e561d..89377bb1 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "@rails/activestorage": "^6.0.3-3", "@rails/ujs": "^6.0.3-3", "esbuild": "^0.14.28", - "esbuild-sass-plugin": "^2.2.5", - "normalize.css": "^8.0.1", + "sass": "^1.54.3", "webpack-jquery-ui": "^2.0.1" }, "devDependencies": {}, "scripts": { - "build": "bin/assets" + "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets", + "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules" } } diff --git a/yarn.lock b/yarn.lock index 6de9a04c..2876d162 100644 --- a/yarn.lock +++ b/yarn.lock @@ -243,14 +243,6 @@ esbuild-openbsd-64@0.14.28: resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.28.tgz#9d7b0ca421ae580ab945c69c33eabd793262a84c" integrity sha512-HBv18rVapbuDx52/fhZ/c/w6TXyaQAvRxiDDn5Hz/pBcwOs3cdd2WxeIKlWmDoqm2JMx5EVlq4IWgoaRX9mVkw== -esbuild-sass-plugin@^2.2.5: - version "2.2.5" - resolved "https://registry.yarnpkg.com/esbuild-sass-plugin/-/esbuild-sass-plugin-2.2.5.tgz#2016cdbfe9f192129c5adcdfeaac8d87fd8bc7d8" - integrity sha512-AoKHFu/qKPxyo2bLzqP4/n+27f/1acO4dHsUeqRVflEgnUqis6+pPdoS2nLhmC6sPwIwzK0C8bQ0A4Bt30qkeg== - dependencies: - esbuild "^0.14.13" - sass "^1.49.0" - esbuild-sunos-64@0.14.28: version "0.14.28" resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.28.tgz#5b82807ebe435519a2689e1a4d50b8a3cc5c64c0" @@ -271,7 +263,7 @@ esbuild-windows-arm64@0.14.28: resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.28.tgz#c527d52ec7d1f868259d0f74ecc4003e8475125d" integrity sha512-VhXGBTo6HELD8zyHXynV6+L2jWx0zkKnGx4TmEdSBK7UVFACtOyfUqpToG0EtnYyRZ0HESBhzPSVpP781ovmvA== -esbuild@^0.14.13, esbuild@^0.14.28: +esbuild@^0.14.28: version "0.14.28" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.28.tgz#7738635d2ea19e446bd319d83a1802545e6aebb8" integrity sha512-YLNprkCcMVKQ5sekmCKEQ3Obu/L7s6+iij38xNKyBeSmSsTWur4Ky/9zB3XIGT8SCJITG/bZwAR2l7YOAXch4Q== @@ -455,11 +447,6 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== -normalize.css@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" - integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== - picomatch@^2.0.4, picomatch@^2.2.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -522,10 +509,10 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -sass@^1.49.0: - version "1.49.9" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9" - integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A== +sass@^1.54.3: + version "1.54.3" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.3.tgz#37baa2652f7f1fdadb73240ee9a2b9b81fabb5c4" + integrity sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0"