Allow host app & extensions to make use & extend admin's tailwind cla…

…sses

With this change, the host app and extensions can make use of the
tailwind classes defined in the admin. They can also extend the
tailwind configuration by adding their own classes.

As a requisite for this change, the compiled CSS is now generated
in the host app's assets directory, and tailwindcss-rails needs to
be an explicit dependency for solidus_admin.

The way it works is that we convert the tailwind.config.js file into a
`.js.erb` template. We populate the `content` property by reading from a
`SolidusAdmin::Config#tailwind_content` setting. Through custom
`solidus_admin:tailwindcss:build` and `solidus_admin:tailwindcss:watch` tasks,
we generate the actual tailwind configuration file on the fly.

By default, the `tailwind_content` setting contains both the admin's and the
host app's paths scoped to `solidus_admin` directories, so a host application
is not required to do further configuration. On the other side, extensions can
manually push new paths on an initializer. As solidus_admin's
configuration file requires access to `Rails.root` to create those
defaults, the file must be required after the Rails application is
created.

The solidus_admin's tailwind tasks have been moved to the `lib/tasks` directory
so they can be picked by the `bin/rails` command from within the host app.

When solidus_admin is installed, tailwind is automatically built and the
compiled file is added to the `.gitignore` file. The compilation is also
added as an enhancement for the `assets:precompile` task.

Procfile.dev

@@ -1,2 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-admin_tailwind: cd admin && bundle exec rake solidus_admin:tailwind:watch
+admin_tailwind: bin/rails solidus_admin:tailwindcss:watch

admin/Rakefile

@@ -15,18 +15,3 @@ DummyApp::RakeTasks.new(
 )
 
 task test_app: 'db:reset'
-
-namespace :solidus_admin do
-  namespace :tailwind do
-    task :watch do
-      require "tailwindcss-rails"
-      require "solidus_admin/engine"
-      root = SolidusAdmin::Engine.root
-      system "#{Tailwindcss::Engine.root.join("exe/tailwindcss")} \
-         -i #{root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css")} \
-         -o #{root.join("app/assets/builds/solidus_admin/tailwind.css")} \
-         -c #{root.join("config/solidus_admin/tailwind.config.js")} \
-         --minify -w"
-    end
-  end
-end

admin/config/solidus_admin/tailwind.config.js → admin/config/solidus_admin/tailwind.config.js.erb

@@ -2,10 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/javascript/**/*.js',
-    './app/views/**/*.{erb,haml,html,slim}'
+    <%= SolidusAdmin::Config.tailwind_content.map { "'#{_1}'" }.join(",\n    ") %>
   ],
   theme: {
     extend: {

admin/lib/generators/solidus_admin/install/install_generator.rb

@@ -10,6 +10,14 @@ def install_solidus_core_support
           }
         RUBY
       end
+
+      def ignore_tailwind_build_files
+        append_file(".gitignore", "app/assets/builds/solidus_admin/") if File.exist?(Rails.root.join(".gitignore"))
+      end
+
+      def build_tailwind
+        rake "solidus_admin:tailwindcss:build"
+      end
     end
   end
 end

admin/lib/solidus_admin/configuration.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require 'spree/preferences/configuration'
+
+module SolidusAdmin
+  # Configuration for the admin interface.
+  #
+  # Ensure requiring this file after the Rails application has been created,
+  # as some defaults depend on the application context.
+  class Configuration < Spree::Preferences::Configuration
+    # The list of paths were Tailwind CSS classes are used.
+    #
+    # You can modify this list to include your own paths:
+    #
+    #    SolidusAdmin::Config.tailwind_content << Rails.root.join("app", "my", "custom", "path")
+    #
+    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
+    #
+    # @see https://tailwindcss.com/docs/configuration#content
+    preference :tailwind_content, :array, default: [
+      SolidusAdmin::Engine.root.join("public", "*.html"),
+      SolidusAdmin::Engine.root.join("app", "helpers", "**", "*.rb"),
+      SolidusAdmin::Engine.root.join("app", "assets", "javascripts", "**", "*.js"),
+      SolidusAdmin::Engine.root.join("app", "views", "**", "*.{erb,haml,html,slim}"),
+      Rails.root.join("public", "solidus_admin", "*.html"),
+      Rails.root.join("app", "helpers", "solidus_admin", "**", "*.rb"),
+      Rails.root.join("app", "assets", "javascripts", "solidus_admin", "**", "*.js"),
+      Rails.root.join("app", "views", "solidus_admin", "**", "*.{erb,haml,html,slim}")
+    ]
+  end
+end
+
+SolidusAdmin::Config = SolidusAdmin::Configuration.new

admin/lib/solidus_admin/engine.rb

@@ -4,6 +4,10 @@ module SolidusAdmin
   class Engine < ::Rails::Engine
     isolate_namespace SolidusAdmin
 
+    config.before_initialize do
+      require "solidus_admin/configuration"
+    end
+
     initializer "solidus_admin.assets" do |app|
       app.config.assets.precompile += %w[solidus_admin/application.css]
     end

admin/lib/tasks/tailwindcss.rake

@@ -0,0 +1,39 @@
+namespace :solidus_admin do
+  namespace :tailwindcss do
+    require "tailwindcss-rails"
+
+    def run(args = "")
+      compiled_config = SolidusAdmin::Engine.root.join("config", "solidus_admin", "tailwind.config.js.erb")
+        .then { |path| File.read(path) }
+        .then { |content| ERB.new(content) }
+        .then { |erb| erb.result }
+
+      Tempfile.create("tailwind.config.js") do |config_file|
+        config_file.write(compiled_config) && config_file.rewind
+        system "#{Tailwindcss::Engine.root.join("exe/tailwindcss")} \
+         -i #{SolidusAdmin::Engine.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css")} \
+         -o #{Rails.root.join("app/assets/builds/solidus_admin/tailwind.css")} \
+         -c #{config_file.path} \
+         #{args}"
+      end
+    end
+
+    desc "Build Solidus Admin's TailwindCSS"
+    task build: :environment do
+      run
+    end
+
+    desc <<~DESC
+      Watch and build Solidus Admin's Tailwind CSS on file changes
+
+      It needs to be re-run when SolidusAdmin::Config.tailwind_content is updated
+    DESC
+    task watch: :environment do
+      run("-w")
+    end
+  end
+end
+
+if Rake::Task.task_defined?("assets:precompile")
+  Rake::Task["assets:precompile"].enhance(["solidus_admin:tailwindcss:build"])
+end

admin/solidus_admin.gemspec

@@ -24,4 +24,5 @@ Gem::Specification.new do |s|
   s.required_rubygems_version = '>= 1.8.23'
 
   s.add_dependency 'solidus_core', s.version
+  s.add_dependency 'tailwindcss-rails', '~> 2.0'
 end