tailwind_merge 0.7.4 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54b29a688c5296c4966181e18f78627825e815b7192815d7c82781f525447033
-  data.tar.gz: 03dbc892736e660e17df42121167d8143d3d910e82e76221ad39a2234f198f9d
+  metadata.gz: e5402fe57c8b5f28ac07847bc17a04c6b5cd1ba9ad62ce945920759a95aece31
+  data.tar.gz: 0ef6aad523beb48f559b70e6e88662e0db9df8269152d2ccdcb5d08b5f96801b
 SHA512:
-  metadata.gz: 646aa7ab4367b068052ffaa5bb3f0064986a5810cd5c21f94294c24f9dd3033c54b8a37cb8a96fc1b9f5926cd6d07fc6289d76057b3260b7fd76d99a215def91
-  data.tar.gz: 1a29af4fc0ba6a9069cd56937e57f31abf2b8d70bce3c674bc8f59bdf1eb0862322d66ae216a5c7b4ec772681f9c74e795d99e9214d4426ea8b21c4f37f9aad2
+  metadata.gz: 568f47ffb9084553b5efc2b37dadcfdf1da552f698340f94bbbd6695618836213d4906b820370e55418350176d2d47c6f63dea5c5957efd34987b0a5ccb2cd4f
+  data.tar.gz: f4656fe96ddfed6d74308733575503b33a69cecd9ff261cded4e60978e7a9927652afbd09a2ad0b02ea8988c6540730bc63cbec1edb4f782b5e14d04d4cbebe7

data/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [v0.7.4] - 03-07-2023
+null
 ## [v0.7.3] - 26-06-2023
 null
 # Changelog

data/Gemfile

@@ -11,8 +11,6 @@ gem "minitest", "~> 5.0"
 
 gem "rubocop", "~> 1.21"
 
-gem "github_changelog_generator", "~> 1.16"
-
 gem "rubocop-standard"
 
 gem "amazing_print", require: false

data/README.md

