diff --git a/packages/tailwindcss-language-server/tests/completions/completions.test.js b/packages/tailwindcss-language-server/tests/completions/completions.test.js index 090ec872..8fb828cc 100644 --- a/packages/tailwindcss-language-server/tests/completions/completions.test.js +++ b/packages/tailwindcss-language-server/tests/completions/completions.test.js @@ -814,6 +814,39 @@ defineTest({ }, }) +defineTest({ + name: 'v4: class completions show colors when using prefixes', + fs: { + 'app.css': css` + @import 'tailwindcss' prefix(tw); + `, + }, + prepare: async ({ root }) => ({ client: await createClient({ root }) }), + handle: async ({ client }) => { + let document = await client.open({ + lang: 'html', + text: '
', + }) + + //
+ // ^ + let completion = await document.completions({ line: 0, character: 15 }) + + expect(completion).toEqual({ + isIncomplete: false, + items: expect.arrayContaining([ + expect.objectContaining({ + label: 'bg-black', + + // And it's shown as a color + kind: CompletionItemKind.Color, + documentation: '#000000', + }), + ]), + }) + }, +}) + defineTest({ name: 'v4: Completions show inside class functions in JS/TS files', fs: { diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts index 514fc286..1032a1dd 100644 --- a/packages/tailwindcss-language-service/src/util/color.ts +++ b/packages/tailwindcss-language-service/src/util/color.ts @@ -216,6 +216,16 @@ export function getColor(state: State, className: string): culori.Color | Keywor let color = getColorFromRoot(state, css) + let prefix = state.designSystem.theme.prefix ?? '' + + // TODO: Either all consumers of this API should assume there's no prefix + // or pass in correctly prefixed classes + if (prefix && !color && !className.startsWith(prefix + ':')) { + className = `${prefix}:${className}` + css = state.designSystem.compile([className])[0] + color = getColorFromRoot(state, css) + } + return color } diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 3c830f22..bd87b48e 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -2,7 +2,7 @@ ## Prerelease -- Nothing yet! +- Ensure color swatches show up in completions when using a prefix in v4 ([#1422](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1422)) ## 0.14.24