Remove default reliance on Sass and CSS generators (rails#43110)

* No benefit to having actiontext css as scss

* Update test

* Update docs

* No more css assets to be generated

New world, new CSS frameworks, new needs.

* SCSS is becoming optional

* Remove Sass as a default-on setting

But continue to make it easy to add.

* Update docs

* No longer used

* Update tests

* Update docs

* Update docs

* No longer used

* No longer by default

* Fix tests

* Promote Tailwind CSS as an alternative to Sass

* Fix test and copy task

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

Co-authored-by: Kevin Newton <[email protected]>

Co-authored-by: Kevin Newton <[email protected]>

Author: David Heinemeier Hansson

Gemfile

@@ -13,7 +13,6 @@ gem "capybara", ">= 3.26"
 gem "selenium-webdriver", ">= 4.0.0.alpha7"
 
 gem "rack-cache", "~> 1.2"
-gem "sass-rails"
 gem "stimulus-rails"
 gem "turbo-rails"
 gem "webpacker", "~> 6.0.0.rc.5", require: ENV["SKIP_REQUIRE_WEBPACKER"] != "true"

Gemfile.lock

@@ -422,16 +422,6 @@ GEM
     rubyzip (2.3.0)
     rufus-scheduler (3.7.0)
       fugit (~> 1.1, >= 1.1.6)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     sdoc (2.2.0)
       rdoc (>= 5.0)
     selenium-webdriver (4.0.0.beta4)
@@ -583,7 +573,6 @@ DEPENDENCIES
   rubocop-packaging
   rubocop-performance
   rubocop-rails
-  sass-rails
   sdoc (>= 2.2.0)
   selenium-webdriver (>= 4.0.0.alpha7)
   sequel

actiontext/lib/generators/action_text/install/install_generator.rb

@@ -62,7 +62,7 @@ def append_javascript_dependencies
       end
 
       def create_actiontext_files
-        template "actiontext.scss", "app/assets/stylesheets/actiontext.scss"
+        template "actiontext.css", "app/assets/stylesheets/actiontext.css"
 
         copy_file "#{GEM_ROOT}/app/views/active_storage/blobs/_blob.html.erb",
           "app/views/active_storage/blobs/_blob.html.erb"

actiontext/lib/generators/action_text/install/templates/actiontext.css

@@ -0,0 +1,35 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+<%- if defined?(Webpacker::Engine) -%>
+ *= require trix/dist/trix
+<%- else -%>
+ *= require trix
+<% end -%>
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}

actiontext/lib/generators/action_text/install/templates/actiontext.scss

@@ -49,28 +49,17 @@ Run `bin/rails action_text:install` to add the Yarn package and copy over the ne
 
 NOTE: ActionText uses polymorphic relationships with the `action_text_rich_texts` table so that it can be shared with all models that have rich text attributes. If your models with ActionText content use UUID values for identifiers, all models that use ActionText attributes will need to use UUID values for their unique identifiers. The generated migration for ActionText will also need to be updated to specify `type: :uuid` for the `:record` `references` line.
 
-After the installation is complete, a Rails app using Webpacker should have the following changes:
+After the installation is complete, a Rails app should have the following changes:
 
-1. Both `trix` and `@rails/actiontext` should be required in your JavaScript pack.
+1. Both `trix` and `@rails/actiontext` should be required in your JavaScript entrypoint.
 
     ```js
     // application.js
     import "trix"
     import "@rails/actiontext"
     ```
 
-2. The `trix` stylesheet should be imported into `actiontext.scss`.
-
-    ```scss
-    @import "trix/dist/trix";
-    ```
-
-    Additionally, this `actiontext.scss` file should be imported into your stylesheet pack.
-
-    ```scss
-    // application.scss
-    @import "./actiontext.scss";
-    ```
+2. The `trix` stylesheet will be included together with Action Text styles in your `application.css` file.
 
 ## Creating Rich Text content
 

guides/source/action_text_overview.md

@@ -33,24 +33,11 @@ passing the `--skip-sprockets` option.
 $ rails new appname --skip-sprockets
 ```
 
-Rails automatically adds the [`sass-rails`](https://github.com/rails/sass-rails)
-gem to your `Gemfile`, which is used by Sprockets for
-[Sass](https://sass-lang.com) compilation:
+Rails can easily work with Sass by adding the [`sassc-rails`](https://github.com/sass/sassc-rails)
+gem to your `Gemfile`, which is used by Sprockets for [Sass](https://sass-lang.com) compilation:
 
 ```ruby
