Fix display of color swatches using new v4 oklch color palette (#1073)

The new oklch color palette doesn't show swatches in some cases due to
how we were detecting fallback values for CSS variables. I've made the
code much more general and it should be able to handle any number of CSS
var fallbacks regardless of how its nested.

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

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

@@ -1,4 +1,4 @@
-import { test } from 'vitest'
+import { test, expect } from 'vitest'
 import { withFixture } from '../common'
 
 withFixture('basic', (c) => {
@@ -169,9 +169,9 @@ withFixture('v4/basic', (c) => {
       {
         range: { start: { line: 0, character: 12 }, end: { line: 0, character: 22 } },
         color: {
-          red: 0.9372549019607843,
-          green: 0.26666666666666666,
-          blue: 0.26666666666666666,
+          red: expect.closeTo(0.98, 0.01),
+          green: expect.closeTo(0.172, 0.01),
+          blue: expect.closeTo(0.21, 0.01),
           alpha: 1,
         },
       },
@@ -184,9 +184,9 @@ withFixture('v4/basic', (c) => {
       {
         range: { start: { line: 0, character: 12 }, end: { line: 0, character: 25 } },
         color: {
-          red: 0.9372549019607843,
-          green: 0.26666666666666666,
-          blue: 0.26666666666666666,
+          red: expect.closeTo(0.98, 0.01),
+          green: expect.closeTo(0.172, 0.01),
+          blue: expect.closeTo(0.21, 0.01),
           alpha: 0.2,
         },
       },

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

@@ -310,8 +310,8 @@ withFixture('v4/basic', (c) => {
     let result = await completion({ lang, text, position, settings })
     let textEdit = expect.objectContaining({ range: { start: position, end: position } })
 
-    expect(result.items.length).toBe(12398)
-    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(224)
+    expect(result.items.length).toBe(12492)
+    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(270)
     expect(result).toEqual({
       isIncomplete: false,
       items: expect.arrayContaining([
@@ -553,11 +553,11 @@ withFixture('v4/basic', (c) => {
     expect(resolved).toEqual({
       ...item,
       detail:
-        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--font-size-sm--line-height, 1.25rem /* 12.5px */);',
+        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));',
       documentation: {
         kind: 'markdown',
         value:
-          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--font-size-sm--line-height, 1.25rem /* 12.5px */);\n}\n```',
+          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));\n}\n```',
       },
     })
   })
@@ -579,8 +579,8 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'background-color: var(--color-red-500, #ef4444);',
-      documentation: '#ef4444',
+      detail: 'background-color: var(--color-red-500, oklch(0.637 0.237 25.331));',
+      documentation: '#fb2c36',
     })
   })
 })

packages/tailwindcss-language-server/tests/fixtures/v4/auto-content-split/package-lock.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "tailwindcss": "^4.0.0-alpha.25",
-    "@tailwindcss/oxide": "^4.0.0-alpha.25"
+    "tailwindcss": "^4.0.0-alpha.30",
+    "@tailwindcss/oxide": "^4.0.0-alpha.30"
   }
 }