From 405a4655869ef414bb8e838f78db46a828f9467a Mon Sep 17 00:00:00 2001 From: "Garen J. Torikian" Date: Tue, 30 Jan 2024 17:45:27 -0500 Subject: [PATCH] Fix stroke-color being incorrectly detected as stroke-width --- lib/tailwind_merge/validators.rb | 6 +++++- test/test_colors.rb | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/tailwind_merge/validators.rb b/lib/tailwind_merge/validators.rb index 28e35cc..bf2f232 100644 --- a/lib/tailwind_merge/validators.rb +++ b/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 } diff --git a/test/test_colors.rb b/test/test_colors.rb index c07eba3..05aeac4 100644 --- a/test/test_colors.rb +++ b/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