diff --git a/packages/tailwindcss-language-server/tests/colors/colors.test.js b/packages/tailwindcss-language-server/tests/colors/colors.test.js index 2a584591..f39ee1d9 100644 --- a/packages/tailwindcss-language-server/tests/colors/colors.test.js +++ b/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: '
', + }) + + 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) }, + ]) + }, +}) diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts index d0427bf9..4b0d3b84 100644 --- a/packages/tailwindcss-language-service/src/util/color.ts +++ b/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) +} diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index fc2f7469..6e8e0867 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/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