jekyll-tailwindcss 0.5.1 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 78c6146f98c780cb65d3e2c6e77609212130b0b0442602a3fb1ee9218143978e
-  data.tar.gz: 001cd2bfefdc9db3b6519640294064fb19bf93a2b09445cad5757ebeff1f4cf2
+  metadata.gz: a81e85a7737089b5d8d581d0b3a2a57537246b0d9f2d959621c88947256e4655
+  data.tar.gz: 1dc39f0ac56a400201336c993a933a016c48c055620d85a1110da61af0d96626
 SHA512:
-  metadata.gz: b98e748ed916539e63ffd33cb6202a51bcb0b4c95abea76c7ebb5415897d7647c4dd097c9e205927a47825af5de5aec9d789b50703f29a92c1e589976589d6b8
-  data.tar.gz: 7f0dc3a01fd94bf14a78fb7fd8ceca7f7f246144cddb438017ba40324ecc49b7a552e8e0d4fbbed645650ed79d8af7d37465002bec69301320b46e3a642b70f4
+  metadata.gz: aa46bc05d461559f837ba25efdb96e6929aee69d3157026472e1b7d3e658a7bd68416d8f35543ae91006904fd6dce531929a72e4adf35e37bfde0ad94a40c20e
+  data.tar.gz: 4c15e84ccc7e25289835ad5aaf97460a0bd6973e1496df67be670b21c2c97861973222c9e6f60cc539864da6ce4a42264d3864ed5d8cc4feb33c9ce5aa63cb25

data/README.md

@@ -2,36 +2,66 @@
 
 Bring the fun of building with TailwindCSS into your Jekyll project (without any JavaScript)
 
-**TL;DR** This gem borrows *heavily* from [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) to provide platform-specific tailwind executables and provide a smooth developer experience in Jekyll projects
+**TL;DR** This gem borrows _heavily_ from [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) to provide platform-specific tailwind executables and provide a smooth developer experience in Jekyll projects
 
-> “Because building a great jekyll site shouldn’t require a `node_modules` folder
+> _"Because building a great jekyll site shouldn't require a `node_modules` folder"_
 
 ## Installation
 
 Install the gem in your jekyll project's Gemfile by executing the following:
 
 ```
-bundle add jekyll-tailwindcss
+bundle add jekyll-tailwindcss --group jekyll_plugins
 ```
 
-Add the plugin to your list of jekyll plugins in `_config.yml`
+Or by adding the gem manually
 
-```yml
-plugins:
-  - jekyll-tailwindcss
+```ruby
+# Gemfile
+# ...
+group :jekyll_plugins do
+ # ...
+ gem "jekyll-tailwindcss"
+end
 ```
 
-## Tailwind Configuration
+> [!NOTE]
+> By adding this gem to the jekyll_plugins group, you don't need to explicitly configure it in `_config.yml`.
 
-This plugin requires you to have a tailwind configuration file (`tailwind.config.js`) at the root level of your project, which can be generated by running:
+### Choosing a specific version of tailwindcss
 
+This gem uses the latest TailwindCSS by default. However since CLI versions are managed by the `tailwindcss-ruby` gem, it supports older versions as well.
+
+You can use an older Tailwind version by specifying it in your Gemfile:
+
+```ruby
+# Gemfile
+# ...
+group :jekyll_plugins do
+ # ...
+ gem "jekyll-tailwindcss"
+end
+# gem versions track against tailwind releases
+gem "tailwindcss-ruby", "~> 3.4"
 ```
-bundle exec jekyll-tailwindcss init
+
+<details>
+
+<summary>Tailwind Version 3 Setup</summary>
+
+Tailwind V3 required a tailwind configuration file (`tailwind.config.js`), which needs to be specified in `_config.yml`:
+
+```yaml
+tailwindcss:
+  config: "./tailwind.config.js"
 ```
 
-Tailwind will include the CSS for the classes found in `content` directories. For most jekyll sites, this would work well.
+Tailwind will generate CSS for the classes found in `content` directories. For most jekyll sites, this would work well.
 
 ```js
