Prepare generator for jsbundling + Tailwind V4 (#237)

Co-authored-by: Seth Horsley <[email protected]>

Author: stephannv

lib/generators/ruby_ui/component_generator.rb

@@ -99,27 +99,6 @@ def install_js_packages(js_packages)
         end
       end
 
-      def pin_motion
-        say <<~TEXT
-          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "motion", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"\n
-        RUBY
-      end
-
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/+esm"\n
-        RUBY
-      end
-
       def dependencies
         @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
 

lib/generators/ruby_ui/install/install_generator.rb

@@ -14,17 +14,12 @@ def install_phlex_rails
         say "Checking for phlex-rails"
 
         if gem_installed?("phlex-rails")
-          if Gem::Specification.find_by_name("phlex-rails").version < "2.0.0.beta2"
-            say "You need to upgrade to phlex-rails 2 to use RubyUI", :red
-            exit
-          else
-            say "phlex-rails is already installed", :green
-          end
+          say "phlex-rails is already installed", :green
         else
           say "Adding phlex-rails to Gemfile"
-          run %(bundle add phlex-rails --github="phlex-ruby/phlex-rails")
+          run %(bundle add phlex-rails)
 
-          say "Running phlex-rails structure"
+          say "Generating phlex-rails structure"
           run "bin/rails generate phlex:install"
         end
       end
@@ -52,31 +47,26 @@ def add_ruby_ui_module_to_components_base
         end
       end
 
-      def add_tailwind_config
-        say "Adding RubyUI config to tailwind config"
+      def add_tailwind_css
+        say "Adding Tailwind css"
 
-        if using_tailwindcss_rails_gem?
-          template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css")
+        css_path = if using_importmap?
+          Rails.root.join("app/assets/tailwind/application.css")
         else
-          template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+          Rails.root.join("app/assets/stylesheets/application.tailwind.css")
         end
+
+        template "tailwind.css.erb", css_path
       end
 
-      def install_tw_animate_css
+      def install_tailwind_plugins
         say "Installing tw-animate-css plugin"
-
         install_js_package("tw-animate-css")
-      end
 
-      def install_tailwindcss_forms
         say "Installing @tailwindcss/forms plugin"
-
         install_js_package("@tailwindcss/forms")
-      end
 
-      def install_tailwindcss_typography
         say "Installing @tailwindcss/typography plugin"
-
         install_js_package("@tailwindcss/typography")
       end
 

lib/generators/ruby_ui/install/templates/application.tailwind.css.erb

@@ -1,9 +1,14 @@
 @import "tailwindcss";
-@import "../../../vendor/javascript/tw-animate-css.js";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
+<% if using_importmap? %>
+@import "../../../vendor/javascript/tw-animate-css.js";
+<% else %>
+@import "tw-animate-css";
+<% end %>
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -131,6 +136,8 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ruby_ui specific */
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-success: var(--success);
@@ -139,15 +146,9 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
-
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-
-    /* docs specific */
-    /* https://css-tricks.com/snippets/css/system-font-stack/ */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
 }

lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb

@@ -31,6 +31,27 @@ def using_importmap?
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
       def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+
+      def pin_motion
+        say <<~TEXT
+          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "motion", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"\n
+        RUBY
+      end
+
+      def pin_tippy_js
+        say <<~TEXT
+          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/+esm"\n
+        RUBY
+      end
     end
   end
 end