Merge pull request #481 from rails/flavorjones-better-tailwind-application-css-loc

Rename application.tailwind.css to application.css

Author: flavorjones

CHANGELOG.md

@@ -1,56 +1,39 @@
 ## next / unreleased
 
-## v4.0.0.rc3 / 2025-01-27
-
-Everything in v4.0.0.rc2, plus ...
-
-General changes:
-
-- Remove the Inter font assets from the gem. @EricGusmao
-- If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling. (This was incompletely fixed in RC2.)
-
-
-## v4.0.0.rc2 / 2025-01-26
-
-Everything in v4.0.0.rc1, plus ...
-
-General changes:
-
-- The location of `application.tailwind.css` has moved from `app/assets/stylesheets` to `app/assets/tailwind`. If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling.
+## next rc / unreleased
 
-Changes to the `tailwindcss:install` task:
-
-- The "tailwind" stylesheet link tag will only be added to the application layout if Propshaft isn't in use and already handling `app/assets/build/tailwind.css`. Previously it was always injected, resulting in the tag being rendered twice if Propshaft was in use.
-
-Changes to the `tailwindcss:upgrade` task:
-
-- The "tailwind" stylesheet link tag will be removed if Propshaft is in use and already handling `app/assets/build/tailwind.css`.
-- The file `application.tailwind.css` will be moved from `app/assets/stylesheets` to `app/assets/tailwind`.
+- The input file `app/assets/tailwind/application.tailwind.css` has been renamed to `app/assets/tailwind/application.css`.
 
+Thanks to @brunoprietog for feedback and advice.
 
-## v4.0.0.rc1 / 2025-01-23
+## v4.0.0.rc3 / 2025-01-27
 
 ### Upgrade to Tailwind CSS v4
 
 General changes:
 
 - Dependency on `tailwindcss-ruby` set to `~> 4.0`.
 - The location of (optional) `postcss.config.js` has moved from the `config/` directory to the app root.
+- The location of `application.tailwind.css` has moved from `app/assets/stylesheets` to `app/assets/tailwind`. If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling.
+- The Inter font is no longer packaged with the gem.
 
 Changes to the `tailwindcss:install` task:
 
 - The `tailwindcss:install` task no longer installs `config/tailwind.config.js`.
-- The Inter font is no longer packaged with the gem.
-- Some Tailwind class names are updated for v4.
+- The Inter font is no longer configured in the application layout.
+- Some Tailwind class names in the ERB templates are updated for v4.
+- The "tailwind" stylesheet link tag will only be added to the application layout if Propshaft isn't in use and already handling `app/assets/build/tailwind.css`. Previously it was always injected, resulting in the tag being rendered twice if Propshaft was in use.
 
 New task `tailwindcss:upgrade` upgrades many apps cleanly:
 
 - Cleans up some things in the generated `config/tailwind.config.js`.
 - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
-- Removes references to the Inter font from the application layout.
+- Removes configuration for the Inter font from the application layout.
 - If present, moves `config/postcss.config.js` to the root directory.
+- The "tailwind" stylesheet link tag will be removed if Propshaft is in use and already handling `app/assets/build/tailwind.css`.
+- The input file `application.tailwind.css` will be moved from `app/assets/stylesheets` to `app/assets/tailwind`.
 
-Thanks to @EricGusmao and @excid3 for their help and advice on this work.
+Thanks to @EricGusmao, @patriciomacadden, and @excid3 for their feedback, contributions, and advice on the v4 release.
 
 
 ## v3.3.1 / 2025-01-23

README.md

@@ -102,7 +102,7 @@ Here's what the upgrade task does:
 
 - Cleans up some things in the generated `config/tailwind.config.js`.
 - If present, moves `config/postcss.config.js` to the root directory.
-- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
+- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`.
 - Removes unnecessary `stylesheet_link_tag "tailwindcss"` tags from the application layout.
 - Removes references to the Inter font from the application layout.
 - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
@@ -119,22 +119,22 @@ $ bin/rails tailwindcss:upgrade
         gsub    app/views/layouts/application.html.erb
   Remove unnecessary stylesheet_link_tag from application layout
         gsub    app/views/layouts/application.html.erb
-  Moving application.tailwind.css to /home/user/myapp/app/assets/tailwind
-      create    app/assets/tailwind/application.tailwind.css
+  Moving /home/user/myapp/app/assets/stylesheets/application.tailwind.css to /home/user/myapp/app/assets/tailwind/application.css
+      create    app/assets/tailwind/application.css
       remove    app/assets/stylesheets/application.tailwind.css
 10.9.0
   Running the upstream Tailwind CSS upgrader
          run    npx @tailwindcss/upgrade@next --force --config /home/user/myapp/config/tailwind.config.js from "."
 ≈ tailwindcss v4.0.0
 │ Searching for CSS files in the current directory and its subdirectories…
-│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.css`
+│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.css`
 │ Migrating JavaScript configuration files…
 │ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS
 │   configuration format, so your CSS has been updated to load your existing configuration file.
 │ Migrating templates…
 │ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
 │ Migrating stylesheets…
-│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
+│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.css`
 │ ↳ No PostCSS config found, skipping migration.
 │ Updating dependencies…
 │ Could not detect a package manager. Please manually update `tailwindcss` to v4.
