diff --git a/Gemfile.lock b/Gemfile.lock index f44fffc..63a04a7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - cssbundling-rails (1.3.3) + cssbundling-rails (1.4.0) railties (>= 6.0.0) GEM diff --git a/README.md b/README.md index ee8e906..9e7c24f 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,15 @@ 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. +### How do I avoid `ActionView::Template::Error: Error: Function rgb is missing argument $green`? + +This might happen if your Gemfile.lock contains the legacy `sassc-rails`, which might be need while progressively migrating your project, or which might be a transitive dependency of a gem your project depends on and over which you have no control. In this case, prevent Sprockets from bundling the CSS on top of the bundling already performed by this gem. Make sure do this for all environments, not only production, otherwise your test suite may fail. + +``` +# config/initializers/assets.rb +Rails.application.config.assets.css_compressor = nil +``` + ### 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: @@ -51,6 +60,15 @@ Watch out - if you precompile your files locally, those will be served over the rails assets:clobber ``` +### How do I include 3rd party stylesheets from `node_modules` in my bundle? + +Use an `@import` statement and path to a specific stylesheet, omitting the `node_modules/` segment and the file's extension. For example: + +```scss +/* Desired file is at at node_modules/select2/dist/css/select2.css */ +@import "https://github.com/select2/dist/css/select2"; +``` + ## 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 5b6d7ae..e7ff022 100644 --- a/lib/cssbundling/version.rb +++ b/lib/cssbundling/version.rb @@ -1,3 +1,3 @@ module Cssbundling - VERSION = "1.3.3" + VERSION = "1.4.0" end diff --git a/lib/install/bootstrap/install.rb b/lib/install/bootstrap/install.rb index bfea9b0..abf8e1d 100644 --- a/lib/install/bootstrap/install.rb +++ b/lib/install/bootstrap/install.rb @@ -1,6 +1,8 @@ require_relative "../helpers" self.extend Helpers +apply "#{__dir__}/../install.rb" + say "Install Bootstrap with Bootstrap Icons, Popperjs/core and Autoprefixer" copy_file "#{__dir__}/application.bootstrap.scss", "app/assets/stylesheets/application.bootstrap.scss" @@ -19,6 +21,19 @@ say %(Add import * as bootstrap from "bootstrap" to your entry point JavaScript file), :red end +if Rails.root.join("config/importmap.rb").exist? + say "Pin Bootstrap" + append_to_file "config/importmap.rb", %(pin "bootstrap", to: "bootstrap.min.js"\n) + + inject_into_file "config/initializers/assets.rb", after: /.*Rails.application.config.assets.paths.*\n/ do + <<~RUBY + Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap/dist/js") + RUBY + end + + append_to_file "config/initializers/assets.rb", %(Rails.application.config.assets.precompile << "bootstrap.min.js") +end + add_package_json_script("build:css:compile", "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules") add_package_json_script("build:css:prefix", "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css") add_package_json_script("build:css", "#{bundler_run_cmd} build:css:compile && #{bundler_run_cmd} build:css:prefix") diff --git a/lib/install/bulma/install.rb b/lib/install/bulma/install.rb index c5276d0..a6de35a 100644 --- a/lib/install/bulma/install.rb +++ b/lib/install/bulma/install.rb @@ -1,6 +1,8 @@ require_relative "../helpers" self.extend Helpers +apply "#{__dir__}/../install.rb" + say "Install Bulma" copy_file "#{__dir__}/application.bulma.scss", "app/assets/stylesheets/application.bulma.scss" diff --git a/lib/install/dev b/lib/install/dev index a4e05fa..eda330c 100755 --- a/lib/install/dev +++ b/lib/install/dev @@ -1,6 +1,6 @@ #!/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 diff --git a/lib/install/helpers.rb b/lib/install/helpers.rb index b8837f8..dd4e974 100644 --- a/lib/install/helpers.rb +++ b/lib/install/helpers.rb @@ -21,7 +21,7 @@ def add_package_json_script(name, script, run_script=true) if using_bun? package_json = JSON.parse(File.read("package.json")) package_json["scripts"] ||= {} - package_json["scripts"][name] = script + package_json["scripts"][name] = script.gsub('\\"', '"') File.write("package.json", JSON.pretty_generate(package_json)) run %(bun run #{name}) if run_script else diff --git a/lib/install/postcss/install.rb b/lib/install/postcss/install.rb index d9eb5bd..e80280b 100644 --- a/lib/install/postcss/install.rb +++ b/lib/install/postcss/install.rb @@ -1,6 +1,8 @@ require_relative "../helpers" self.extend Helpers +apply "#{__dir__}/../install.rb" + say "Install PostCSS w/ nesting and autoprefixer" copy_file "#{__dir__}/postcss.config.js", "postcss.config.js" copy_file "#{__dir__}/application.postcss.css", "app/assets/stylesheets/application.postcss.css" diff --git a/lib/install/sass/install.rb b/lib/install/sass/install.rb index 692d60e..b05a8e5 100644 --- a/lib/install/sass/install.rb +++ b/lib/install/sass/install.rb @@ -1,6 +1,8 @@ require_relative "../helpers" self.extend Helpers +apply "#{__dir__}/../install.rb" + say "Install Sass" copy_file "#{__dir__}/application.sass.scss", "app/assets/stylesheets/application.sass.scss" run "#{bundler_cmd} add sass" diff --git a/lib/install/tailwind/install.rb b/lib/install/tailwind/install.rb index 7374ff4..f8e530d 100644 --- a/lib/install/tailwind/install.rb +++ b/lib/install/tailwind/install.rb @@ -1,6 +1,8 @@ require_relative "../helpers" self.extend Helpers +apply "#{__dir__}/../install.rb" + say "Install Tailwind (+PostCSS w/ autoprefixer)" copy_file "#{__dir__}/tailwind.config.js", "tailwind.config.js" copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/application.tailwind.css" diff --git a/lib/tasks/cssbundling/build.rake b/lib/tasks/cssbundling/build.rake index dcdd429..8410147 100644 --- a/lib/tasks/cssbundling/build.rake +++ b/lib/tasks/cssbundling/build.rake @@ -22,15 +22,36 @@ module Cssbundling extend self def install_command - return "bun install" if File.exist?('bun.lockb') || (tool_exists?('bun') && !File.exist?('yarn.lock')) - return "yarn install" if File.exist?('yarn.lock') || tool_exists?('yarn') - raise "cssbundling-rails: No suitable tool found for installing JavaScript dependencies" + case tool + when :bun then "bun install" + when :yarn then "yarn install" + when :pnpm then "pnpm install" + when :npm then "npm install" + else raise "cssbundling-rails: No suitable tool found for installing JavaScript dependencies" + end end def build_command - return "bun run build:css" if File.exist?('bun.lockb') || (tool_exists?('bun') && !File.exist?('yarn.lock')) - return "yarn build:css" if File.exist?('yarn.lock') || tool_exists?('yarn') - raise "cssbundling-rails: No suitable tool found for building CSS" + case tool + when :bun then "bun run build:css" + when :yarn then "yarn build:css" + when :pnpm then "pnpm build:css" + when :npm then "npm run build:css" + else raise "cssbundling-rails: No suitable tool found for building CSS" + end + end + + def tool + case + when File.exist?('bun.lockb') then :bun + when File.exist?('yarn.lock') then :yarn + when File.exist?('pnpm-lock.yaml') then :pnpm + when File.exist?('package-lock.json') then :npm + when tool_exists?('bun') then :bun + when tool_exists?('yarn') then :yarn + when tool_exists?('pnpm') then :pnpm + when tool_exists?('npm') then :npm + end end def tool_exists?(tool) diff --git a/lib/tasks/cssbundling/install.rake b/lib/tasks/cssbundling/install.rake index d093d8d..ba1df4c 100644 --- a/lib/tasks/cssbundling/install.rake +++ b/lib/tasks/cssbundling/install.rake @@ -1,32 +1,27 @@ namespace :css do namespace :install do - desc "Install shared elements for all bundlers" - task :shared do - system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/install.rb", __dir__)}" - end - desc "Install Tailwind" - task tailwind: "css:install:shared" do + task :tailwind do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/tailwind/install.rb", __dir__)}" end desc "Install PostCSS" - task postcss: "css:install:shared" do + task :postcss do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/postcss/install.rb", __dir__)}" end desc "Install Sass" - task sass: "css:install:shared" do + task :sass do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/sass/install.rb", __dir__)}" end desc "Install Bootstrap" - task bootstrap: "css:install:shared" do + task :bootstrap do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/bootstrap/install.rb", __dir__)}" end desc "Install Bulma" - task bulma: "css:install:shared" do + task :bulma do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/bulma/install.rb", __dir__)}" end end