shopify_theme_builder 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de0bb008961c3b947c4496bd5605d24144073d22d4c721587b3f529073ed1096
-  data.tar.gz: 4e494faa701e5bd4dd47c9b609155626bab03438d85cc7a3603bd9e42e5a0ca3
+  metadata.gz: 307e28c3c750b87460a048c082ba3c3287a480419c1b1c52faa84660de8b543a
+  data.tar.gz: 1ea87aa101f2858f46090e8f12d61c231bb4671dbd10aaa53b5427497690ae28
 SHA512:
-  metadata.gz: bd5f70a0f803adcef6eba571c822f8d7d1b45de0c24aa0360c84bc4c19c431357426d53c471c7735e3e3fdd72d1f7774d2f9d141b90409f59402e52d6f6f8cf4
-  data.tar.gz: 94d70495fd131b5201586e2035c0d4c1ca862718547a112afb755c88b20eb3d34ba3658995c30c252de369dd60010221a213a0cd6d6d600c682a4e34adf60c9c
+  metadata.gz: 4997036e87e815574d49b2857e4c8f859fcd53afcd279652ec3b81b563d454bd0826c21101a616c82cb8b0b570817e1c3d6d20a827c7d91d0940f81ed5d4766c
+  data.tar.gz: 199222a677430c7ec42719ef04574050327f61f8648c5096b7d60c9f06ac9a4c03b42fdbc90e307f41b46fd916eebb79fbac437a82c67ba00f87ce3805126279

data/README.md

@@ -39,6 +39,9 @@ blocks/
 
 All files inside the `button` folder will be compiled into a single `button.liquid` file in the `blocks` folder, combining the comment, doc, Liquid, JSON, CSS, and JavaScript code.
 
+## Tailwind CSS Support
+
+ShopifyThemeBuilder also supports Tailwind CSS integration. You can specify an input CSS file that includes Tailwind directives and an output CSS file where the compiled styles will be saved. The watcher will automatically run the Tailwind build process whenever changes are detected in the components folder.
 
 ## Installation
 
@@ -53,27 +56,28 @@ bundle add shopify_theme_builder --group "development"
 To watch for changes in the default components folder and build the theme, run:
 
 ```bash
-bundle exec theme-watcher
+bundle exec theme-builder watch
 ```
 
-You can customize the components folder by passing options:
-
-```bash
-bundle exec theme-watcher my_components
-```
+You can customize multiple options when running the watcher:
+- `--folders`: Specify one or more folders to watch (default is `_components`).
+- `--tailwind-input-file`: Specify the Tailwind CSS input file (default is `src/styles/tailwind.css`).
+- `--tailwind-output-file`: Specify the Tailwind CSS output file (default is `assets/tailwind-output.css`).
+- `--skip-tailwind`: Skip the Tailwind CSS build process (default is `false`).
 
-If you prefer, you can import the watcher executable locally using:
+If you need help with all available options, or how to set them, run:
 
 ```bash
-bundle binstubs shopify_theme_builder
+bundle exec theme-builder help watch
 ```
 
-It will create a `bin/theme-watcher` file that you can run with:
+## After Running the Watcher
 
-```bash
-bin/theme-watcher
-```
+The watcher will create a CSS file that can be included in your Shopify theme layout in this way:
 
+```liquid
+{{ 'tailwind-output.css' | asset_url | stylesheet_tag }}
+```
 
 ## Development
 
@@ -81,10 +85,10 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, run `bin/release VERSION`, which will update the version file, create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-## TODO
+## Next Steps
 
-- [ ] Run the tailwind build process automatically.
-- [ ] Check if stimulus controllers are loaded correctly in Shopify themes.
+- [x] Run the tailwind build process automatically.
+- [ ] Add Stimulus JS support.
 - [ ] Create a command to build an example component with all the files.
 - [ ] Decompile existing Shopify files into components structure (?).
 