@@ -167,11 +167,11 @@ We'll try to improve the upgrade process over time, but for now you may need to
 
 ### Configuration and commands
 
-#### Input file: `app/assets/tailwind/application.tailwind.css`
+#### Input file: `app/assets/tailwind/application.css`
 
-The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.tailwind.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
+The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
 
-⚠ The location of this file changed in v4, from `app/assets/stylesheets` to `app/assets/tailwind`. The `tailwindcss:upgrade` task will move it for you.
+⚠ The location of this file changed in v4, from `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`. The `tailwindcss:upgrade` task will move it for you.
 
 #### Output file: `app/assets/builds/tailwind.css`
 

lib/install/application.tailwind.css renamed to lib/install/application.css

@@ -1,6 +1,6 @@
 APPLICATION_LAYOUT_PATH             = Rails.root.join("app/views/layouts/application.html.erb")
 CENTERING_CONTAINER_INSERTION_POINT = /^\s*<%= yield %>/.freeze
-TAILWIND_ASSET_PATH                 = Rails.root.join("app/assets/tailwind")
+TAILWIND_ASSET_PATH                 = Rails.root.join("app/assets/tailwind/application.css")
 
 if APPLICATION_LAYOUT_PATH.exist?
   unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
@@ -32,9 +32,9 @@
   append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
 end
 
-unless TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
-  say "Add default #{TAILWIND_ASSET_PATH}/application.tailwind.css"
-  copy_file "#{__dir__}/application.tailwind.css", TAILWIND_ASSET_PATH.join("application.tailwind.css")
+unless TAILWIND_ASSET_PATH.exist?
+  say "Add default #{TAILWIND_ASSET_PATH}"
+  copy_file "#{__dir__}/application.css", TAILWIND_ASSET_PATH
 end
 
 if Rails.root.join("Procfile.dev").exist?

lib/install/install_tailwindcss.rb

@@ -1,8 +1,8 @@
 TAILWIND_CONFIG_PATH = Rails.root.join("config/tailwind.config.js")
 APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
 POSTCSS_CONFIG_PATH = Rails.root.join("config/postcss.config.js")
-OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets")
-TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
+OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind/application.css")
 
 unless TAILWIND_CONFIG_PATH.exist?
   say "Default tailwind.config.js is missing!", :red
@@ -38,10 +38,10 @@
   say %(        Please check your layouts and remove any "inter-font" stylesheet links.)
 end
 
-if OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
-  say "Moving application.tailwind.css to #{TAILWIND_ASSET_PATH}"
-  copy_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css"), TAILWIND_ASSET_PATH.join("application.tailwind.css")
-  remove_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css")
+if OLD_TAILWIND_ASSET_PATH.exist?
+  say "Moving #{OLD_TAILWIND_ASSET_PATH} to #{TAILWIND_ASSET_PATH}"
+  copy_file OLD_TAILWIND_ASSET_PATH, TAILWIND_ASSET_PATH
+  remove_file OLD_TAILWIND_ASSET_PATH
 end
 
 if system("npx --version")

lib/install/upgrade_tailwindcss.rb

@@ -8,7 +8,7 @@ def compile_command(debug: false, **kwargs)
 
         command = [
           Tailwindcss::Ruby.executable(**kwargs),
-          "-i", rails_root.join("app/assets/tailwind/application.tailwind.css").to_s,
+          "-i", rails_root.join("app/assets/tailwind/application.css").to_s,
           "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
         ]
 

lib/tailwindcss/commands.rb

@@ -37,7 +37,7 @@ bin/rails tailwindcss:install
 
 # TEST: tailwind was installed correctly
 grep -q "<main class=\"container" app/views/layouts/application.html.erb
-test -a app/assets/tailwind/application.tailwind.css
+test -a app/assets/tailwind/application.css
 
 # TEST: rake tasks don't exec (#188)
 cat <<EOF >> Rakefile
@@ -46,7 +46,7 @@ task :still_here do
 end
 EOF
 
-cat >> app/assets/tailwind/application.tailwind.css <<EOF
+cat >> app/assets/tailwind/application.css <<EOF
 @theme { --color-special: #abc12399; }
 EOF
 
@@ -66,7 +66,7 @@ grep -q "Show this post" app/views/posts/index.html.erb
 bin/rails tailwindcss:build[verbose]
 grep -q "py-2" app/assets/builds/tailwind.css
 
-# TEST: contents include application.tailwind.css
+# TEST: contents include application.css directives
 grep -q "#abc12399" app/assets/builds/tailwind.css
 
 echo "OK"

test/integration/user_install_test.sh

@@ -80,7 +80,7 @@ test   -a postcss.config.js
 
 # TEST: moving application.tailwind.css
 test ! -a app/assets/stylesheets/application.tailwind.css
-test   -a app/assets/tailwind/application.tailwind.css
+test   -a app/assets/tailwind/application.css
 
 # generate CSS
 bin/rails tailwindcss:build[verbose]