Add --css app generator option (#43177)

* Add --css to preconfigure a CSS bundler/processor

* Simpler conditional

* Add CSS gems

* Test CSS options

Author: David Heinemeier Hansson

Gemfile

@@ -16,7 +16,9 @@ gem "rack-cache", "~> 1.2"
 gem "stimulus-rails"
 gem "turbo-rails"
 gem "jsbundling-rails"
+gem "cssbundling-rails"
 gem "importmap-rails"
+gem "tailwindcss-rails"
 # require: false so bcrypt is loaded only when has_secure_password is used.
 # This is to avoid Active Model (and by extension the entire framework)
 # being dependent on a binary library.

Gemfile.lock

@@ -184,6 +184,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (0.1.0)
+      rails (>= 6.0.0)
     curses (1.4.2)
     daemons (1.4.0)
     dalli (2.7.11)
@@ -470,6 +472,8 @@ GEM
       rails (>= 6.0.0)
     sucker_punch (3.0.1)
       concurrent-ruby (~> 1.0)
+    tailwindcss-rails (0.4.3)
+      rails (>= 6.0.0)
     terser (1.1.4)
       execjs (>= 0.3.0, < 3)
     thin (1.8.1)
@@ -530,6 +534,7 @@ DEPENDENCIES
   byebug
   capybara (>= 3.26)
   connection_pool
+  cssbundling-rails
   dalli
   delayed_job
   delayed_job_active_record
@@ -578,6 +583,7 @@ DEPENDENCIES
   stackprof
   stimulus-rails
   sucker_punch
+  tailwindcss-rails
   terser (>= 1.1.4)
   turbo-rails
   tzinfo-data

railties/lib/rails/generators/app_base.rb

@@ -110,6 +110,7 @@ def gemfile_entries # :doc:
          web_server_gemfile_entry,
          javascript_gemfile_entry,
          hotwire_gemfile_entry,
+         css_gemfile_entry,
          jbuilder_gemfile_entry,
          psych_gemfile_entry,
          cable_gemfile_entry].flatten.find_all(&@gem_filter)
@@ -315,6 +316,20 @@ def hotwire_gemfile_entry
         [ turbo_rails_entry, stimulus_rails_entry ]
       end
 
+      def using_node?
+        options[:javascript] && options[:javascript] != "importmap"
+      end
+
+      def css_gemfile_entry
+        return [] unless options[:css]
+
+        if !using_node? && options[:css] == "tailwind"
+          GemfileEntry.version("tailwindcss-rails", ">= 0.4.3", "Use Tailwind CSS. See: https://github.com/rails/tailwindcss-rails")
+        else
+          GemfileEntry.version("cssbundling-rails", ">= 0.1.0", "Bundle and process CSS with Tailwind, PostCSS, or Sass. Read more: https://github.com/rails/cssbundling-rails")
+        end
+      end
+
       def psych_gemfile_entry
         return [] unless defined?(Rubinius)
 
@@ -388,6 +403,16 @@ def run_hotwire
         rails_command "turbo:install stimulus:install"
       end
 
+      def run_css
+        return if !options[:css] || !bundle_install?
+
+        if !using_node? && options[:css] == "tailwind"
+          rails_command "tailwindcss:install"
+        else
+          rails_command "css:install:#{options[:css]}"
+        end
+      end
+
       def generate_bundler_binstub
         if bundle_install?
           bundle_command("binstubs bundler")

railties/lib/rails/generators/rails/app/app_generator.rb

@@ -271,6 +271,7 @@ class AppGenerator < AppBase
       class_option :api, type: :boolean, desc: "Preconfigure smaller stack for API only apps"
       class_option :minimal, type: :boolean, desc: "Preconfigure a minimal rails app"
       class_option :javascript, type: :string, aliases: "-j", default: "importmap", desc: "Choose JavaScript approach [options: importmap (default), webpack, esbuild, rollup]"
+      class_option :css, type: :string, desc: "Choose CSS processor [options: tailwind, postcss, sass]"
       class_option :skip_bundle, type: :boolean, aliases: "-B", default: false, desc: "Don't run bundle install"
 
       def initialize(*args)
@@ -512,6 +513,7 @@ def finish_template
       public_task :generate_bundler_binstub
       public_task :run_javascript
       public_task :run_hotwire
+      public_task :run_css
 
       def run_after_bundle_callbacks
         @after_bundle_callbacks.each(&:call)

railties/lib/rails/generators/rails/app/templates/Gemfile.tt

@@ -21,9 +21,6 @@ ruby <%= "\"#{RUBY_VERSION}\"" -%>
 
 # Use Sass to process CSS
 # gem "sassc-rails", "~> 2.1"
-
-# Use Tailwind CSS. See: https://github.com/rails/tailwindcss-rails
-# gem "tailwindcss-rails", "~> 0.4.3"
 <% end -%>
 
 # Use Active Model has_secure_password

railties/test/generators/app_generator_test.rb

@@ -819,6 +819,20 @@ def test_skip_hotwire
     assert_no_file "app/javascript/application.js"
   end
 
+  def test_css_option_with_asset_pipeline_tailwind
+    run_generator [destination_root, "--dev", "--css", "tailwind"]
+    assert_gem "tailwindcss-rails"
+    assert_file "app/views/layouts/application.html.erb" do |content|
+      assert_match(/tailwind/, content)
+    end
+  end
+
+  def test_css_option_with_cssbundling_gem
+    run_generator [destination_root, "--dev", "--css", "postcss"]
+    assert_gem "cssbundling-rails"
+    assert_file "app/assets/stylesheets/application.postcss.css"
+  end
+
   def test_bootsnap
     run_generator [destination_root, "--no-skip-bootsnap"]