m9sh 0.2.5 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4999f0b66fd9fcb8c72042aa986a757c6b5a69a17cf8acf650330c22146ecd1f
-  data.tar.gz: 48bd5b66a35f216c487ca21a0525a2b89ec6d862a5b0c00c8c157ab0f367310e
+  metadata.gz: 713b1bc8189ceef415cd47de7913c446532f80e5b1829ba6f8eddaed9880d694
+  data.tar.gz: 0017bef99ea8058bb0e512fcc4dec31605bce16a114bb7677bb33f8d5b8e5cc0
 SHA512:
-  metadata.gz: bdd1dfed0767fc23ba79aeb3b97946cff5bddcec818ee281362839450a405981070afd813e1139731ccdd65fc3d5ac1e0d1ca8501e535c44f630248ea6c5ceb9
-  data.tar.gz: e0affdf72dcacfeac608bd6a0e9fa1fbd3083fbfe23fd0327b839580446412484655d275b133239d23492b420cb28700a125b7771c8bac90b9e2ce30a7509563
+  metadata.gz: c786785e431d5bdedd42630491de9c75052c31b5772bff05f2bce422097f5528b390bb44e325a4546c5627db51879ce785d356e27386c812c83a823309cbac43
+  data.tar.gz: d39c9c20cf68d450ec68734058bbd8596de20b299aa451030a7040fe81f27c898d4df6ffdb284abe43c454562974fcd58069328da07c7bfce4bd9f1d03f925b0

data/lib/m9sh/cli.rb

@@ -51,10 +51,11 @@ module M9sh
       puts "   Component path: #{config.components_path}"
       puts "   JavaScript path: #{config.javascript_path}"
       puts "\nNext steps:"
-      puts "   1. Run 'npm install' to install Tailwind CSS"
+      puts "   1. Run 'npm install' to install Tailwind CSS v4"
       puts "   2. Run 'npm run build:css' to build your CSS"
-      puts "   3. Run 'bin/m9sh list' to see available components"
-      puts "   4. Run 'bin/m9sh add button' to add a component"
+      puts "   3. Add <%= stylesheet_link_tag \"application\", \"data-turbo-track\": \"reload\" %> to your layout"
+      puts "   4. Run 'bin/m9sh list' to see available components"
+      puts "   5. Run 'bin/m9sh add button' to add a component"
     end
 
     desc "add COMPONENT", "Add a component (with dependencies)"

data/lib/m9sh/setup.rb

@@ -12,7 +12,6 @@ module M9sh
     end
 
     def run
-      setup_tailwind_config
       setup_css_file
       setup_package_json
       setup_stimulus_registration
@@ -21,18 +20,6 @@ module M9sh
 
     private
 
-    def setup_tailwind_config
-      config_path = File.join(@root_path, "tailwind.config.js")
-
-      if File.exist?(config_path)
-        puts "   ⏭️  tailwind.config.js already exists, skipping..."
-        return
-      end
-
-      File.write(config_path, tailwind_config_template)
-      puts "   ✅ Created tailwind.config.js"
-    end
-
     def setup_css_file
       css_dir = File.join(@root_path, "app", "assets", "stylesheets")
       FileUtils.mkdir_p(css_dir)
@@ -63,8 +50,9 @@ module M9sh
           end
 
           package_data["scripts"]["build:css"] = "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+          package_data["scripts"]["build:css:watch"] = "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch"
           package_data["devDependencies"] ||= {}
-          package_data["devDependencies"]["tailwindcss"] ||= "^3.4.0"
+          package_data["devDependencies"]["@tailwindcss/cli"] ||= "^4.0.0-beta.3"
 
           File.write(package_path, JSON.pretty_generate(package_data))
           puts "   ✅ Updated package.json with build:css script"
@@ -112,124 +100,66 @@ module M9sh
 
     # Templates
 
-    def tailwind_config_template
-      <<~JS
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: [
-            './app/views/**/*.html.erb',
-            './app/helpers/**/*.rb',
-            './app/components/**/*.{rb,erb}',
-            './app/javascript/**/*.js'
-          ],
-          theme: {
-            extend: {
-              colors: {
-                border: "hsl(var(--border))",
-                input: "hsl(var(--input))",
-                ring: "hsl(var(--ring))",
-                background: "hsl(var(--background))",
-                foreground: "hsl(var(--foreground))",
-                primary: {
-                  DEFAULT: "hsl(var(--primary))",
-                  foreground: "hsl(var(--primary-foreground))",
-                },
-                secondary: {
-                  DEFAULT: "hsl(var(--secondary))",
-                  foreground: "hsl(var(--secondary-foreground))",
-                },
-                destructive: {
-                  DEFAULT: "hsl(var(--destructive))",
-                  foreground: "hsl(var(--destructive-foreground))",
-                },
-                muted: {
-                  DEFAULT: "hsl(var(--muted))",
-                  foreground: "hsl(var(--muted-foreground))",
-                },
-                accent: {
-                  DEFAULT: "hsl(var(--accent))",
-                  foreground: "hsl(var(--accent-foreground))",
-                },
-                popover: {
-                  DEFAULT: "hsl(var(--popover))",
-                  foreground: "hsl(var(--popover-foreground))",
-                },
-                card: {
-                  DEFAULT: "hsl(var(--card))",
-                  foreground: "hsl(var(--card-foreground))",
-                },
-              },
-              borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)",
-              },
-            },
-          },
-          plugins: [],
-        }
-      JS
-    end
-
     def css_template
       <<~CSS
