simple_form_tailwind_css 0.0.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b73ad445d1750d1d2ee3e739191e13faf3810ffb21cd4b70b950ea1231c496fe
-  data.tar.gz: 837eecadfea116d27a355f6ee87d6466cae2d58b6a9737cb15a32b88af3a6bc0
+  metadata.gz: 8d0537cd908d4ed47ec04dace25a9debe8ddf599170ba4b2be4491315e04c876
+  data.tar.gz: 81f849c320766f54aa4200c4a00e4832009b6b55886ea4d7095ea426994804fa
 SHA512:
-  metadata.gz: ff4c73b207528ed9297774f13867d89ef662e1ab4ac20ca32caa32a598b0f0220442371e31c78b0cf4ecbe7b83d3817bfe50232ee960aca4b9fc714f155215ba
-  data.tar.gz: 4b9f200c89ea591ea4abd778a2de6b83b077c87bebb6554347532f319c0416c919a87ee9422e17f4a5484b4f1fe6f083a5ae5d0cd0cfd6ddf25408287a869b9b
+  metadata.gz: ef63e38f5e7d20291826a610bc3e6dc1726055a3ec02f85d612a70d1abdd991c84d65aca1e3c9ecbfe25954ffaef14bb97b71b64da5f719f12422770fb9846c1
+  data.tar.gz: 504d5255785aae42c85ef1059dd4ef4de558715682320a4d66ad8eb72ce938b15ae22bed3cc880b2c8e0cd59dcea173238333f2fede24d43890311f9993ee5eb

data/README.md

@@ -2,14 +2,28 @@
 
 Tailwind components for [Simple Form][]
 
-## Installation
+## Prerequisites
+
+You should have these installed first:
 
