From 0133dff6836a6970d0d897e256be01d2ad9a46de Mon Sep 17 00:00:00 2001 From: Elia Schito Date: Fri, 13 Oct 2023 19:04:32 +0200 Subject: [PATCH] elia/twjit: [wip] --- Procfile.dev | 1 - admin/README.md | 1 - .../stylesheets/solidus_admin/application.css | 1 - .../application.tailwind.css.erb | 35 ----- .../solidus_admin/_tailwindcss_cdn.html.erb | 134 ++++++++++++++++++ .../solidus_admin/application.html.erb | 5 +- .../layouts/solidus_admin/preview.html.erb | 1 + admin/config/importmap.rb | 12 ++ .../solidus_admin/tailwind.config.js.erb | 96 ------------- admin/docs/customizing_tailwind.md | 78 ---------- .../install/install_generator.rb | 8 -- .../config/initializers/solidus_admin.rb | 13 -- admin/lib/solidus_admin.rb | 1 - admin/lib/solidus_admin/configuration.rb | 32 ----- admin/lib/solidus_admin/engine.rb | 1 + admin/lib/solidus_admin/tailwindcss.rb | 58 -------- admin/lib/tasks/tailwindcss.rake | 55 ------- bin/sandbox | 2 +- .../stylesheets/solidus_admin/tailwind.css | 1 - 19 files changed, 153 insertions(+), 382 deletions(-) delete mode 100644 admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb create mode 100644 admin/app/views/layouts/solidus_admin/_tailwindcss_cdn.html.erb delete mode 100644 admin/config/solidus_admin/tailwind.config.js.erb delete mode 100644 admin/docs/customizing_tailwind.md delete mode 100644 admin/lib/solidus_admin/tailwindcss.rb delete mode 100644 admin/lib/tasks/tailwindcss.rake delete mode 100644 core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css diff --git a/Procfile.dev b/Procfile.dev index 9abbe4a07eb..6cc41d90b64 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,2 +1 @@ web: env RUBY_DEBUG_OPEN=true bin/rails server -admin_tailwind: bin/rails solidus_admin:tailwindcss:watch diff --git a/admin/README.md b/admin/README.md index f3597311e39..7cc2eb0075e 100644 --- a/admin/README.md +++ b/admin/README.md @@ -4,7 +4,6 @@ A Rails engine that provides an administrative interface to the Solidus ecommerc ## Development -- [Customizing tailwind](docs/customizing_tailwind.md) - [Customizing view components](docs/customizing_view_components.md) - [Customizing the main navigation](docs/customizing_main_navigation.md) diff --git a/admin/app/assets/stylesheets/solidus_admin/application.css b/admin/app/assets/stylesheets/solidus_admin/application.css index 5f62d249eb7..3c91f4a2ba2 100644 --- a/admin/app/assets/stylesheets/solidus_admin/application.css +++ b/admin/app/assets/stylesheets/solidus_admin/application.css @@ -1,3 +1,2 @@ /* - * = require solidus_admin/tailwind.css */ diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb deleted file mode 100644 index 3a4b2990c81..00000000000 --- a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb +++ /dev/null @@ -1,35 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - .body-tiny { - @apply font-sans font-normal text-xs; - } - - .body-tiny-bold { - @apply font-sans font-semibold text-xs; - } - - .body-small { - @apply font-sans font-normal text-sm; - } - - .body-small-bold { - @apply font-sans font-semibold text-sm; - } - - .body-text { - @apply font-sans font-normal text-base; - } - - .body-text-bold { - @apply font-sans font-semibold text-base; - } - - .body-title { - @apply font-sans font-semibold text-xl; - } -} - -<%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %> diff --git a/admin/app/views/layouts/solidus_admin/_tailwindcss_cdn.html.erb b/admin/app/views/layouts/solidus_admin/_tailwindcss_cdn.html.erb new file mode 100644 index 00000000000..49be4e51803 --- /dev/null +++ b/admin/app/views/layouts/solidus_admin/_tailwindcss_cdn.html.erb @@ -0,0 +1,134 @@ + + + + + diff --git a/admin/app/views/layouts/solidus_admin/application.html.erb b/admin/app/views/layouts/solidus_admin/application.html.erb index 9a2b99d122f..30b6a7ba0c4 100644 --- a/admin/app/views/layouts/solidus_admin/application.html.erb +++ b/admin/app/views/layouts/solidus_admin/application.html.erb @@ -1,14 +1,17 @@ - <%= favicon_link_tag 'solidus_admin/favicon.ico' %> + <%= favicon_link_tag "solidus_admin/favicon.ico" %> <%= solidus_admin_title %> <%= stylesheet_link_tag "solidus_admin/application.css", "inter-font", "data-turbo-track": "reload" %> <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %> + <%= render 'layouts/solidus_admin/tailwindcss_cdn' %> + <%= render component("skip_link").new(href: "#main") %> +
diff --git a/admin/app/views/layouts/solidus_admin/preview.html.erb b/admin/app/views/layouts/solidus_admin/preview.html.erb index f2cc8bf6019..055a5aaebe5 100644 --- a/admin/app/views/layouts/solidus_admin/preview.html.erb +++ b/admin/app/views/layouts/solidus_admin/preview.html.erb @@ -5,6 +5,7 @@ <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %> + <%= render 'layouts/solidus_admin/tailwindcss_cdn' %> <%= yield %> diff --git a/admin/config/importmap.rb b/admin/config/importmap.rb index bf13fbf0bcf..9aa31c3894b 100644 --- a/admin/config/importmap.rb +++ b/admin/config/importmap.rb @@ -7,6 +7,18 @@ pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.52.0/dist/index.js" +pin "tailwindcss", to: "https://cdn.tailwindcss.com/3.3.3?plugins=typography,aspect-ratio" +pin "@tailwindcss/aspect-ratio", to: "https://ga.jspm.io/npm:@tailwindcss/aspect-ratio@0.4.2/src/index.js" +pin "@tailwindcss/container-queries", to: "https://ga.jspm.io/npm:@tailwindcss/container-queries@0.1.1/dist/index.js" +pin "@tailwindcss/forms", to: "https://ga.jspm.io/npm:@tailwindcss/forms@0.5.6/src/index.js" +pin "@tailwindcss/typography", to: "https://ga.jspm.io/npm:@tailwindcss/typography@0.5.10/src/index.js" + +pin "mini-svg-data-uri", to: "https://ga.jspm.io/npm:mini-svg-data-uri@1.4.4/index.js" +pin "picocolors", to: "https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js" +pin "tailwindcss/colors", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/colors.js" +pin "tailwindcss/defaultTheme", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/defaultTheme.js" +pin "tailwindcss/plugin", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/plugin.js" + pin "solidus_admin/application", preload: true pin "solidus_admin/utils" pin_all_from SolidusAdmin::Engine.root.join("app/javascript/solidus_admin/controllers"), under: "solidus_admin/controllers" diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb deleted file mode 100644 index b7cdcd6015e..00000000000 --- a/admin/config/solidus_admin/tailwind.config.js.erb +++ /dev/null @@ -1,96 +0,0 @@ -const defaultTheme = require('tailwindcss/defaultTheme') -const plugin = require('tailwindcss/plugin') - -module.exports = { - content: [ - <%= SolidusAdmin::Config.tailwind_content.map { "'#{_1}'" }.join(",\n ") %> - ], - theme: { - extend: { - aria: { - 'current': 'current="true"', - }, - fontFamily: { - sans: ['Inter var', ...defaultTheme.fontFamily.sans], - }, - colors: { - transparent: "transparent", - current: "currentColor", - - // Primary palette - 'solidus-red': "#ef3023", - black: "#222222", - graphite: "#c7ccc7", - 'graphite-light': "#d8dad8", - sand: "#f5f3f0", - white: "#ffffff", - - // Secondary palette - yellow: "#fdc071", - orange: "#f68050", - blue: "#2554b1", - moss: "#2d3925", - forest: "#096756", - midnight: "#163449", - pink: "#f6d7e2", - plum: "#3a0e31", - sky: "#cbdff1", - seafoam: "#c1e0de", - dune: "#e6bf9b", - 'full-black': "#000000", - - // Extra colors (not part of the original palette) - 'papaya-whip': "#f9e3d9", - - // UI Red - red: { - 100: "#f8d6d3", - 200: "#f1ada7", - 300: "#ea8980", - 400: "#e36054", - 500: "#dc3728", - 600: "#b12c20", - 700: "#862219", - 800: "#561610", - 900: "#2b0b08", - }, - - // Grayscale - gray: { - 15: "#fafafa", - 25: "#f5f5f5", - 50: "#f0f0f0", - 100: "#dedede", - 200: "#cfcfcf", - 300: "#bababa", - 400: "#a3a3a3", - 500: "#737373", - 600: "#616161", - 700: "#4a4a4a", - 800: "#333333", - }, - }, - borderRadius: { - 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')", - }, - 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)' - }, - }, - }, - plugins: [ - require('@tailwindcss/forms')({ strategy: 'class' }), - require('@tailwindcss/aspect-ratio'), - require('@tailwindcss/typography'), - require('@tailwindcss/container-queries'), - plugin(({ addVariant }) => addVariant('hidden', '&([hidden])')), - plugin(({ addVariant }) => addVariant('visible', '&:not([hidden])')), - plugin(({ addVariant }) => addVariant('search-cancel', '&::-webkit-search-cancel-button')), - ] -} diff --git a/admin/docs/customizing_tailwind.md b/admin/docs/customizing_tailwind.md deleted file mode 100644 index d35c51fc3bf..00000000000 --- a/admin/docs/customizing_tailwind.md +++ /dev/null @@ -1,78 +0,0 @@ -# Customizing tailwind - -Solidus Admin uses [Tailwind CSS](https://tailwindcss.com/) for styling. The -benefit of using Tailwind is that it allows you to customize the look and feel -of the admin without having to write any CSS. By leveraging utility classes, -you can easily change the colors, fonts, and spacing in use. - -Solidus Admin sets up Tailwind in a way that allows customization. When you -install `solidus_admin`, its compiled CSS file is generated at -`app/assets/builds/solidus_admin/tailwind.css`. As we'll see below, there are -different ways in which you can add your styles to it. There are a couple of -tasks you can run to recompile the CSS file: - -- `bin/rails solidus_admin:tailwindcss:build` - compiles the CSS file once. -- `bin/rails solidus_admin:tailwindcss:watch` - compiles the CSS file and - watches for changes. - -When deploying to production, the build task is automatically added as part of -the assets precompilation process. - -### Adding new paths to Tailwind - -Tailwind generates its CSS by scanning a configured set of paths for CSS -classes. By default, Solidus Admin will add to this list the following globs -from your host application: - -- `app/components/solidus_admin/**/*.rb` -- `app/views/solidus_admin/**/*.{erb,haml,html,slim}` -- `app/helpers/solidus_admin/**/*.rb` -- `app/assets/javascripts/solidus_admin/**/*.js` -- `public/solidus_admin/*.html` - -If that flexibility is not enough, you can add your own paths by appending the -`SolidusAdmin::Config.tailwind_content` setting: - -```ruby -# config/initializers/solidus_admin.rb -SolidusAdmin::Config.tailwind_content << Rails.root.join("app/my/custom/path/**/*.rb") -``` - -> ⚠ Remember to re-run the `build` or `watch` tasks after changing this setting. - -### Adding custom CSS - -If you need advanced Tailwind customization, you can also create your own CSS -file and append it to the Solidus Admin's default one. Be aware that's -[considered a last-resort option](https://tailwindcss.com/docs/reusing-styles) -according to Tailwind's philosophy, and most of the time you should be ok by -making use of the available Tailwind classes. - -In case you need to do it, you can append your CSS file by pushing it to the -`SolidusAdmin.tailwind_stylesheets` array: - -```ruby -# config/initializers/solidus_admin.rb -SolidusAdmin.tailwind_stylesheets << Rails.root.join("app/my/custom/path/my_styles.css") -``` - -> ⚠ Remember to re-run the `build` or `watch` tasks after changing this setting. - -## Acquiring full control over Tailwind configuration - -For very advanced use cases, it's possible to bail out of the Solidus Admin's -managed Tailwind configuration and get a grip on it yourself. This is not -recommended, as it will make your app more brittle to future changes in Solidus -Admin, so do it at your own risk! - -There are a couple of tasks you can run for that: - -- `bin/rails solidus_admin:tailwindcss:override_config` - copies the default - Tailwind configuration file to `config/solidus_admin/tailwind.config.js.erb`. -- `bin/rails solidus_admin:tailwindcss:override_stylesheet` - copies the - default Tailwind stylesheet file to - `app/assets/stylesheets/solidus_admin/application.tailwind.css.erb`. - -Notice that, unlike in a regular Tailwind setup, the config and stylesheet -files are ERB templates. This is because they need to be able to access the -Solidus Admin and application paths. diff --git a/admin/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb index 83d84161c79..1fcaa17b753 100644 --- a/admin/lib/generators/solidus_admin/install/install_generator.rb +++ b/admin/lib/generators/solidus_admin/install/install_generator.rb @@ -20,14 +20,6 @@ def copy_initializer copy_file "config/initializers/solidus_admin.rb" 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 - def install_lookbook return unless options[:lookbook] diff --git a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb index 18d26fd06ec..7083cf0dd05 100644 --- a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb +++ b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb @@ -6,19 +6,6 @@ # 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 index 921a105d38a..7a09f8f2911 100644 --- 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 index e2973ef9bfb..631d6d20567 100644 --- 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 diff --git a/admin/lib/solidus_admin/engine.rb b/admin/lib/solidus_admin/engine.rb index 3ad1f087b07..bd66d11e838 100644 --- a/admin/lib/solidus_admin/engine.rb +++ b/admin/lib/solidus_admin/engine.rb @@ -3,6 +3,7 @@ require "stimulus-rails" require "turbo-rails" require "view_component" +require "tailwindcss-rails" module SolidusAdmin class Engine < ::Rails::Engine diff --git a/admin/lib/solidus_admin/tailwindcss.rb b/admin/lib/solidus_admin/tailwindcss.rb deleted file mode 100644 index dbd8a516edd..00000000000 --- a/admin/lib/solidus_admin/tailwindcss.rb +++ /dev/null @@ -1,58 +0,0 @@ -# frozen_string_literal: true - -require "tailwindcss-rails" -require "fileutils" - -module SolidusAdmin - # @api private - module Tailwindcss - module_function - - def run(args = "") - config_file_path = compile_to_tempfile( - [config_app_path, config_engine_path].find(&:exist?), - "tailwind.config.js" - ) - stylesheet_file_path = compile_to_tempfile( - [stylesheet_app_path, stylesheet_engine_path].find(&:exist?), - "application.tailwind.css" - ) - - system "#{::Tailwindcss::Engine.root.join('exe/tailwindcss')} \ - -i #{stylesheet_file_path} \ - -o #{Rails.root.join('app/assets/builds/solidus_admin/tailwind.css')} \ - -c #{config_file_path} \ - #{args}" - end - - def config_app_path - Rails.root.join("config/solidus_admin/tailwind.config.js.erb") - end - - def config_engine_path - SolidusAdmin::Engine.root.join("config/solidus_admin/tailwind.config.js.erb") - end - - def stylesheet_app_path - Rails.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css.erb") - end - - def stylesheet_engine_path - SolidusAdmin::Engine.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css.erb") - end - - def compile_to_tempfile(erb_path, name) - Rails.root.join("tmp/solidus_admin/#{name}").tap do |file| - content = ERB.new(File.read(erb_path)).result - - file.dirname.mkpath - file.write(content) - end - end - - def copy_file(src, dst) - FileUtils.mkdir_p(File.dirname(dst)) - FileUtils.cp(src, dst) - end - end -end diff --git a/admin/lib/tasks/tailwindcss.rake b/admin/lib/tasks/tailwindcss.rake deleted file mode 100644 index 2b19ad2a95a..00000000000 --- a/admin/lib/tasks/tailwindcss.rake +++ /dev/null @@ -1,55 +0,0 @@ -# frozen_string_literal: true - -namespace :solidus_admin do - namespace :tailwindcss do - require "solidus_admin/tailwindcss" - - desc "Build Solidus Admin's Tailwind's css" - task build: :environment do - SolidusAdmin::Tailwindcss.run - end - - desc <<~DESC - Watch and build Solidus Admin's Tailwind css on file changes - - It needs to be re-run whenever: - - - `SolidusAdmin::Config.tailwind_content` is updated - - `SolidusAdmin::Config.tailwind_stylesheets` is updated - - `bin/rails solidus_admin:tailwindcss:override_config` is run - - `bin/rails solidus_admin:tailwindcss:override_stylesheet` is run - - The override files are updated - DESC - task watch: :environment do - SolidusAdmin::Tailwindcss.run("-w") - end - - desc <<~DESC - Override Solidus Admin's Tailwindcss configuration - - It copies the config file from the engine to the app, so it can be customized. - DESC - task override_config: :environment do - SolidusAdmin::Tailwindcss.copy_file( - SolidusAdmin::Tailwindcss.config_engine_path, - SolidusAdmin::Tailwindcss.config_app_path - ) - end - - desc <<~DESC - Override Solidus Admin's Tailwind's stylesheet - - It copies the stylesheet file from the engine to the app, so it can be customized. - DESC - task override_stylesheet: :environment do - SolidusAdmin::Tailwindcss.copy_file( - SolidusAdmin::Tailwindcss.stylesheet_engine_path, - SolidusAdmin::Tailwindcss.stylesheet_app_path - ) - end - end -end - -if Rake::Task.task_defined?("assets:precompile") - Rake::Task["assets:precompile"].enhance(["solidus_admin:tailwindcss:build"]) -end diff --git a/bin/sandbox b/bin/sandbox index 86878c6440b..a8a391f855b 100755 --- a/bin/sandbox +++ b/bin/sandbox @@ -41,7 +41,7 @@ echo "~~~> Removing the old sandbox" rm -rf ./sandbox echo "~~~> Creating a pristine Rails app" -rails new sandbox \ +rails _7.0.8_ new sandbox \ --database="$RAILSDB" \ --skip-git \ --skip-keeps \ diff --git a/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css b/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css deleted file mode 100644 index 1641b24ebcd..00000000000 --- a/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css +++ /dev/null @@ -1 +0,0 @@ -/* Placeholder for compiled tailwind.css file */