Merge pull request #24 from gjtorikian/the-strokes

Fix stroke-color being incorrectly detected as stroke-width

lib/tailwind_merge/validators.rb

@@ -31,6 +31,7 @@ def integer?(x)
     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))|\b(calc|min|max|clamp)\(.+\)|^0$/
     TSHIRT_UNIT_REGEX = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
+    COLOR_FUNCTION_REGEX = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/
     # 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)\(.+\)$/
@@ -39,7 +40,10 @@ def integer?(x)
     IMAGE_LABELS = Set.new(["image", "url"]).freeze
 
     is_length_only = ->(value) {
-      LENGTH_UNIT_REGEX.match?(value)
+      # `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
+      # For example, `hsl(0 0% 0%)` would be classified as a length without this check.
+      # I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
+      LENGTH_UNIT_REGEX.match?(value) && !COLOR_FUNCTION_REGEX.match?(value)
     }
 
     is_never = ->(_) { false }

lib/tailwind_merge/version.rb

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

test/test_colors.rb

@@ -10,5 +10,6 @@ def setup
   def test_handles_color_conflicts_properly
     assert_equal("bg-hotpink", @merger.merge("bg-grey-5 bg-hotpink"))
     assert_equal("hover:bg-hotpink", @merger.merge("hover:bg-grey-5 hover:bg-hotpink"))
+    assert_equal("stroke-[hsl(350_80%_0%)] stroke-[10px]", @merger.merge("stroke-[hsl(350_80%_0%)] stroke-[10px]"))
   end
 end