diff --git a/Gemfile.lock b/Gemfile.lock index 28ff220..2644eb6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - cssbundling-rails (1.1.2) + cssbundling-rails (1.2.0) railties (>= 6.0.0) GEM @@ -96,14 +96,14 @@ GEM mini_mime (1.0.3) minitest (5.14.4) nio4r (2.5.7) - nokogiri (1.13.6-arm64-darwin) + nokogiri (1.15.2-arm64-darwin) racc (~> 1.4) - nokogiri (1.13.6-x86_64-darwin) + nokogiri (1.15.2-x86_64-darwin) racc (~> 1.4) - nokogiri (1.13.6-x86_64-linux) + nokogiri (1.15.2-x86_64-linux) racc (~> 1.4) public_suffix (4.0.6) - racc (1.5.2) + racc (1.7.1) rack (2.2.3) rack-test (1.1.0) rack (>= 1.0, < 3) diff --git a/README.md b/README.md index ff12ef5..ee8e906 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,7 @@ Whenever the bundler detects changes to any of the stylesheet files in your proj When you deploy your application to production, the `css:build` task attaches to the `assets:precompile` task to ensure that all your package dependencies from `package.json` have been installed via yarn, and then runs `yarn build:css` to process your stylesheet entrypoint, as it would in development. This output is then picked up by the asset pipeline, digested, and copied into public/assets, as any other asset pipeline file. -This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the stylesheets have been bundled before testing commences. (Note that this currently only applies to rails `test:*` tasks (like `test:all` or `test:controllers`), not "rails test", as that doesn't load `test:prepare`). - -If your test framework does not define a `test:prepare` Rake task, ensure that your test framework runs `css:build` to bundle stylesheets before testing commences. If your setup uses [jsbundling-rails](https://github.com/rails/jsbundling-rails) (ie, esbuild + tailwind), you will also need to run `javascript:build`. +This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the stylesheets have been bundled before testing commences. If your test framework does not call the `test:prepare` Rake task, ensure that your test framework runs `css:build` to bundle stylesheets before testing commences. If your setup uses [jsbundling-rails](https://github.com/rails/jsbundling-rails) (ie, esbuild + tailwind), you will also need to run `javascript:build`. That's it! @@ -45,6 +43,14 @@ Some CSS packages use new CSS features that are not supported by the default Sas A common issue is that your repository does not contain the output directory used by the build commands. You must have `app/assets/builds` available. Add the directory with a `.gitkeep` file, and you'll ensure it's available in production. +### Why isn't Rails using my updated css files? + +Watch out - if you precompile your files locally, those will be served over the dynamically created ones you expect. The solution: + +```shell +rails assets:clobber +``` + ## License CSS Bundling for Rails is released under the [MIT License](https://opensource.org/licenses/MIT). diff --git a/lib/cssbundling/version.rb b/lib/cssbundling/version.rb index 6b4798e..36f63c4 100644 --- a/lib/cssbundling/version.rb +++ b/lib/cssbundling/version.rb @@ -1,3 +1,3 @@ module Cssbundling - VERSION = "1.1.2" + VERSION = "1.2.0" end diff --git a/lib/install/Procfile.dev b/lib/install/Procfile.dev index cb7c9aa..0fc822f 100644 --- a/lib/install/Procfile.dev +++ b/lib/install/Procfile.dev @@ -1,2 +1,2 @@ -web: unset PORT && bin/rails server +web: unset PORT && env RUBY_DEBUG_OPEN=true bin/rails server css: yarn build:css --watch diff --git a/lib/install/bootstrap/install.rb b/lib/install/bootstrap/install.rb index ec1a67f..ac920f6 100644 --- a/lib/install/bootstrap/install.rb +++ b/lib/install/bootstrap/install.rb @@ -1,7 +1,7 @@ -say "Install Bootstrap with Bootstrap Icons and Popperjs/core" +say "Install Bootstrap with Bootstrap Icons, Popperjs/core and Autoprefixer" copy_file "#{__dir__}/application.bootstrap.scss", "app/assets/stylesheets/application.bootstrap.scss" -run "yarn add sass bootstrap bootstrap-icons @popperjs/core" +run "yarn add sass bootstrap bootstrap-icons @popperjs/core postcss postcss-cli autoprefixer nodemon" inject_into_file "config/initializers/assets.rb", after: /.*Rails.application.config.assets.paths.*\n/ do <<~RUBY @@ -16,16 +16,32 @@ say %(Add import * as bootstrap from "bootstrap" to your entry point JavaScript file), :red end -say "Add build:css script" -build_script = "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" +def add_npm_script(name, script, run_script=true) + case `npx -v`.to_f + when 7.1...8.0 + say "Add #{name} script" + run %(npm set-script #{name} "#{script}") + run %(yarn #{name}) if run_script + when (8.0..) + say "Add #{name} script" + run %(npm pkg set scripts.#{name}="#{script}") + run %(yarn #{name}) if run_script + else + say %(Add "scripts": { "#{name}": "#{script}" } to your package.json), :green + end +end + +add_npm_script("build:css:compile", "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules") +add_npm_script("build:css:prefix", "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css") +add_npm_script("build:css", "yarn build:css:compile && yarn build:css:prefix") +add_npm_script("watch:css", "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \\\"yarn build:css\\\"", false) + +gsub_file "Procfile.dev", "build:css --watch", "watch:css" case `npx -v`.to_f -when 7.1...8.0 - run %(npm set-script build:css "#{build_script}") - run %(yarn build:css) -when (8.0..) - run %(npm pkg set scripts.build:css="#{build_script}") - run %(yarn build:css) +when (7.1..) + say "Add browserslist config" + run %(npm pkg set browserslist[]=defaults) else - say %(Add "scripts": { "build:css": "#{build_script}" } to your package.json), :green + say %(Add "browserslist": ["defaults"] to your package.json), :green end diff --git a/lib/tasks/cssbundling/build.rake b/lib/tasks/cssbundling/build.rake index 1e3a9b0..2c6a5ed 100644 --- a/lib/tasks/cssbundling/build.rake +++ b/lib/tasks/cssbundling/build.rake @@ -2,17 +2,21 @@ namespace :css do desc "Build your CSS bundle" task :build do unless system "yarn install && yarn build:css" - raise "cssbundling-rails: Command css:build failed, ensure yarn is installed and `yarn build:css` runs without errors" + raise "cssbundling-rails: Command css:build failed, ensure yarn is installed and `yarn build:css` runs without errors or use SKIP_CSS_BUILD env variable" end end end -if Rake::Task.task_defined?("assets:precompile") - Rake::Task["assets:precompile"].enhance(["css:build"]) -end +unless ENV["SKIP_CSS_BUILD"] + if Rake::Task.task_defined?("assets:precompile") + Rake::Task["assets:precompile"].enhance(["css:build"]) + end -if Rake::Task.task_defined?("test:prepare") - Rake::Task["test:prepare"].enhance(["css:build"]) -elsif Rake::Task.task_defined?("db:test:prepare") - Rake::Task["db:test:prepare"].enhance(["css:build"]) + if Rake::Task.task_defined?("test:prepare") + Rake::Task["test:prepare"].enhance(["css:build"]) + elsif Rake::Task.task_defined?("spec:prepare") + Rake::Task["spec:prepare"].enhance(["css:build"]) + elsif Rake::Task.task_defined?("db:test:prepare") + Rake::Task["db:test:prepare"].enhance(["css:build"]) + end end diff --git a/lib/tasks/cssbundling/clobber.rake b/lib/tasks/cssbundling/clobber.rake index 9bfcae9..14b0215 100644 --- a/lib/tasks/cssbundling/clobber.rake +++ b/lib/tasks/cssbundling/clobber.rake @@ -1,7 +1,7 @@ namespace :css do desc "Remove CSS builds" task :clobber do - rm_rf Dir["app/assets/builds/**/[^.]*.css"], verbose: false + rm_rf Dir["app/assets/builds/**/[^.]*.{css,css.map}"], verbose: false end end