-gem 'sass-rails'
-```
-
-Using the `--skip-sprockets` option will prevent Rails from adding
-this gem, so if you later want to enable the asset pipeline
-you will have to add it to your `Gemfile` manually. Also,
-creating an application with the `--skip-sprockets` option will generate
-a slightly different `config/application.rb` file, with a require statement
-for the sprockets railtie that is commented-out. You will have to remove
-the comment operator on that line to later enable the asset pipeline:
-
-```ruby
-# require "sprockets/railtie"
+gem 'sassc-rails'
 ```
 
 To set asset compression methods, set the appropriate configuration options
@@ -62,7 +49,7 @@ config.assets.css_compressor = :yui
 config.assets.js_compressor = :uglifier
 ```
 
-NOTE: The `sass-rails` gem is automatically used for CSS compression if included
+NOTE: The `sassc-rails` gem is automatically used for CSS compression if included
 in the `Gemfile` and no `config.assets.css_compressor` option is set.
 
 ### Main Features

guides/source/asset_pipeline.md

@@ -210,9 +210,6 @@ $ bin/rails generate controller Greetings hello
      invoke  helper
      create    app/helpers/greetings_helper.rb
      invoke    test_unit
-     invoke  assets
-     invoke    scss
-     create      app/assets/stylesheets/greetings.scss
 ```
 
 What all did this generate? It made sure a bunch of directories were in our application, and created a controller file, a view file, a functional test file, a helper for the view, a JavaScript file, and a stylesheet file.
@@ -302,11 +299,6 @@ $ bin/rails generate scaffold HighScore game:string score:integer
     create      app/views/high_scores/index.json.jbuilder
     create      app/views/high_scores/show.json.jbuilder
     create      app/views/high_scores/_high_score.json.jbuilder
-    invoke  assets
-    invoke    scss
-    create      app/assets/stylesheets/high_scores.scss
-    invoke  scss
-    create    app/assets/stylesheets/scaffolds.scss
 ```
 
 The generator checks that there exist the directories for models, controllers, helpers, layouts, functional and unit tests, stylesheets, creates the views, controller, model and database migration for HighScore (creating the `high_scores` table and fields), takes care of the route for the **resource**, and new tests for everything.

guides/source/command_line.md

@@ -211,7 +211,6 @@ end
 
 The full set of methods that can be used in this block are as follows:
 
-* `assets` allows to create assets on generating a scaffold. Defaults to `true`.
 * `force_plural` allows pluralized model names. Defaults to `false`.
 * `helper` defines whether or not to generate helpers. Defaults to `true`.
 * `integration_tool` defines which integration tool to use to generate integration tests. Defaults to `:test_unit`.
@@ -221,9 +220,6 @@ The full set of methods that can be used in this block are as follows:
 * `resource_route` defines whether a resource route definition should be generated
   or not. Defaults to `true`.
 * `scaffold_controller` different from `resource_controller`, defines which generator to use for generating a _scaffolded_ controller when using `bin/rails generate scaffold`. Defaults to `:scaffold_controller`.
-* `stylesheets` turns on the hook for stylesheets in generators. Used in Rails for when the `scaffold` generator is run, but this hook can be used in other generates as well. Defaults to `true`.
-* `stylesheet_engine` configures the stylesheet engine (for e.g. sass) to be used when generating assets. Defaults to `:css`.
-* `scaffold_stylesheet` creates `scaffold.css` when generating a scaffolded resource. Defaults to `true`.
 * `test_framework` defines which test framework to use. Defaults to `false` and will use minitest by default.
 * `template_engine` defines which template engine to use, such as ERB or Haml. Defaults to `:erb`.
 

guides/source/configuring.md

@@ -357,11 +357,6 @@ create      test/system/blorgh/articles_test.rb
 invoke    helper
 create      app/helpers/blorgh/articles_helper.rb
 invoke      test_unit
-invoke  assets
-invoke    css
-create      app/assets/stylesheets/blorgh/articles.css
-invoke  css
-create    app/assets/stylesheets/scaffold.css
 ```
 
 The first thing that the scaffold generator does is invoke the `active_record`
@@ -427,8 +422,6 @@ end
 This helps prevent conflicts with any other engine or application that may have
 an article resource as well.
 
-Finally, the assets for this resource are generated in one file: `app/assets/stylesheets/blorgh/articles.css`. You'll see how to use these a little later.
-
 You can see what the engine has so far by running `bin/rails db:migrate` at the root
 of our engine to run the migration generated by the scaffold generator, and then
 running `bin/rails server` in `test/dummy`. When you open
@@ -579,9 +572,6 @@ create    test/controllers/blorgh/comments_controller_test.rb
 invoke  helper
 create    app/helpers/blorgh/comments_helper.rb
 invoke    test_unit
-invoke  assets
-invoke    css
-create      app/assets/stylesheets/blorgh/comments.css
 ```
 
 The form will be making a `POST` request to `/articles/:article_id/comments`, which