+// ./tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
   content: [
     "./_drafts/**/*.md",
     "./_includes/**/*.html",
@@ -40,35 +70,72 @@ Tailwind will include the CSS for the classes found in `content` directories. Fo
     "./_posts/*.md",
     "./*.{html,md}",
   ],
+  // ...
+};
 ```
 
-Learn more at https://tailwindcss.com/docs/configuration
+Learn more at https://v3.tailwindcss.com/docs/configuration
 
+## Example CSS
 
+Any CSS file with frontmatter and `@tailwind` directives will be converted.
 
-## Usage
+```css
+/* assets/css/styles.css */
+---
+# This yaml frontmatter is required for jekyll to process the file
+---
 
-```sh
-bundle exec jekyll serve # or build
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.btn {
+  @apply font-bold py-2 px-4 rounded !important;
+}
 ```
 
-Any `*.css` file processed by jekyll [^1] that contains the `@tailwind` [directive](https://tailwindcss.com/docs/functions-and-directives#config) will now be converted through the Tailwind CLI.
+will be converted to
 
-[^1]: Jekyll will process any file that begins with yaml [frontmatter](https://jekyllrb.com/docs/front-matter/)
+```css
+/* _site/assets/css/styles.css */
 
-### Configuration
+/*
+ * Tailwind generated CSS 
+ * ...
+ */
+```
+
+### PostCSS Support
 
-Location of the `tailwind.config.js` file can be configured in `_config.yml`:
+This gem includes basic PostCSS support. If a `postcss.config.js` file is included in your `_config.yml`, the Tailwind CLI will be invoked with the `--postcss` flag.
 
-``` yaml
+```yaml
 tailwindcss:
-  config: './tailwind.config.js' # this is the default location
+  config: "./tailwind.config.js" # this is the default location
+  postcss: "./postcss.config.js" # OPTIONAL, only if you have a postcss config file
+```
+
+> [!NOTE]
+> PostCSS configuration is considered an advanced use case and is outside the scope of this gem. Users should verify their PostCSS setup outside this gem by running:
+> `bundle exec tailwindcss --postcss postcss.config.js`
+
+</details>
+
+## Usage
+
+```sh
+bundle exec jekyll serve # or build
 ```
 
-### Examples
+Any `*.css` file processed by jekyll [^1] that contains the `@import "tailwindcss";` [directive](https://tailwindcss.com/docs/functions-and-directives#config) will be converted through the Tailwind CLI.
+
+[^1]: Jekyll will process any file that begins with yaml [frontmatter](https://jekyllrb.com/docs/front-matter/)
 
+### Example
+Any CSS file with frontmatter and `@import "tailwindcss";` will be converted.
 
-A CSS file with frontmatter and `@tailwind` directives:
+Your CSS file
 
 ```css
 /* assets/css/styles.css */
@@ -76,12 +143,10 @@ A CSS file with frontmatter and `@tailwind` directives:
 # This yaml frontmatter is required for jekyll to process the file
 ---
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 .btn {
-  @apply font-bold py-2 px-4 rounded !important;
+  @apply rounded border border-gray-300;
 }
 ```
 
@@ -92,13 +157,24 @@ will be converted to
 
 /*
  * Tailwind generated CSS 
+ * ...
+  .btn {
+    border-radius: 0.25rem;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-gray-300);
+  }
  * ...
  */
 ```
 
+### Minification
+
+The `--minify` flag is automatically added when the `JEKYLL_ENV` environment variable is present and set to anything other than `development`. [Jekyll Docs](https://jekyllrb.com/docs/configuration/environments/)
+
 ## Development
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. 
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests.
 
 To install this gem on your local machine, run `bundle exec rake install`.
 
@@ -110,12 +186,15 @@ The unit tests are run with `bundle exec rspec`
 
 ### Testing in a Jekyll project
 
-If you want to test modifications to this gem, you must run `rake download` once to download the upstream `tailwindcss` executables.
+If you want to test modifications to this gem, you can point your Jekyll project's `Gemfile` at the local version of the gem as you normally would:
 
-Then you can point your Jekyll project's `Gemfile` at the local version of the gem as you normally would:
-
-``` ruby
-gem "jekyll-tailwindcss", path: "/path/to/jekyll-tailwindcss"
+```ruby
+# Gemfile
+# ...
+group :jekyll_plugins do
+ # ...
+  gem "jekyll-tailwindcss", path: "/path/to/jekyll-tailwindcss"
+end
 ```
 
 ### Cutting a release
@@ -135,8 +214,6 @@ gem "jekyll-tailwindcss", path: "/path/to/jekyll-tailwindcss"
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/vormwald/jekyll-tailwindcss. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/vormwald/jekyll-tailwindcss/blob/main/CODE_OF_CONDUCT.md).
 
-
-
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/jekyll/converters/tailwindcss.rb

@@ -16,13 +16,17 @@ module Jekyll
       end
 
       def convert(content)
-        return content unless /@tailwind/i.match?(content)
+        return content unless /@tailwind|@import ['"]tailwindcss['"]/i.match?(content)
+        if content.include?("@tailwind") && config_path.nil?
+          Jekyll.logger.error "Jekyll Tailwind:", "to use tailwind v3 you need to include a config path in _config.yml"
+          return content
+        end
 
         dev_mode = Jekyll.env == "development"
         Jekyll.logger.info "Jekyll Tailwind:", "Generating #{dev_mode ? "" : "minified "}CSS"
 
         compile_command = ::Tailwindcss::Commands
-          .compile_command(debug: dev_mode, config: config_location)
+          .compile_command(debug: dev_mode, config_path: config_path, postcss_path: postcss_path)
           .join(" ")
 
         output, error = nil
@@ -48,8 +52,12 @@ module Jekyll
         {"BROWSERSLIST_IGNORE_OLD_DATA" => "1"}
       end
 
-      def config_location
-        @config.dig("tailwindcss", "config") || "./tailwind.config.js"
+      def config_path
+        @config.dig("tailwindcss", "config")
+      end
+
+      def postcss_path
+        @config.dig("tailwindcss", "postcss")
       end
     end
   end

data/lib/jekyll-tailwindcss/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module Tailwindcss
-    VERSION = "0.5.1"
+    VERSION = "0.6.0"
   end
 end

data/lib/tailwindcss/commands.rb

@@ -3,18 +3,16 @@ require "tailwindcss/ruby"
 module Tailwindcss
   module Commands
     class << self
-      def compile_command(debug: false, config: nil, **kwargs)
+      def compile_command(debug: false, config_path: nil, postcss_path: nil, **kwargs)
         command = [
           Tailwindcss::Ruby.executable(**kwargs),
           "--input", "-"
         ]
-        command += ["--config", config] if config
+        command += ["--config", config_path] if config_path
+        command += ["--postcss", postcss_path] if postcss_path
 
         command << "--minify" unless debug
 
-        postcss_path = "postcss.config.js"
-        command += ["--postcss", postcss_path] if File.exist?(postcss_path)
-
         command
       end
     end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-tailwindcss
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.6.0
 platform: ruby
 authors:
 - Mike Vormwald
 bindir: exe
 cert_chain: []
-date: 2025-01-07 00:00:00.000000000 Z
+date: 2025-02-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwindcss-ruby
@@ -25,15 +25,13 @@ dependencies:
         version: '0'
 email:
 - mvormwald@gmail.com
-executables:
-- jekyll-tailwindcss
+executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE
 - README.md
 - Rakefile
-- exe/jekyll-tailwindcss
 - lib/jekyll-tailwindcss.rb
 - lib/jekyll-tailwindcss/version.rb
 - lib/jekyll/converters/tailwindcss.rb

data/exe/jekyll-tailwindcss

@@ -1,18 +0,0 @@
-#! /usr/bin/env ruby
-# because rubygems shims assume a gem's executables are Ruby
-
-require "tailwindcss/commands"
-
-begin
-  command = [Tailwindcss::Commands.executable, *ARGV]
-  if Gem.win_platform?
-    # use system rather than exec as exec inexplicably fails to find the executable on Windows
-    # see related https://github.com/rubys/sprockets-esbuild/pull/4
-    system(*command, exception: true)
-  else
-    exec(*command)
-  end
-rescue Tailwindcss::Commands::UnsupportedPlatformException, Tailwindcss::Commands::ExecutableNotFoundException => e
-  warn("ERROR: " + e.message)
-  exit 1
-end