Provide a prebuilt solidus_admin CSS file

This configuration is a vanilla TW build removing the need for temporary files and ERB tags. Also relegates the dependency on tailwindcss-rails only to the development of the gem itself. By relying on a known target path for the build it will be easy to setup a local TW build that will override that path in the host Rails application, leaving the implementors free to go with whatever JS/CSS builder they want.
solidusio · Dec 18, 2023 · b7ecf4e · b7ecf4e
1 parent 3fe73ad
commit b7ecf4e
Show file tree

Hide file tree

Showing 22 changed files with 67 additions and 278 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,10 +1,12 @@
 {
   "extends": "eslint:recommended",
   "ignorePatterns": [
+    "*tailwind.config.js",
     "**/spec",
     "**/vendor",
     "**/node_modules",
     "sandbox",
+    "coverage",
     "core/doc",
     "tmp"
   ],

diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,4 @@ node_modules
 yarn.lock
 package-lock.json
 .env
+/admin/app/assets/builds
diff --git a/Gemfile b/Gemfile
@@ -54,6 +54,7 @@ end
 
 group :admin do
   gem 'solidus_admin', path: 'admin', require: false
+  gem 'tailwindcss-rails', '~> 2.0', require: false
   gem 'axe-core-rspec', '~> 4.7', require: false
   gem 'axe-core-capybara', '~> 4.7', require: false
 end

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,2 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-admin_tailwind: bin/rails solidus_admin:tailwindcss:watch
+admin_tailwind: bundle exec rake -C admin tailwindcss:watch
diff --git a/admin/Rakefile b/admin/Rakefile
@@ -7,6 +7,32 @@ require 'rspec/core/rake_task'
 require 'spree/testing_support/dummy_app/rake_tasks'
 require 'bundler/gem_tasks'
 
+namespace :tailwindcss do
+  tailwindcss_command = [
+    "tailwindcss",
+    "--content",
+    "#{__dir__}/{app/helpers,app/views,app/components,app/assets/javascripts,spec/components/previews}/**/*",
+    "--config",
+    "#{__dir__}/config/tailwind.config.js",
+    "--input",
+    "#{__dir__}/app/assets/stylesheets/solidus_admin/application.tailwind.css",
+    "--output",
+    "#{__dir__}/app/assets/builds/solidus_admin/tailwind.css",
+  ]
+
+  desc 'Build Tailwind CSS'
+  task :build do
+    sh tailwindcss_command.shelljoin
+  end
+
+  desc 'Watch Tailwind CSS'
+  task :watch do
+    sh (tailwindcss_command + ['--watch']).shelljoin
+  end
+end
+
+task build: 'tailwindcss:build'
+
 RSpec::Core::RakeTask.new
 task default: :spec
 

diff --git a/admin/app/assets/builds/.keep b/admin/app/assets/builds/.keep
diff --git a/admin/app/assets/config/solidus_admin_manifest.js b/admin/app/assets/config/solidus_admin_manifest.js
@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_tree ../builds
 //= link_tree ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../components .js
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css
@@ -0,0 +1,4 @@
+@import url("https://rsms.me/inter/inter.css");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
diff --git a/admin/app/views/layouts/solidus_admin/application.html.erb b/admin/app/views/layouts/solidus_admin/application.html.erb
@@ -8,7 +8,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag SolidusAdmin::Config.theme_path(session[:admin_light_theme]), media: '(prefers-color-scheme: light)', "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag SolidusAdmin::Config.theme_path(session[:admin_dark_theme]), media: '(prefers-color-scheme: dark)', "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>

diff --git a/admin/app/views/layouts/solidus_admin/preview.html.erb b/admin/app/views/layouts/solidus_admin/preview.html.erb
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <%= stylesheet_link_tag "solidus_admin/application.css", "inter-font", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
   </head>
   <body class="p-3">

diff --git a/...nfig/solidus_admin/tailwind.config.js.erb → admin/config/tailwind.config.js b/...nfig/solidus_admin/tailwind.config.js.erb → admin/config/tailwind.config.js
@@ -1,27 +1,28 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 const plugin = require('tailwindcss/plugin')
+const adminRoot = __dirname.replace(/\/config$/, '')
 
 module.exports = {
   content: [
-    <%= SolidusAdmin::Config.tailwind_content.map { "'#{_1}'" }.join(",\n    ") %>
+    `${adminRoot}/{app/helpers,app/views,app/components,app/assets/javascripts,spec/components/previews}/**/*`,
   ],
   theme: {
     extend: {
       aria: {
-        'current': 'current="true"',
+        current: 'current="true"',
       },
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
       colors: {
         transparent: "transparent",
         current: "currentColor",
 
         // Primary palette
-        'solidus-red': "#ef3023",
+        "solidus-red": "#ef3023",
         black: "#222222",
         graphite: "#c7ccc7",
-        'graphite-light': "#d8dad8",
+        "graphite-light": "#d8dad8",
         sand: "#f5f3f0",
         white: "#ffffff",
 
@@ -37,10 +38,10 @@ module.exports = {
         sky: "#cbdff1",
         seafoam: "#c1e0de",
         dune: "#e6bf9b",
-        'full-black': "#000000",
+        "full-black": "#000000",
 
         // Extra colors (not part of the original palette)
-        'papaya-whip': "#f9e3d9",
+        "papaya-whip": "#f9e3d9",
 
         // UI Red
         red: {
@@ -71,45 +72,45 @@ module.exports = {
         },
       },
       borderRadius: {
-        sm: '4px',
+        sm: "4px",
       },
       backgroundImage: {
-        'arrow-right-up-line': "url('solidus_admin/arrow_right_up_line.svg')",
-        'arrow-down-s-fill-gray-700': "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
-        'arrow-down-s-fill-red-400': "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
+        "arrow-right-up-line": "url('solidus_admin/arrow_right_up_line.svg')",
+        "arrow-down-s-fill-gray-700": "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
+        "arrow-down-s-fill-red-400": "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
       },
       boxShadow: {
-        sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
-        base: '0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)'
+        sm: "0px 1px 2px 0px rgba(0, 0, 0, 0.04)",
+        base: "0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)",
       },
     },
   },
   plugins: [
-    require('@tailwindcss/forms')({ strategy: 'class' }),
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
     plugin(({ addVariant, addBase, addComponents, theme }) => {
       // Support the "hidden" attribute
-      addVariant('hidden', '&([hidden])')
-      addVariant('visible', '&:not([hidden])')
+      addVariant("hidden", "&([hidden])")
+      addVariant("visible", "&:not([hidden])")
 
       // Support the "search-cancel" pseudo-element
-      addVariant('search-cancel', '&::-webkit-search-cancel-button')
+      addVariant("search-cancel", "&::-webkit-search-cancel-button")
 
       // Reset the <summary> marker
       addBase({
-        'summary::-webkit-details-marker': { display: 'none' },
-        'summary::marker': { display: 'none' },
-        'summary': { listStyle: 'none' },
+        "summary::-webkit-details-marker": { display: "none" },
+        "summary::marker": { display: "none" },
+        summary: { listStyle: "none" },
       })
 
       // Add a text style for links
       addComponents({
-        '.body-link': {
-          color: theme('colors.blue'),
-          '&:hover': {
-            textDecoration: 'underline',
+        ".body-link": {
+          color: theme("colors.blue"),
+          "&:hover": {
+            textDecoration: "underline",
           },
         },
       })

diff --git a/admin/docs/customizing_tailwind.md b/admin/docs/customizing_tailwind.md
diff --git a/admin/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb
@@ -24,10 +24,6 @@ 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
-
       def install_lookbook
         return unless options[:lookbook]
 

diff --git a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt
@@ -6,19 +6,6 @@ SolidusAdmin::Config.configure do |config|
   # It needs to be a path to an image file accessible by Sprockets.
   # config.logo_path = "my_own_logo.svg"
 
-  # Add custom paths for TailwindCSS to scan for styles. By default, it already
-  # includes the following paths:
-  # - public/solidus_admin/*.html
-  # - app/helpers/solidus_admin/**/*.rb
-  # - app/assets/javascripts/solidus_admin/**/*.js
-  # - app/views/solidus_admin/**/*.{erb,haml,html,slim}
-  # - app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}
-  #
-  # config.tailwind_content << Rails.root.join("app/my/custom/path/**.rb")
-
-  # Append custom stylesheets to be compiled by TailwindCSS.
-  # config.tailwind_stylesheets << Rails.root.join("app/my/custom/path/style.css")
-
   # Add custom folder paths to watch for changes to trigger a cache sweep forcing a
   # regeneration of the importmap.
   # config.importmap_cache_sweepers << Rails.root.join("app/javascript/my_admin_components")

diff --git a/admin/lib/solidus_admin.rb b/admin/lib/solidus_admin.rb
@@ -8,7 +8,6 @@ module SolidusAdmin
   require "solidus_admin/importmap"
   require "solidus_admin/main_nav_item"
   require "solidus_admin/preview"
-  require "solidus_admin/tailwindcss"
 
   require "solidus_admin/configuration"
   require "solidus_admin/engine"

diff --git a/admin/lib/solidus_admin/configuration.rb b/admin/lib/solidus_admin/configuration.rb
@@ -17,38 +17,6 @@ class Configuration < Spree::Preferences::Configuration
     # The default value is the Solidus logo that lives in the solidus_core gem.
     preference :logo_path, :string, default: "logo/solidus.svg"
 
-    # 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: [
-      "#{ENGINE_ROOT}/app/helpers/**/*.rb",
-      "#{ENGINE_ROOT}/app/assets/javascripts/**/*.js",
-      "#{ENGINE_ROOT}/app/views/**/*.erb",
-      "#{ENGINE_ROOT}/app/components/**/*.{rb,erb,js}",
-      "#{ENGINE_ROOT}/spec/components/previews/**/*.{erb,rb}",
-
-      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}"),
-      Rails.root&.join("app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}")
-    ].compact
-
-    # List of Tailwind CSS files to be combined into the final stylesheet.
-    #
-    # You can modify this list to include your own files:
-    #
-    #   SolidusAdmin::Config.tailwind_stylesheets << Rails.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css")
-    #
-    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
-    preference :tailwind_stylesheets, :array, default: []
-
     # List of paths to watch for changes to trigger a cache sweep forcing a regeneration of the importmap.
     #
     # @see https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test