Remove deprecated CSS tooling. Introduce postcss. (#1113)

Remove obsolete CSS tooling such as bourbon in favor of postcss. This change requires us to use cssbundling-rails and jsbundling-rails.

We needed to keep `sprockets` to prevent existing tests from failing when the app is generated in API only mode, but #1117 will explore a solution.

Co-authored-by: Eric Milford <[email protected]>

Author: stevepolitodesign

lib/suspenders.rb

@@ -4,7 +4,6 @@
 require "suspenders/generators/advisories_generator"
 require "suspenders/generators/app_generator"
 require "suspenders/generators/static_generator"
-require "suspenders/generators/stylesheet_base_generator"
 require "suspenders/generators/stylelint_generator"
 require "suspenders/generators/forms_generator"
 require "suspenders/generators/ci_generator"

lib/suspenders/generators/app_generator.rb

@@ -31,6 +31,9 @@ class AppGenerator < Rails::Generators::AppGenerator
     class_option :skip_system_test,
       type: :boolean, default: true, desc: "Skip system test files"
 
+    class_option :css,
+      type: :string, default: "postcss", aliases: "-c", desc: "Choose CSS processor"
+
     def finish_template
       invoke :suspenders_customization
       super

lib/suspenders/generators/stylesheet_base_generator.rb

@@ -11,11 +11,6 @@ def create_shared_flashes
       copy_file "flashes_helper.rb", "app/helpers/flashes_helper.rb"
     end
 
-    def create_shared_javascripts
-      copy_file "_javascript.html.erb",
-        "app/views/application/_javascript.html.erb"
-    end
-
     def create_shared_css_overrides
       copy_file "_css_overrides.html.erb",
         "app/views/application/_css_overrides.html.erb"

lib/suspenders/generators/views_generator.rb

@@ -13,9 +13,6 @@
     expect(gemfile_file).to match(
       /^ruby "#{Suspenders::RUBY_VERSION}"$/o
     )
-    expect(gemfile_file).to match(
-      /^gem "autoprefixer-rails"$/
-    )
     expect(gemfile_file).to match(
       /^gem "rails", "#{Suspenders::RAILS_VERSION}"$/o
     )
@@ -255,10 +252,6 @@
     expect(app_json_file).to match(/"name":\s*"#{app_name.dasherize}"/)
   end
 
-  def app_name
-    TestPaths::APP_NAME
-  end
-
   it "adds high_voltage" do
     gemfile = IO.read("#{project_path}/Gemfile")
     expect(gemfile).to match(/high_voltage/)
@@ -270,22 +263,43 @@ def app_name
     expect(gemfile).to match(/sassc-rails/)
   end
 
-  it "adds and configures bourbon" do
+  it "configures Timecop safe mode" do
+    spec_helper = read_project_file(%w[spec spec_helper.rb])
+    expect(spec_helper).to match(/Timecop.safe_mode = true/)
+  end
+
+  it "adds and configures a bundler strategy for css and js" do
     gemfile = read_project_file("Gemfile")
 
-    expect(gemfile).to match(/bourbon/)
+    expect(gemfile).to match(/cssbundling-rails/)
+    expect(gemfile).to match(/jsbundling-rails/)
+    expect(File).to exist("#{project_path}/postcss.config.js")
+    expect(File).to exist("#{project_path}/package.json")
+    expect(File).to exist("#{project_path}/bin/dev")
+    expect(File).to exist("#{project_path}/app/assets/stylesheets/application.postcss.css")
+    expect(File).to exist("#{project_path}/app/javascript/application.js")
   end
 
-  it "configures bourbon, and bitters" do
-    app_css = read_project_file(%w[app assets stylesheets application.scss])
-    expect(app_css).to match(
-      /normalize\.css\/normalize.*bourbon.*base/m
-    )
+  it "imports css and js" do
+    layout = read_project_file %w[app views layouts application.html.erb]
+
+    expect(layout)
+      .to include(%(<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>))
+    expect(layout)
+      .to include(%(<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>))
   end
 
-  it "configures Timecop safe mode" do
-    spec_helper = read_project_file(%w[spec spec_helper.rb])
-    expect(spec_helper).to match(/Timecop.safe_mode = true/)
+  it "loads security helpers" do
+    layout = read_project_file %w[app views layouts application.html.erb]
+
+    expect(layout)
+      .to include(%(<%= csp_meta_tag %>))
+    expect(layout)
+      .to include(%(<%= csrf_meta_tags %>))
+  end
+
+  def app_name
+    TestPaths::APP_NAME
   end
 
   def development_config

spec/features/new_project_spec.rb

@@ -7,8 +7,7 @@
     config.action_controller.perform_caching = true
     config.action_controller.enable_fragment_cache_logging = true
     config.cache_store = :memory_store
-    config.public_file_server.headers = {
-    }
+    config.public_file_server.headers = {}
   else
     config.action_controller.perform_caching = false
     config.cache_store = :null_store

spec/support/fixtures/dummy_app/config/environments/development.rb

@@ -7,30 +7,27 @@ end
 
 ruby "<%= Suspenders::RUBY_VERSION %>"
 
-<% unless options[:api] %>
-gem "autoprefixer-rails"
+<% if options[:api] %>
+gem "sprockets", "< 4"
 <% end %>
+
 gem "bootsnap", require: false
+gem "cssbundling-rails"
 gem "honeybadger"
+gem "jsbundling-rails"
 gem "pg"
 gem "puma"
 gem "rack-canonical-host"
 gem "rails", "<%= Suspenders::RAILS_VERSION %>"
 gem "recipient_interceptor"
 gem "sassc-rails"
 gem "skylight"
-gem "sprockets", "< 4"
-gem "title"
-gem "tzinfo-data", platforms: [:mingw, :x64_mingw, :mswin, :jruby]
-<%# TODO: Remove this, and consider passing an option to the `rails new` command for esbuild  %>
-<%# TODO: Maybe this is how we conditionally handle dependencies that need a bundler %>
-<%# unless options[:javascript] %>
-<%# gem "webpacker" %>
-# Rails 7
 gem "sprockets-rails"
-gem "importmap-rails"
-gem "turbo-rails"
 gem "stimulus-rails"
+gem "title"
+gem "turbo-rails"
+gem "tzinfo-data", platforms: [:mingw, :x64_mingw, :mswin, :jruby]
+
 group :development do
   gem "listen"
   gem "web-console"

templates/Gemfile.erb

@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <%%#
     Configure default and controller-, and view-specific titles in
     config/locales/en.yml. For more see:
     https://github.com/calebthompson/title#usage
   %>
   <title><%%= title %></title>
-  <%%= stylesheet_link_tag :application, media: "all" %>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <%%= csrf_meta_tags %>
+  <%%= csp_meta_tag %>
+
+  <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
 </head>
 <body>
   <%%= render "flashes" -%>
   <%%= yield %>
-  <%%= render "javascript" %>
   <%%= render "css_overrides" %>
 </body>
 </html>