Repository: dcastil/tailwind-merge (ts)

Issue:
Fix arbitrary value using `color-mix()` function not being recognized as color
Problem from https://x.com/initjean/status/1932440932277752225 and https://gist.github.com/JeanMeijer/2471088dcabb136ca6f906054f4df723.

`border-[color-mix(in_oklab,var(--background),var(--calendar-color)_30%)]` and `border` are merged together because of the `30%` in the arbitrary value being recognized as a length. But `color-mix()` should give us signal that this is a color instead.

Pull request description:
Fix arbitrary value using `color-mix()` not being detected as color
Closes #590

Patch:
diff --git a/src/lib/validators.ts b/src/lib/validators.ts
index 28c9d53..54db549 100644
--- a/src/lib/validators.ts
+++ b/src/lib/validators.ts
@@ -4,7 +4,7 @@ const fractionRegex = /^\d+\/\d+$/
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
 const lengthUnitRegex =
     /\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$/
-const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/
 // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
 const imageRegex =


Test patch:
diff --git a/tests/arbitrary-values.test.ts b/tests/arbitrary-values.test.ts
index 6a4d047..e2c33c9 100644
--- a/tests/arbitrary-values.test.ts
+++ b/tests/arbitrary-values.test.ts
@@ -75,6 +75,9 @@ test('handles ambiguous arbitrary values correctly', () => {
             'bg-none bg-[url(.)] bg-[image:.] bg-[url:.] bg-[linear-gradient(.)] bg-linear-to-r',
         ),
     ).toBe('bg-linear-to-r')
+    expect(
+        twMerge('border-[color-mix(in_oklab,var(--background),var(--calendar-color)_30%)] border'),
+    ).toBe('border-[color-mix(in_oklab,var(--background),var(--calendar-color)_30%)] border')
 })
 
 test('handles arbitrary custom properties correctly', () => {