@@ -34,15 +34,15 @@ If you use Tailwind with a component-based UI renderer (like [ViewComponent](htt
 <%= render(ConfirmEmailComponent.new(class: "p-5")) %>
 ```
 
-When the `ConfirmEmailComponent` is rendered, an input with the className `border rounded px-2 py-1` gets created. But because of the way the [CSS cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) works, the styles of the `p-5` class are ignored. The order of the classes in the `class` string doesn't matter at all and the only way to apply the `p-3` styles is to remove both `px-2` and `py-1`.
+When the `ConfirmEmailComponent` is rendered, an input with the className `border rounded px-2 py-1` gets created. But because of the way the [CSS cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) works, the styles of the `p-5` class are ignored. The order of the classes in the `class` string doesn't matter at all and the only way to apply the `p-5` style is to remove both `px-2` and `py-1`.
 
 This is where `tailwind_merge` comes in:
 
 ```ruby
 
 @merger = TailwindMerge::Merger.new
-@merger.merge("border rounded px-2 py-1 px-5")
-# border rounded p-5
+@merger.merge("border rounded px-2 py-1 p-5")
+# → "border rounded p-5"
 ```
 
 tailwind-merge overrides conflicting classes and keeps everything else untouched. In the case of the implementation of `ConfirmEmailComponent`, the input now only renders the classes `border rounded p-5`.
@@ -96,7 +96,7 @@ The order of standard modifiers does not matter for tailwind-merge.
 >
 > When using arbitrary values in ambiguous classes like `text-[calc(var(--rebecca)-1rem)]` tailwind-merge looks at the arbitrary value for clues to determine what type of class it is. In this case, like in most ambiguous classes, it would try to figure out whether `calc(var(--rebecca)-1rem)` is a length (making it a font-size class) or a color (making it a text-color class). For lengths it takes clues into account like the presence of the `calc()` function or a digit followed by a length unit like `1rem`.
 >
-> But it isn't always possible to figure out the type by looking at the arbitrary value. E.g. in the class `text-[theme(myCustomScale.rebecca)]` tailwind-merge can't know the type of the arbitrary value and will default to a text-color class. To make tailwind-merge understand the correct type of the arbitrary value in those cases, you can use CSS data type labels [which are used by Tailwind CSS to disambiguate classes](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities): `text-[lengt
+> But it isn't always possible to figure out the type by looking at the arbitrary value. E.g. in the class `text-[theme(myCustomScale.rebecca)]` tailwind-merge can't know the type of the arbitrary value and will default to a text-color class. To make tailwind-merge understand the correct type of the arbitrary value in those cases, you can use CSS data type labels [which are used by Tailwind CSS to disambiguate classes](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities): `text-[length:theme(myCustomScale.rebecca)]`.
 
 ### Supports arbitrary properties
 
@@ -159,9 +159,9 @@ merger = TailwindMerge::Merger.new
 
 ### Usage with custom Tailwind config
 
-If you're using a custom Tailwind config, you may need to configure tailwind-merge as well to merge classes properly.
+If you're using a custom Tailwind config, you may need to configure `tailwind_merge` as well to merge classes properly.
 
-The default [`twMerge`](#twmerge) function is configured in a way that you can still use it if all the following points apply to your Tailwind config:
+The default `TailwindMerge::Merger` initializer is configured in a way that you can still use it if all the following points apply to your Tailwind config:
 
 - Only using color names which don't clash with other Tailwind class names
 - Only deviating by number values from number-based Tailwind classes
@@ -177,7 +177,7 @@ The `tailwind_merge` config is different from the Tailwind config because it's e
 The `tailwind_merge` config is an object with several keys:
 
 ```ruby
-tailwindMergeConfig = {
+tailwind_merge_config = {
     # ↓ *Optional* Define how many values should be stored in cache.
     cache_size: 500,
     # ↓ *Optional* modifier separator from Tailwind config
@@ -197,6 +197,12 @@ tailwindMergeConfig = {
 }
 ```
 
+To use the custom configuration, pass it to the `TailwindMerge::Merger` initializer:
+
+```ruby
+@merger = TailwindMerge::Merger.new(config: tailwind_merge_config)
+```
+
 ### Class groups
 
 The library uses a concept of _class groups_ which is an array of Tailwind classes which all modify the same CSS property. For example, here is the position class group:
@@ -307,7 +313,7 @@ Here's a brief summary for each validator:
 - `IS_TSHIRT_SIZE`checks whether class part is a T-shirt size (`sm`, `xl`), optionally with a preceding number (`2xl`).
 - `IS_ARBITRARY_SIZE` checks whether class part is an arbitrary value which starts with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames.
 - `IS_ARBITRARY_POSITION` checks whether class part is an arbitrary value which starts with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames.
-- `IS_ARBITRARY_URL` checks whether class part is an arbitrary value which starts with `url:` or `url(` (`[url('/path-to-image.png')]`, `url:var(--maybe-a-url-at-runtime)]`) which is necessary for background-image classNames.
+- `IS_ARBITRARY_IMAGE` checks whether class part is an arbitrary value which is an iamge, e.g. by starting with `image:`, `url:`, `linear-gradient(` or `url(` (`[url('/path-to-image.png')]`, `image:var(--maybe-an-image-at-runtime)]`) which is necessary for background-image classNames.
 - `IS_ARBITRARY_NUMBER` checks whether class part is an arbitrary value which starts with `number:` or is a number (`[number:var(--value)]`, `[450]`) which is necessary for font-weight classNames.
 - `IS_ARBITRARY_SHADOW` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore.
 - `IS_ANY` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when it's certain there are no other class groups in a namespace.

data/lib/tailwind_merge/config.rb

@@ -898,7 +898,7 @@ module TailwindMerge
             "bg" => [
               "none",
               { "gradient-to" => ["t", "tr", "r", "br", "b", "bl", "l", "tl"] },
-              IS_ARBITRARY_URL,
+              IS_ARBITRARY_IMAGE,
             ],
           },
         ],

data/lib/tailwind_merge/validators.rb

@@ -9,7 +9,9 @@ module TailwindMerge
         match = ARBITRARY_VALUE_REGEX.match(class_part)
         return false unless match
 
-        return match[1] == label if match[1]
+        unless match[1].nil?
+          return label.is_a?(Set) ? label.include?(match[1]) : label == match[1]
+        end
 
         test_value.call(match[2])
       end
@@ -31,6 +33,10 @@ module TailwindMerge
     TSHIRT_UNIT_REGEX = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
     # Shadow always begins with x and y offset separated by underscore
     SHADOW_REGEX = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
+    IMAGE_REGEX = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/
+
+    SIZE_LABELS = Set.new(["length", "size", "percentage"]).freeze
+    IMAGE_LABELS = Set.new(["image", "url"]).freeze
 
     is_length_only = ->(value) {
       LENGTH_UNIT_REGEX.match?(value)
@@ -38,10 +44,6 @@ module TailwindMerge
 
     is_never = ->(_) { false }
 
-    is_url = ->(value) {
-      value.start_with?("url(")
-    }
-
     is_number = ->(value) {
       numeric?(value)
     }
@@ -54,6 +56,10 @@ module TailwindMerge
       SHADOW_REGEX.match?(value)
     }
 
+    is_image = ->(value) {
+      IMAGE_REGEX.match?(value)
+    }
+
     IS_LENGTH = ->(value) {
       numeric?(value) ||
         STRING_LENGTHS.include?(value) ||
@@ -66,15 +72,15 @@ module TailwindMerge
     }
 
     IS_ARBITRARY_SIZE = ->(value) {
-      arbitrary_value?(value, "size", is_never)
+      arbitrary_value?(value, SIZE_LABELS, is_never)
     }
 
     IS_ARBITRARY_POSITION = ->(value) {
       arbitrary_value?(value, "position", is_never)
     }
 
-    IS_ARBITRARY_URL = ->(value) {
-      arbitrary_value?(value, "url", is_url)
+    IS_ARBITRARY_IMAGE = ->(value) {
+      arbitrary_value?(value, IMAGE_LABELS, is_image)
     }
 
     IS_ARBITRARY_NUMBER = ->(value) {

data/lib/tailwind_merge/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TailwindMerge
-  VERSION = "0.7.4"
+  VERSION = "0.8.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwind_merge
 version: !ruby/object:Gem::Version
-  version: 0.7.4
+  version: 0.8.0
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-07-03 00:00:00.000000000 Z
+date: 2023-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: lru_redux
@@ -73,7 +73,6 @@ files:
 - lib/tailwind_merge/modifier_utils.rb
 - lib/tailwind_merge/validators.rb
 - lib/tailwind_merge/version.rb
-- script/generate_changelog
 - tailwind_merge.gemspec
 homepage: https://www.github.com/gjtorikian/tailwind_merge
 licenses:
@@ -100,7 +99,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.15
+rubygems_version: 3.4.19
 signing_key: 
 specification_version: 4
 summary: Utility function to efficiently merge Tailwind CSS classes without style

data/script/generate_changelog

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-bundle exec github_changelog_generator --token $GITHUB_TOKEN -u gjtorikian -p tailwind_merge