tailwind_merge 0.7.2 → 0.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1d84d9d8ccb31fb4d40b8b3c01bdd4360a629bbb1edb6372c67e2593cec0fb9
-  data.tar.gz: db09d2ca1a88e1e55dabe545307f94694bb05f38591a889d6cd5d4eea86b82d6
+  metadata.gz: 73a6da6946240630bba6b40dded91a06fb9ccf65ae58f71194bce07f2c706dd2
+  data.tar.gz: d8cd3a6cf999db8da115cc9ea90ed2ee33429998ee6ef35c184f99dca0924c59
 SHA512:
-  metadata.gz: 67975440de152fe04b60ef762e6c6de724e45a6d3c8cbe922dcd13e9bea4cda1fd0253db2e6731014d1045c341e466d85fdbcfbb1f4657645e0ae3f8082d6a33
-  data.tar.gz: 5d5e38c0173bb4cc06982aa1a381892c0223fa71709b485945bdf057d3358085714de24929766793a01431dd9da4cd858c7dc7b71c4ae7300a2ac4a0f7061419
+  metadata.gz: bd8ef4e8237ccf306153378db32e14c9b852f580b6cda79a95736a07763ac66d2f7a60a17bc65ace4ad27a9d7e7330e844702004d5c3a6030ca4306258f437a8
+  data.tar.gz: 2853d2427d0747761d90afc105e2226a4a6a0127b61448bcfc3fddff80a55858d371c503fa535c52e2313202599fd0d9aeb4b1f519e83ab3b57d982494e42f3d

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [v0.7.2](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.2) (2023-06-08)
+
+[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.7.1.2...v0.7.2)
+
+**Merged pull requests:**
+
+- Fix basis-auto and basis-full not being merged correctly [\#13](https://github.com/gjtorikian/tailwind_merge/pull/13) ([gjtorikian](https://github.com/gjtorikian))
+
 ## [v0.7.1.2](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.1.2) (2023-06-02)
 
 [Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.7.1.1...v0.7.1.2)

data/README.md

@@ -91,6 +91,13 @@ The order of standard modifiers does not matter for tailwind-merge.
 @merger.merge('grid-cols-[1fr,auto] grid-cols-2') # → 'grid-cols-2'
 ```
 
+> **Warning**
+> Labels necessary in ambiguous cases
+>
+> 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
+
 ### Supports arbitrary properties
 
 ```ruby
@@ -101,8 +108,7 @@ The order of standard modifiers does not matter for tailwind-merge.
 @merger.merge('[padding:1rem] p-8') # → '[padding:1rem] p-8'
 ```
 
-> **Warning**
-> Watch out for using arbitrary properties which could be expressed as Tailwind classes. `tailwind_merge` does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small.
+> **Warning** > `tailwind_merge` does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small.
 
 ### Supports arbitrary variants
 

data/lib/tailwind_merge/class_utils.rb

@@ -34,7 +34,7 @@ module TailwindMerge
 
       return class_group_from_next_class_part if class_group_from_next_class_part
 
-      return nil if class_part_object[:validators].empty?
+      return if class_part_object[:validators].empty?
 
       class_rest = class_parts.join(CLASS_PART_SEPARATOR)
 

data/lib/tailwind_merge/config.rb

@@ -64,7 +64,8 @@ module TailwindMerge
 
     OVERSCROLL = -> { ["auto", "contain", "none"] }
     OVERFLOW = -> { ["auto", "hidden", "clip", "visible", "scroll"] }
-    SPACING_WITH_AUTO = -> { ["auto", SPACING] }
+    SPACING_WITH_AUTO_AND_ARBITRARY = -> { ["auto", IS_ARBITRARY_VALUE, SPACING] }
+    SPACING_WITH_ARBITRARY = -> { [IS_ARBITRARY_VALUE, SPACING] }
     LENGTH_WITH_EMPTY = -> { ["", IS_LENGTH] }
     NUMBER_WITH_AUTO_AND_ARBITRARY = -> { ["auto", IS_NUMBER, IS_ARBITRARY_VALUE] }
     POSITIONS = -> {
@@ -114,29 +115,29 @@ module TailwindMerge
       theme: {
         "colors" => [IS_ANY],
         "spacing" => [IS_LENGTH],
-        "blur" => ["none", "", IS_TSHIRT_SIZE, IS_ARBITRARY_LENGTH],
+        "blur" => ["none", "", IS_TSHIRT_SIZE, IS_ARBITRARY_VALUE],
         "brightness" => NUMBER.call,
         "border-color" => [COLORS],
-        "border-radius" => ["none", "", "full", IS_TSHIRT_SIZE, IS_ARBITRARY_LENGTH],
-        "border-spacing" => [SPACING],
+        "border-radius" => ["none", "", "full", IS_TSHIRT_SIZE, IS_ARBITRARY_VALUE],
+        "border-spacing" => SPACING_WITH_ARBITRARY.call,
         "border-width" => LENGTH_WITH_EMPTY.call,
         "contrast" => NUMBER.call,
         "grayscale" => ZERO_AND_EMPTY.call,
         "hue-rotate" => NUMBER_AND_ARBITRARY.call,
         "invert" => ZERO_AND_EMPTY.call,
-        "gap" => [SPACING],
+        "gap" => SPACING_WITH_ARBITRARY.call,
         "gradient-color-stops" => [COLORS],
         "gradient-color-stop-positions" => [IS_PERCENT, IS_ARBITRARY_LENGTH],
-        "inset" => SPACING_WITH_AUTO.call,
-        "margin" => SPACING_WITH_AUTO.call,
+        "inset" => SPACING_WITH_AUTO_AND_ARBITRARY.call,
+        "margin" => SPACING_WITH_AUTO_AND_ARBITRARY.call,
         "opacity" => NUMBER.call,
-        "padding" => [SPACING],
+        "padding" => SPACING_WITH_ARBITRARY.call,
         "saturate" => NUMBER.call,
         "scale" => NUMBER.call,
         "sepia" => ZERO_AND_EMPTY.call,
         "skew" => NUMBER_AND_ARBITRARY.call,
-        "space" => [SPACING],
-        "translate" => [SPACING],
+        "space" => SPACING_WITH_ARBITRARY.call,
+        "translate" => SPACING_WITH_ARBITRARY.call,
       },
       class_groups: { # rubocop:disable Metrics/CollectionLiteralLength
         # Layout
@@ -327,7 +328,7 @@ module TailwindMerge
         # Flex Basis
         # @see https://tailwindcss.com/docs/flex-basis
         ##
-        "basis" => [{ "basis" => SPACING_WITH_AUTO.call }],
+        "basis" => [{ "basis" => SPACING_WITH_AUTO_AND_ARBITRARY.call }],
         ##
         # Flex Direction
         # @see https://tailwindcss.com/docs/flex-direction
@@ -589,12 +590,12 @@ module TailwindMerge
         # Width
         # @see https://tailwindcss.com/docs/width
         ##
-        "w" => [{ "w" => ["auto", "min", "max", "fit", SPACING] }],
+        "w" => [{ "w" => ["auto", "min", "max", "fit", IS_ARBITRARY_VALUE, SPACING] }],
         ##
         # Min-Width
         # @see https://tailwindcss.com/docs/min-width
         ##
-        "min-w" => [{ "min-w" => ["min", "max", "fit", IS_LENGTH] }],
+        "min-w" => [{ "min-w" => ["min", "max", "fit", IS_ARBITRARY_VALUE, IS_LENGTH] }],
         ##
         # Max-Width
         # @see https://tailwindcss.com/docs/max-width
@@ -611,7 +612,7 @@ module TailwindMerge
               "prose",
               { "screen" => [IS_TSHIRT_SIZE] },
               IS_TSHIRT_SIZE,
-              IS_ARBITRARY_LENGTH,
+              IS_ARBITRARY_VALUE,
             ],
           },
         ],
@@ -619,17 +620,17 @@ module TailwindMerge
         # Height
         # @see https://tailwindcss.com/docs/height
         ##
-        "h" => [{ "h" => ["auto", "min", "max", "fit", SPACING] }],
+        "h" => [{ "h" => [IS_ARBITRARY_VALUE, SPACING, "auto", "min", "max", "fit"] }],
         ##
         # Min-Height
         # @see https://tailwindcss.com/docs/min-height
         ##
-        "min-h" => [{ "min-h" => ["min", "max", "fit", IS_LENGTH] }],
+        "min-h" => [{ "min-h" => ["min", "max", "fit", IS_ARBITRARY_VALUE, IS_LENGTH] }],
         ##
         # Max-Height
         # @see https://tailwindcss.com/docs/max-height
         ##
-        "max-h" => [{ "max-h" => [SPACING, "min", "max", "fit"] }],
+        "max-h" => [{ "max-h" => [IS_ARBITRARY_VALUE, SPACING, "min", "max", "fit"] }],
         # Typography
         ##
         # Font Size
@@ -714,7 +715,7 @@ module TailwindMerge
               "wide",
               "wider",
               "widest",
-              IS_ARBITRARY_LENGTH,
+              IS_ARBITRARY_VALUE,
             ],
           }, # rubocop:enable Metrics/CollectionLiteralLength
         ],
@@ -728,7 +729,7 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/line-height
         ##
         "leading" => [
-          { "leading" => ["none", "tight", "snug", "normal", "relaxed", "loose", IS_LENGTH] },
+          { "leading" => ["none", "tight", "snug", "normal", "relaxed", "loose", IS_ARBITRARY_VALUE, IS_LENGTH] },
         ],
         #
         # List Style Image
@@ -790,7 +791,7 @@ module TailwindMerge
         # Text Underline Offset
         # @see https://tailwindcss.com/docs/text-underline-offset
         ##
-        "underline-offset" => [{ "underline-offset" => ["auto", IS_LENGTH] }],
+        "underline-offset" => [{ "underline-offset" => ["auto", IS_ARBITRARY_VALUE, IS_LENGTH] }],
         ##
         # Text Decoration Color
         # @see https://tailwindcss.com/docs/text-decoration-color
@@ -810,7 +811,7 @@ module TailwindMerge
         # Text Indent
         # @see https://tailwindcss.com/docs/text-indent
         ##
-        "indent" => [{ "indent" => [SPACING] }],
+        "indent" => [{ "indent" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Vertical Alignment
         # @see https://tailwindcss.com/docs/vertical-align
@@ -826,7 +827,7 @@ module TailwindMerge
               "text-bottom",
               "sub",
               "super",
-              IS_ARBITRARY_LENGTH,
+              IS_ARBITRARY_VALUE,
             ],
           },
         ],
@@ -1145,7 +1146,7 @@ module TailwindMerge
         # Outline Offset
         # @see https://tailwindcss.com/docs/outline-offset
         ##
-        "outline-offset" => [{ "outline-offset" => [IS_LENGTH] }],
+        "outline-offset" => [{ "outline-offset" => [IS_ARBITRARY_VALUE, IS_LENGTH] }],
         ##
         # Outline Width
         # @see https://tailwindcss.com/docs/outline-width
@@ -1533,92 +1534,92 @@ module TailwindMerge
         # Scroll Margin
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-m" => [{ "scroll-m" => [SPACING] }],
+        "scroll-m" => [{ "scroll-m" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin X
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-mx" => [{ "scroll-mx" => [SPACING] }],
+        "scroll-mx" => [{ "scroll-mx" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin Y
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-my" => [{ "scroll-my" => [SPACING] }],
+        "scroll-my" => [{ "scroll-my" => SPACING_WITH_ARBITRARY.call }],
         #
         # Scroll Margin Start
         # @see https://tailwindcss.com/docs/scroll-margin
         #
-        "scroll-ms" => [{ "scroll-ms" => [SPACING] }],
+        "scroll-ms" => [{ "scroll-ms" => SPACING_WITH_ARBITRARY.call }],
         #
         # Scroll Margin End
         # @see https://tailwindcss.com/docs/scroll-margin
         #
-        "scroll-me" => [{ "scroll-me" => [SPACING] }],
+        "scroll-me" => [{ "scroll-me" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin Top
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-mt" => [{ "scroll-mt" => [SPACING] }],
+        "scroll-mt" => [{ "scroll-mt" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin Right
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-mr" => [{ "scroll-mr" => [SPACING] }],
+        "scroll-mr" => [{ "scroll-mr" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin Bottom
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-mb" => [{ "scroll-mb" => [SPACING] }],
+        "scroll-mb" => [{ "scroll-mb" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Margin Left
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
-        "scroll-ml" => [{ "scroll-ml" => [SPACING] }],
+        "scroll-ml" => [{ "scroll-ml" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-p" => [{ "scroll-p" => [SPACING] }],
+        "scroll-p" => [{ "scroll-p" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding X
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-px" => [{ "scroll-px" => [SPACING] }],
+        "scroll-px" => [{ "scroll-px" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding Y
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-py" => [{ "scroll-py" => [SPACING] }],
+        "scroll-py" => [{ "scroll-py" => SPACING_WITH_ARBITRARY.call }],
         #
         # Scroll Padding Start
         # @see https://tailwindcss.com/docs/scroll-padding
         #
-        "scroll-ps" => [{ "scroll-ps" => [SPACING] }],
+        "scroll-ps" => [{ "scroll-ps" => SPACING_WITH_ARBITRARY.call }],
         #
         # Scroll Padding End
         # @see https://tailwindcss.com/docs/scroll-padding
         #
-        "scroll-pe" => [{ "scroll-pe" => [SPACING] }],
+        "scroll-pe" => [{ "scroll-pe" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding Top
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-pt" => [{ "scroll-pt" => [SPACING] }],
+        "scroll-pt" => [{ "scroll-pt" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding Right
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-pr" => [{ "scroll-pr" => [SPACING] }],
+        "scroll-pr" => [{ "scroll-pr" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding Bottom
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-pb" => [{ "scroll-pb" => [SPACING] }],
+        "scroll-pb" => [{ "scroll-pb" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Padding Left
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
-        "scroll-pl" => [{ "scroll-pl" => [SPACING] }],
+        "scroll-pl" => [{ "scroll-pl" => SPACING_WITH_ARBITRARY.call }],
         ##
         # Scroll Snap Align
         # @see https://tailwindcss.com/docs/scroll-snap-align

data/lib/tailwind_merge/validators.rb

@@ -27,7 +27,7 @@ module TailwindMerge
 
     ARBITRARY_VALUE_REGEX = /^\[(?:([a-z-]+):)?(.+)\]$/i
     FRACTION_REGEX = %r{^\d+/\d+$}
-    LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|^0$/
+    LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/
     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)/

data/lib/tailwind_merge/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwind_merge
 version: !ruby/object:Gem::Version
-  version: 0.7.2
+  version: 0.7.3
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-06-08 00:00:00.000000000 Z
+date: 2023-06-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: lru_redux
@@ -100,7 +100,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.13
+rubygems_version: 3.4.14
 signing_key: 
 specification_version: 4
 summary: Utility function to efficiently merge Tailwind CSS classes without style