data/exe/theme-builder

@@ -0,0 +1,7 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "shopify_theme_builder"
+
+ShopifyThemeBuilder::CommandLine.start(ARGV)

data/lib/shopify_theme_builder/command_line.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "thor"
+
+module ShopifyThemeBuilder
+  # CommandLine class to handle CLI commands using Thor.
+  class CommandLine < Thor
+    desc "watch", "Watch for changes in the components folder and build the theme accordingly"
+    method_option :folders, type: :array, default: ["_components"], desc: "Folders to watch for changes"
+    method_option :tailwind_input_file, type: :string, default: "./assets/tailwind.css", desc: "Tailwind CSS input file"
+    method_option :tailwind_output_file, type: :string, default: "./assets/tailwind-output.css",
+                                         desc: "Tailwind CSS output file"
+    method_option :skip_tailwind, type: :boolean, default: false, desc: "Skip Tailwind CSS processing"
+    def watch
+      ShopifyThemeBuilder.watch(
+        folders_to_watch: options[:folders],
+        tailwind_input_file: options[:tailwind_input_file],
+        tailwind_output_file: options[:tailwind_output_file],
+        skip_tailwind: options[:skip_tailwind]
+      )
+    end
+  end
+end

data/lib/shopify_theme_builder/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShopifyThemeBuilder
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

data/lib/shopify_theme_builder.rb

@@ -6,16 +6,26 @@ require_relative "shopify_theme_builder/version"
 require_relative "shopify_theme_builder/watcher"
 require_relative "shopify_theme_builder/liquid_processor"
 require_relative "shopify_theme_builder/builder"
+require_relative "shopify_theme_builder/command_line"
 
 # The main module for ShopifyThemeBuilder.
 module ShopifyThemeBuilder
   class << self
-    def watch(folders_to_watch: ["_components"])
+    def watch(
+      folders_to_watch: ["_components"],
+      tailwind_input_file: "./assets/tailwind.css",
+      tailwind_output_file: "./assets/tailwind-output.css",
+      skip_tailwind: false
+    )
       create_folders(folders_to_watch)
 
       initial_build(folders_to_watch)
 
-      watch_folders(folders_to_watch)
+      run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
+
+      watch_folders(folders_to_watch) do
+        run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
+      end
     end
 
     private
@@ -46,7 +56,15 @@ module ShopifyThemeBuilder
 
           Builder.new(files_to_process: [relative_filename]).build if relative_filename.start_with?(*folders_to_watch)
         end
+
+        yield if block_given?
       end
     end
+
+    def run_tailwind(tailwind_input_file, tailwind_output_file)
+      puts "Running Tailwind CSS build..."
+
+      system("tailwindcss", "-i", tailwind_input_file, "-o", tailwind_output_file)
+    end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shopify_theme_builder
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Massimiliano Lattanzio
@@ -38,10 +38,44 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: thor
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
 email:
 - massimiliano.lattanzio@gmail.com
 executables:
-- theme-watcher
+- theme-builder
 extensions: []
 extra_rdoc_files: []
 files:
@@ -49,9 +83,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- exe/theme-watcher
+- exe/theme-builder
 - lib/shopify_theme_builder.rb
 - lib/shopify_theme_builder/builder.rb
+- lib/shopify_theme_builder/command_line.rb
 - lib/shopify_theme_builder/liquid_processor.rb
 - lib/shopify_theme_builder/version.rb
 - lib/shopify_theme_builder/watcher.rb

data/exe/theme-watcher

@@ -1,13 +0,0 @@
-#!/usr/bin/env ruby
-# frozen_string_literal: true
-
-require "bundler/setup"
-require "shopify_theme_builder"
-
-$stdout.sync = true
-
-if ARGV.empty?
-  ShopifyThemeBuilder.watch
-else
-  ShopifyThemeBuilder.watch(folders_to_watch: ARGV)
-end