diff --git a/packages/tailwindcss-language-server/src/projects.ts b/packages/tailwindcss-language-server/src/projects.ts index ea440c22..426882a7 100644 --- a/packages/tailwindcss-language-server/src/projects.ts +++ b/packages/tailwindcss-language-server/src/projects.ts @@ -1365,7 +1365,20 @@ function isAtRule(node: Node): node is AtRule { function getVariants(state: State): Array { if (state.v4) { - return state.designSystem.getVariants() + let variants = Array.from(state.designSystem.getVariants()) + + let prefix = state.designSystem.theme.prefix ?? '' + if (prefix.length > 0) { + variants.unshift({ + name: prefix, + values: [], + isArbitrary: false, + hasDash: true, + selectors: () => ['&'], + }) + } + + return variants } if (state.jitContext?.getVariants) { diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index f411ba22..1acf0afd 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -72,6 +72,8 @@ export function completionsFromClassList( } if (state.v4) { + let prefix = state.designSystem.theme.prefix ?? '' + let { variants: existingVariants, offset } = getVariantsFromClassName(state, partialClassName) if ( @@ -277,6 +279,35 @@ export function completionsFromClassList( } } + // TODO: This is a bit of a hack + if (prefix.length > 0) { + // No variants seen: suggest the prefix only + if (existingVariants.length === 0) { + items = items.slice(0, 1) + + return withDefaults( + { + isIncomplete: false, + items, + }, + { + data: { + ...(state.completionItemData ?? {}), + ...(important ? { important } : {}), + variants: existingVariants, + }, + range: replacementRange, + }, + state.editor.capabilities.itemDefaults, + ) + } + + // The first variant is not the prefix: don't suggest anything + if (existingVariants[0] !== prefix) { + return null + } + } + return withDefaults( { isIncomplete: false, diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 733d92f1..e1ec4bf6 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -8,6 +8,7 @@ - Add support for `@custom-variant` ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127)) - Add variant suggestions to `@variant` ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127)) - Don't suggest at-rules when nested that cannot be used in a nested context ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127)) +- Make sure completions work when using prefixes in v4 ([#1129](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1129)) ## 0.12.18