Parse oklch colors with units in all positions

Author: thecrypticace

packages/tailwindcss-language-server/tests/colors/colors.test.js

@@ -246,6 +246,21 @@ withFixture('v4/basic', (c) => {
     ],
   })
 
+  testColors('oklch colors are parsed with percentages and angles', {
+    text: '<div class="bg-[oklch(62.75%_64.75%_30deg)]">',
+    expected: [
+      {
+        range: { start: { line: 0, character: 12 }, end: { line: 0, character: 43 } },
+        color: {
+          alpha: 1,
+          red: 1,
+          green: 0,
+          blue: 0,
+        },
+      },
+    ],
+  })
+
   testColors('gradient utilities show colors', {
     text: '<div class="from-black from-black/50 via-black via-black/50 to-black to-black/50">',
     expected: [

packages/tailwindcss-language-service/src/util/color.ts

@@ -50,7 +50,7 @@ function getKeywordColor(value: unknown): KeywordColor | null {
 
 // https://github.com/khalilgharbaoui/coloregex
 const colorRegex = new RegExp(
-  `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgba?|hsla?|(?:ok)?(?:lab|lch))\\(\\s*(-?[\\d.]+(%|deg|rad|grad|turn)?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
+  `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgba?|hsla?|(?:ok)?(?:lab|lch))\\(\\s*(-?[\\d.]+(%|deg|rad|grad|turn)?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+(%|deg|rad|grad|turn)?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
     namedColors,
   ).join('|')})(?:$|\\s|\\)|,)`,
   'gi',