Show light color swatch from light-dark() functions (#1199)

Fixes #940

We've decided to only show one swatch for consistency purposes with
completions as they only support a single color swatch.

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

@@ -353,3 +353,38 @@ defineTest({
     ])
   },
 })
+
+defineTest({
+  name: 'colors that use light-dark() resolve to their light color',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+      @theme {
+        --color-primary: light-dark(#ff0000, #0000ff);
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ c: await init(root) }),
+  handle: async ({ c }) => {
+    let textDocument = await c.openDocument({
+      lang: 'html',
+      text: '<div class="bg-primary">',
+    })
+
+    expect(c.project).toMatchObject({
+      tailwind: {
+        version: '4.0.0',
+        isDefaultVersion: true,
+      },
+    })
+
+    let colors = await c.sendRequest(DocumentColorRequest.type, {
+      textDocument,
+    })
+
+    expect(colors).toEqual([
+      //
+      { range: range(0, 12, 0, 22), color: color(1, 0, 0, 1) },
+    ])
+  },
+})

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

@@ -66,6 +66,7 @@ function getColorsInString(state: State, str: string): (culori.Color | KeywordCo
 
   str = replaceCssVarsWithFallbacks(state, str)
   str = removeColorMixWherePossible(str)
+  str = resolveLightDark(str)
 
   let possibleColors = str.matchAll(colorRegex)
 
@@ -280,3 +281,9 @@ function removeColorMixWherePossible(str: string) {
     return culori.formatRgb({ ...parsed, alpha })
   })
 }
+
+const LIGHT_DARK_REGEX = /light-dark\(\s*(.*?)\s*,\s*.*?\s*\)/g
+
+function resolveLightDark(str: string) {
+  return str.replace(LIGHT_DARK_REGEX, (_, lightColor) => lightColor)
+}

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Show light color swatch from light-dark() functions ([#1199](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1199))
 
 ## 0.14.4