-        @import "tailwindcss/base";
-        @import "tailwindcss/components";
-        @import "tailwindcss/utilities";
-
-        @layer base {
-          :root {
-            --background: 0 0% 100%;
-            --foreground: 222.2 84% 4.9%;
-            --card: 0 0% 100%;
-            --card-foreground: 222.2 84% 4.9%;
-            --popover: 0 0% 100%;
-            --popover-foreground: 222.2 84% 4.9%;
-            --primary: 222.2 47.4% 11.2%;
-            --primary-foreground: 210 40% 98%;
-            --secondary: 210 40% 96.1%;
-            --secondary-foreground: 222.2 47.4% 11.2%;
-            --muted: 210 40% 96.1%;
-            --muted-foreground: 215.4 16.3% 46.9%;
-            --accent: 210 40% 96.1%;
-            --accent-foreground: 222.2 47.4% 11.2%;
-            --destructive: 0 84.2% 60.2%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 214.3 31.8% 91.4%;
-            --input: 214.3 31.8% 91.4%;
-            --ring: 222.2 84% 4.9%;
-            --radius: 0.5rem;
-          }
-
-          .dark {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --popover: 222.2 84% 4.9%;
-            --popover-foreground: 210 40% 98%;
-            --primary: 210 40% 98%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --secondary: 217.2 32.6% 17.5%;
-            --secondary-foreground: 210 40% 98%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --accent: 217.2 32.6% 17.5%;
-            --accent-foreground: 210 40% 98%;
-            --destructive: 0 62.8% 30.6%;
-            --destructive-foreground: 210 40% 98%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 212.7 26.8% 83.9%;
-          }
+        @import "tailwindcss";
+
+        @theme {
+          --color-background: 0 0% 100%;
+          --color-foreground: 222.2 84% 4.9%;
+          --color-card: 0 0% 100%;
+          --color-card-foreground: 222.2 84% 4.9%;
+          --color-popover: 0 0% 100%;
+          --color-popover-foreground: 222.2 84% 4.9%;
+          --color-primary: 222.2 47.4% 11.2%;
+          --color-primary-foreground: 210 40% 98%;
+          --color-secondary: 210 40% 96.1%;
+          --color-secondary-foreground: 222.2 47.4% 11.2%;
+          --color-muted: 210 40% 96.1%;
+          --color-muted-foreground: 215.4 16.3% 46.9%;
+          --color-accent: 210 40% 96.1%;
+          --color-accent-foreground: 222.2 47.4% 11.2%;
+          --color-destructive: 0 84.2% 60.2%;
+          --color-destructive-foreground: 210 40% 98%;
+          --color-border: 214.3 31.8% 91.4%;
+          --color-input: 214.3 31.8% 91.4%;
+          --color-ring: 222.2 84% 4.9%;
+          --radius-sm: calc(0.5rem - 4px);
+          --radius-md: calc(0.5rem - 2px);
+          --radius-lg: 0.5rem;
         }
 
         @layer base {
           * {
-            @apply border-border;
+            border-color: hsl(var(--color-border));
           }
           body {
-            @apply bg-background text-foreground;
+            background-color: hsl(var(--color-background));
+            color: hsl(var(--color-foreground));
+          }
+        }
+
+        @media (prefers-color-scheme: dark) {
+          @theme {
+            --color-background: 222.2 84% 4.9%;
+            --color-foreground: 210 40% 98%;
+            --color-card: 222.2 84% 4.9%;
+            --color-card-foreground: 210 40% 98%;
+            --color-popover: 222.2 84% 4.9%;
+            --color-popover-foreground: 210 40% 98%;
+            --color-primary: 210 40% 98%;
+            --color-primary-foreground: 222.2 47.4% 11.2%;
+            --color-secondary: 217.2 32.6% 17.5%;
+            --color-secondary-foreground: 210 40% 98%;
+            --color-muted: 217.2 32.6% 17.5%;
+            --color-muted-foreground: 215 20.2% 65.1%;
+            --color-accent: 217.2 32.6% 17.5%;
+            --color-accent-foreground: 210 40% 98%;
+            --color-destructive: 0 62.8% 30.6%;
+            --color-destructive-foreground: 210 40% 98%;
+            --color-border: 217.2 32.6% 17.5%;
+            --color-input: 217.2 32.6% 17.5%;
+            --color-ring: 212.7 26.8% 83.9%;
           }
         }
       CSS
@@ -240,10 +170,11 @@ module M9sh
         name: "app",
         private: true,
         scripts: {
-          "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+          "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify",
+          "build:css:watch": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch"
         },
         devDependencies: {
-          tailwindcss: "^3.4.0"
+          "@tailwindcss/cli": "^4.0.0-beta.3"
         }
       })
     end

data/lib/m9sh/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module M9sh
-  VERSION = "0.2.5"
+  VERSION = "0.2.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: m9sh
 version: !ruby/object:Gem::Version
-  version: 0.2.5
+  version: 0.2.6
 platform: ruby
 authors:
 - Marcin Urbanski