-First, install and setup [Tailwind](https://github.com/rails/tailwindcss-rails) ([helpful additional steps here](https://github.com/rails/tailwindcss-rails/issues/25)), [Simple Form][], and the [heroicon gem](https://github.com/bharget/heroicon).
+* [Simple Form gem][Simple Form]
+* [Tailwind][]
+  * We're agnostic about install method; the Rails [tailwindcss-rails gem][] is one method
+* [Heroicon gem][]
+  * Be sure to [run the install generator][heroicon generator] if it's a new dependency to your project
 
-Then add this gem to your application's Gemfile:
+[Simple Form]: https://github.com/heartcombo/simple_form
+[Tailwind]: https://tailwindcss.com/
+[tailwindcss-rails gem]: https://github.com/rails/tailwindcss-rails
+[Heroicon gem]: https://github.com/bharget/heroicon
+[heroicon generator]: https://github.com/bharget/heroicon#installation
+
+## Installation
+
+Add to your application's Gemfile:
 
 ```ruby
-gem "simple_form_tailwind", github: "abevoelker/simple_form_tailwind"
+gem "simple_form_tailwind_css"
 ```
 
 And then execute:
@@ -18,12 +32,33 @@ And then execute:
 $ bundle install
 ```
 
-Finally, overwrite your Simple Form initializer with ours:
+Next, overwrite your Simple Form initializer with ours:
 
 ```
 $ rails g simple_form:tailwind:install
 ```
 
+Finally, for Tailwind 3 we need to modify `tailwind.config.js` to add an environment
+variable that tells Tailwind where the gem's Ruby source is so that classes used by
+the gem aren't pruned by Tailwind's JIT:
+
+```diff
+--- a/tailwind.config.js
++++ b/tailwind.config.js
+@@ -4,6 +4,7 @@ const colors = require('tailwindcss/colors')
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+   content: [
++    `${process.env.SIMPLE_FORM_TAILWIND_DIR}/**/*.rb`,
+     './app/views/**/*.{html,erb,haml}',
+     './app/helpers/**/*.rb',
+     './app/javascript/**/*.{js,jsx,ts,tsx,vue}',
+```
+
+We're not done yet - jump down to the
+[Tailwind JIT configuration](#tailwind-jit-configuration) section to read
+approaches on how to pass in this variable to complete setup.
+
 ## Usage
 
 Here's an example form demonstrating usage:
@@ -89,16 +124,73 @@ Simple Form's error notification is supported, defaulting to a red color with x-
 
 ![Red error notification](/docs/images/error_notification_red.png?raw=true)
 
-You can customize the color and icon used:
+You can customize the icon and Tailwind classes used:
 
 ```erb
-<%= f.error_notification color: "blue", icon: "information-circle" %>
+<%= f.error_notification icon: "information-circle", icon_classes: "h-5 w-5 text-blue-400", message_classes: "text-sm text-blue-700", border_classes: "bg-blue-50 border-l-4 border-blue-400 p-4" %>
 ```
 
 ![Blue error notification](/docs/images/error_notification_blue.png?raw=true)
 
 The message and other parameters can be customized using the [expected Simple Form configuration options](https://www.rubydoc.info/github/plataformatec/simple_form/SimpleForm%2FFormBuilder:error_notification).
 
+## Tailwind JIT configuration
+
+How to pass the `SIMPLE_FORM_TAILWIND_DIR` environment variable in to
+`tailwind.config.js` is going to vary depending on how your build setup calls
+the `tailwindcss` CLI.
+
+If you're using the [tailwindcss-rails gem][] with its `tailwindcss:build` and `tailwindcss:watch` rake tasks, you can override them with something like this:
+
+```ruby
+# lib/tasks/tailwindcss.rake
+
+TAILWIND_COMPILE_COMMAND = "#{RbConfig.ruby} #{Pathname.new(__dir__).to_s}/../../exe/tailwindcss -i '#{Rails.root.join("app/assets/stylesheets/application.tailwind.css")}' -o '#{Rails.root.join("app/assets/builds/tailwind.css")}' -c '#{Rails.root.join("config/tailwind.config.js")}' --minify"
+SIMPLE_FORM_TAILWIND_GEMDIR = `bundle show simple_form_tailwind_css`
+
+Rake::Task["tailwindcss:build"].clear
+Rake::Task["tailwindcss:watch"].clear
+namespace :tailwindcss do
+  desc "Build your Tailwind CSS"
+  task :build do
+    system({"SIMPLE_FORM_TAILWIND_GEMDIR" => SIMPLE_FORM_TAILWIND_GEMDIR}, TAILWIND_COMPILE_COMMAND, exception: true)
+  end
+
+  desc "Watch and build your Tailwind CSS on file changes"
+  task :watch do
+    system({"SIMPLE_FORM_TAILWIND_GEMDIR" => SIMPLE_FORM_TAILWIND_GEMDIR}, "#{TAILWIND_COMPILE_COMMAND} -w")
+  end
+end
+```
+
+For myself, using [Propshaft][] and an npm script, I made this change:
+
+```diff
+--- a/package.json
++++ b/package.json
+@@ -50,10 +50,10 @@
+   },
+   "scripts": {
+     "build-dev:js": "esbuild `find app/javascript -type f` --tsconfig=./tsconfig.json --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
+-    "build-dev:tailwind": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/tailwind.css --minify",
++    "build-dev:tailwind": "SIMPLE_FORM_TAILWIND_DIR=\"`bundle show simple_form_tailwind_css`\" tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/tailwind.css --minify",
+     "build-dev:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
+   }
+ }
+```
+
+[Propshaft]: https://github.com/rails/propshaft
+
+As an absolute last resort, instead of dynamically setting the `content` config
+option you could use `safelist` instead. [Here's an example][safelist example]
+from the project issues.
+
+However, this approach is [discouraged by Tailwind][], and is unsupported by this
+gem as it's likely to break in the future if class names are changed.
+
+[discouraged by Tailwind]: https://tailwindcss.com/docs/content-configuration#safelisting-classes
+[safelist example]: https://github.com/abevoelker/simple_form_tailwind_css/issues/4#issuecomment-1232210573
+
 ## Tailwind workarounds
 
 When using spacing classes such as `space-y-<number>`, Tailwind 2 has [an unfortunate shortcoming](https://github.com/tailwindlabs/tailwindcss/issues/3413) where certain hidden elements disrupt element spacing. Rails's authenticity token unfortunately is one such hidden element that triggers this behavior.
@@ -127,4 +219,3 @@ Instead add a wrapper `<div>` around the form elements:
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-[Simple Form]: https://github.com/heartcombo/simple_form

data/lib/simple_form/tailwind/error_notification.rb

@@ -2,8 +2,17 @@ module SimpleForm
   module Tailwind
     class ErrorNotification < SimpleForm::ErrorNotification
       def render
+        if @options[:color]
+          warn "WARNING SimpleForm::Tailwind's :color error_notification option has " \
+            "been removed due to incompatibility with Tailwind's JIT. " \
+            "Please replace with the new :icon_classes, :message_classes, and " \
+            ":border_classes options (see README for an example)."
+        end
+
         if has_errors?
-          color = @options.fetch(:color, "red")
+          icon_classes = @options.fetch(:icon_classes, "h-5 w-5 text-red-400")
+          message_classes = @options.fetch(:message_classes, "text-sm text-red-700")
+          border_classes = @options.fetch(:border_classes, "bg-red-50 border-l-4 border-red-400 p-4")
           icon = @options.fetch(:icon, "x-circle")
 
           template.content_tag(
@@ -14,14 +23,14 @@ module SimpleForm
                 (
                   template.content_tag(
                     :div,
-                    template.heroicon(icon, options: { class: "h-5 w-5 text-#{color}-400" }),
+                    template.heroicon(icon, options: { class: icon_classes }),
                     class: "flex-shrink-0"
                   ) + template.content_tag(
                     :div,
                     template.content_tag(
                       :p,
                       error_message,
-                      class: "text-sm text-#{color}-700"
+                      class: message_classes
                     ),
                     class: "ml-3"
                   )
@@ -29,7 +38,7 @@ module SimpleForm
                 class: "flex"
               )
             ),
-            class: "bg-#{color}-50 border-l-4 border-#{color}-400 p-4"
+            class: border_classes
           )
         end
       end

data/lib/simple_form/tailwind/version.rb

@@ -1,5 +1,5 @@
 module SimpleForm
   module Tailwind
-    VERSION = "0.0.2"
+    VERSION = "1.0.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: simple_form_tailwind_css
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
 platform: ruby
 authors:
 - Abe Voelker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-05-08 00:00:00.000000000 Z
+date: 2022-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: simple_form