Package the tailwindcss binary executable (#96)

* feat: package tailwindcss binary executables with the gem

See rakelib/package.rake for details.

* ci: verify that the tailwindcss binaries work as expected

* provide license for redistributed software

* Ignore exe properly

* Drop old machinery

* Switch to generators and bundling style production

* Do initial run on install

* Update README.md

* Latest version

Co-authored-by: David Heinemeier Hansson <[email protected]>

Author: flavorjones

.github/workflows/gem-install.yml

@@ -0,0 +1,64 @@
+name: Native Gems
+on: [push, pull_request]
+jobs:
+  package:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: ["x64-mingw32", "x86_64-darwin", "x86_64-linux"]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+          bundler: latest
+          bundler-cache: true
+      - run: "bundle exec rake gem:${{matrix.platform}}"
+      - uses: actions/upload-artifact@v2
+        with:
+          name: gem-${{matrix.platform}}
+          path: pkg
+          retention-days: 1
+
+  linux-install:
+    needs: ["package"]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+      - uses: actions/download-artifact@v2
+        with:
+          name: gem-x86_64-linux
+          path: pkg
+      - run: "gem install pkg/tailwindcss-rails-*.gem"
+      - run: "tailwindcss --help"
+
+  darwin-install:
+    needs: ["package"]
+    runs-on: macos-latest
+    steps:
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+      - uses: actions/download-artifact@v2
+        with:
+          name: gem-x86_64-darwin
+          path: pkg
+      - run: "gem install pkg/tailwindcss-rails-*.gem"
+      - run: "tailwindcss --help"
+
+  windows-install:
+    needs: ["package"]
+    runs-on: windows-latest
+    steps:
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+      - uses: actions/download-artifact@v2
+        with:
+          name: gem-x64-mingw32
+          path: pkg
+      - run: "gem install pkg/tailwindcss-rails-*.gem"
+      - run: "tailwindcss --help"

.gitignore

@@ -12,4 +12,5 @@
 .byebug_history
 *.gem
 .idea/
-**/tmp/
+**/tmp/
+/exe/*/tailwindcss

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    tailwindcss-rails (1.0.0)
+    tailwindcss-rails (2.0.0)
       railties (>= 6.0.0)
 
 GEM

LICENSE-DEPENDENCIES

@@ -0,0 +1,26 @@
+tailwindcss-rails may redistribute executables from the https://github.com/tailwindlabs/tailwindcss project
+
+The license for that software can be found at https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE which is reproduced here for your convenience:
+
+    MIT License
+    
+    Copyright (c) Adam Wathan <[email protected]>
+    Copyright (c) Jonathan Reinink <[email protected]>
+    
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+    
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+    
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.

README.md

@@ -2,65 +2,28 @@
 
 [Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
 
-This gem gives access to the standard Tailwind CSS framework configured for dark mode, forms, aspect-ratio, typography, and the Inter font via the asset pipeline using Sprockets (and soon [Propshaft](https://github.com/rails/propshaft)). 
+This gem wraps [the standalone executable version](https://tailwindcss.com/blog/standalone-cli) of the Tailwind CSS 3 framework. These executables are platform specific, but the correct gem will automatically be picked for your platform. Supported platforms are Linux x64, macOS arm64, macOS x64, and Windows x64.
 
-If you need to customize Tailwind, you will need to install it under a full JavaScript bundling setup, such as [cssbundling-rails](https://github.com/rails/cssbundling-rails). This gem was specifically designed not to require a Node.js environment. If you're already using such an environment, you won't need this gem.
+You can customize the Tailwind build through the `config/tailwind.config.js` file, just like you would if Tailwind was running in a traditional node installation. All the first-party plugins are supported.
 
-Production-mode purging of unused css class names is provided by a Sprockets compressor built into this gem. This compressor ensures that only the css classes used by files in `app/views` and `app/helpers` are included. In development mode, the full 7mb+ Tailwind stylesheet is loaded.
+The installer will create your Tailwind input file in `app/assets/stylesheets/application.tailwind.css`. This is where you import the plugins you want to use, and where you can setup your custom `@apply` rules. When you run `rails tailwindcss:build`, this input file will be used to generate the output in `app/assets/builds/tailwind.css`. That's the output CSS that you'll include in your app (the installer automatically configures this, alongside the Inter font as well).
 
+If you need to use a custom input or output file, you can run `bundle exec tailwindcss` to access the platform-specific executable, and give it your own build options.
 
-## Installation
-
-1. Run `./bin/bundle add tailwindcss-rails`
-2. Run `./bin/rails tailwindcss:install`
-
-The last step adds the purger compressor to `config/environments/production.rb`. This ensures that when `assets:precompile` is called during deployment that the unused class names are not included in the tailwind output css used by the app. It also adds a `stylesheet_link_tag "tailwind"` and `stylesheet_link_tag "inter-font"` to your `app/views/layouts/application.html.erb` file.
-
-You can do these things yourself, if you've changed the default setup.
-
-
-## Purging in production
-
-The Tailwind CSS framework starts out as a massive file, which gives you all the combinations of utility classes for development, but you wouldn't want to ship all those unused classes in production. So the Sprockets compressor included in this gem is used to purge the tailwind file from all those unused classes for production.
-
-Note: This compressor is currently not compatible with the default Sprockets cache system due to the fact its output depends on files outside of Sprockets (all the files observed for utility class name usage), so this cache is disabled in production. If you need to disable it in other deployed environments, add the following to that environment configuration file:
+When you're developing your application, you want to run Tailwind in watch mode, so changes are automatically reflected in the generated CSS output. You can do this either by running `rails tailwindcss:watch` as a separate process, or by running `./bin/dev` which uses [foreman](https://github.com/ddollar/foreman) to starts both the Tailwind watch process and the rails server in development mode.
 
-```ruby
-Rails.application.config.assets.configure do |env|
-  env.cache = ActiveSupport::Cache.lookup_store(:null_store)
-end
-```
 
+## Installation
 
-## Configuration
-
-If you need to customize what files are searched for class names when using the asset pipeline, you need to replace the compressor line with something like:
-
-```ruby
-  config.assets.css_compressor = Tailwindcss::Compressor.new(files_with_class_names: Rails.root.glob("app/somewhere/**/*.*"))
-```
-
-By default, the CSS purger will only operate on the tailwind css file included with this gem. If you want to use it more broadly:
-
-```ruby
-  config.assets.css_compressor = Tailwindcss::Compressor.new(only_purge: %w[ tailwind and_my_other_css_file ])
-```
-
-
-## Tailwind versions
-
-The Tailwind CSS main file that's being used before purging consists of these versions:
+With Rails 7 you can generate a new application preconfigured with Tailwind by using `--css tailwind`. If you're adding Tailwind later, you need to:
 
-* @tailwindcss/aspect-ratio 0.2.1
-* @tailwindcss/forms 0.3.3
-* @tailwindcss/typography 0.4.1
-* autoprefixer 10.3.1
-* tailwindcss 2.2.15
+1. Run `./bin/bundle add tailwindcss-rails`
+2. Run `./bin/rails tailwindcss:install`
 
 
-## Compatibility with Tailwind 3.0
+## Building in production
 
-This gem is not yet compatible with the JIT approach taken with Tailwind 3.0. We're working with the team on an approach that would bring compatibility, but at the moment you'd need to use [cssbundling-rails](https://github.com/rails/cssbundling-rails/) (and thus bring Node into your app) in order to use 3.0.
+The `tailwindcss:build` is automatically attached to `assets:precompile`, so before the asset pipeline digests the files, the Tailwind output will be generated.
 
 
 ## Conflict with sassc-rails

bin/release

@@ -14,6 +14,9 @@ git commit -m "Bump version for $VERSION"
 git push
 git tag v$VERSION
 git push --tags
-gem build tailwindcss-rails.gemspec
-gem push "tailwindcss-rails-$VERSION.gem" --host https://rubygems.org
-rm "tailwindcss-rails-$VERSION.gem"
+
+rake package
+for gem in pkg/tailwindcss-rails-$VERSION*.gem ; do
+  gem push "$gem" --host https://rubygems.org
+  rm "$gem"
+done

exe/tailwindcss

@@ -0,0 +1,20 @@
+#! /usr/bin/env ruby
+# because rubygems shims assume a gem's executables are Ruby
+
+require "shellwords"
+
+platform_dir = Dir.glob(File.join(__dir__, "*")).select do |f|
+  File.directory?(f) && Gem::Platform.match(File.basename(f))
+end.first
+if platform_dir.nil?
+  raise "Cannot find the tailwindcss executable in #{__dir__} (1)"
+end
+
+exe_path = File.join(platform_dir, "tailwindcss")
+if !File.exist?(exe_path)
+  raise "Cannot find the tailwindcss executable in #{__dir__} (2)"
+end
+
+command = Shellwords.join([exe_path, ARGV].flatten)
+puts "+ #{command}"
+exec(command)

lib/install/Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: rails tailwindcss:watch

lib/install/application.tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/

lib/install/dev

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+if ! command -v foreman &> /dev/null
+then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+foreman start -f Procfile.dev

tailwind.config.js renamed to lib/install/tailwind.config.js

@@ -2,6 +2,11 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   darkMode: 'media',
+  content: [
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*'
+  ],  
   theme: {
     extend: {
       fontFamily: {

lib/install/tailwindcss.rb

@@ -3,20 +3,50 @@
 if APPLICATION_LAYOUT_PATH.exist?
   say "Add Tailwindcss include tags and container element in application layout"
   insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
-    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
-    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
   ERB
   insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(    <main class="container mx-auto mt-28 px-5 flex">\n  ), before: /^\s*<%= yield/
   insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n    </main>),  after: /^\s*<%= yield %>/
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %> and <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
+  say %(        Add <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
 end
 
-# No longer included by default in Rails 7, but for earlier versions of Rails
-if (scaffolds_css_path = Rails.root.join("app/assets/stylesheets/scaffolds.scss")).exist?
-  remove_file scaffolds_css_path
+say "Build into app/assets/builds"
+empty_directory "app/assets/builds"
+keep_file "app/assets/builds"
+
+if (sprockets_manifest_path = Rails.root.join("app/assets/config/manifest.js")).exist?
+  append_to_file sprockets_manifest_path, %(//= link_tree ../builds\n)
+end
+
+if Rails.root.join(".gitignore").exist?
+  append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
+end
+
+unless Rails.root.join("config/tailwind.config.js").exist?
+  say "Add default config/tailwindcss.config.js"
+  copy_file "#{__dir__}/tailwind.config.js", "config/tailwind.config.js"
+end
+
+unless Rails.root.join("app/assets/stylesheets/application.tailwind.css").exist?
+  say "Add default app/assets/stylesheets/application.tailwind.css"
+  copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/application.tailwind.css"
+end
+
+if Rails.root.join("Procfile.dev").exist?
+  append_to_file "Procfile.dev", "css: rails tailwindcss:watch\n"
+else
+  say "Add default Procfile.dev"
+  copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
+
+  say "Ensure foreman is installed"
+  run "gem install foreman"
 end
 
-say "Turn on purging of unused css classes in production"
-gsub_file Rails.root.join("config/environments/production.rb"), /^\s+#?\s+config.assets.css_compressor =.*$/, %(  config.assets.css_compressor = :purger)
+say "Add bin/dev to start foreman"
+copy_file "#{__dir__}/dev", "bin/dev"
+chmod "bin/dev", 0755, verbose: false
+
+say "Compile initial Tailwind build"
+run "rails tailwindcss:build"

lib/tailwindcss/compressor.rb

@@ -1,26 +1,15 @@
 require "rails"
-require "tailwindcss/compressor"
 
 module Tailwindcss
   class Engine < ::Rails::Engine
-    initializer "tailwindcss.compressor" do
-      Sprockets.register_compressor "text/css", :purger, Tailwindcss::Compressor
-    end
-
     initializer "tailwindcss.assets" do
-      Rails.application.config.assets.precompile += %w( tailwind.css inter-font.css )
+      Rails.application.config.assets.precompile += %w( inter-font.css )
     end
 
     initializer "tailwindcss.disable_generator_stylesheets" do
       Rails.application.config.generators.stylesheets = false
     end
 
-    initializer "tailwindcss.disable_assets_cache" do
-      Rails.application.config.assets.configure do |env|
-        env.cache = ActiveSupport::Cache.lookup_store(:null_store)
-      end if Rails.env.production?
-    end
-
      config.app_generators do |g|
        g.template_engine :tailwindcss
      end