Include the theme prefix in variable completions inside var(…)

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

@@ -957,6 +957,81 @@ defineTest({
   },
 })
 
+defineTest({
+  name: 'v4: Theme key completions in var(…) include the prefix',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss' prefix(tw);
+
+      @theme {
+        --color-custom: #000;
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        .foo {
+          color: var();
+        }
+      `,
+    })
+
+    //   color: var();
+    //             ^
+    let completion = await document.completions({ line: 1, character: 13 })
+
+    expect(completion).toEqual({
+      isIncomplete: false,
+      items: expect.arrayContaining([
+        expect.objectContaining({ label: '--tw-font-sans' }),
+        expect.objectContaining({
+          label: '--tw-color-custom',
+          kind: CompletionItemKind.Color,
+          documentation: '#000000',
+        }),
+      ]),
+    })
+
+    let unprefixed = completion.items.filter((item) => !item.label.startsWith('--tw-'))
+    expect(unprefixed).toHaveLength(0)
+  },
+})
+
+defineTest({
+  name: 'v4: Theme key completions in --theme(…) do not include the prefix',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss' prefix(tw);
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        .foo {
+          color: --theme();
+        }
+      `,
+    })
+
+    //   color: --theme();
+    //                 ^
+    let completion = await document.completions({ line: 1, character: 17 })
+
+    expect(completion).toEqual({
+      isIncomplete: false,
+      items: expect.arrayContaining([expect.objectContaining({ label: '--font-sans' })]),
+    })
+
+    let prefixed = completion.items.filter((item) => item.label.startsWith('--tw-'))
+    expect(prefixed).toHaveLength(0)
+  },
+})
+
 defineTest({
   name: 'v4: class function completions mixed with class attribute completions work',
   fs: {

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -1063,7 +1063,7 @@ function provideCssHelperCompletions(
       match.groups.helper === 'theme' ||
       match.groups.helper === 'var')
   ) {
-    let items: CompletionItem[] = themeKeyCompletions(state)
+    let items: CompletionItem[] = themeKeyCompletions(state, match.groups.helper)
 
     editRange.start.character = match.indices.groups.helper[1] + 1
 
@@ -2563,15 +2563,20 @@ async function knownUtilityFunctionArguments(state: State, fn: UtilityFn): Promi
   return args
 }
 
-export function themeKeyCompletions(state: State): CompletionItem[] {
+export function themeKeyCompletions(state: State, helper?: string): CompletionItem[] {
   if (!state.v4) return null
   if (!state.designSystem) return null
 
   let knownThemeKeys = resolveKnownThemeKeys(state.designSystem)
 
+  // `var(…)` refers to the emitted CSS variables, which include the prefix
+  let prefix = state.designSystem.theme.prefix
+  let variablePrefix = helper === 'var' && prefix ? `--${prefix}-` : '--'
+
   return knownThemeKeys.map((themeKey, index) => {
     let value = state.designSystem.resolveThemeValue(themeKey, true)
     let documentation: string | undefined
+    let label = variablePrefix + themeKey.slice(2)
 
     let color = getColorFromValue(value)
     if (color !== null) {
@@ -2580,7 +2585,7 @@ export function themeKeyCompletions(state: State): CompletionItem[] {
       }
 
       return {
-        label: themeKey,
+        label,
         kind: CompletionItemKind.Color,
         sortText: naturalExpand(index, knownThemeKeys.length),
         detail: value,
@@ -2589,7 +2594,7 @@ export function themeKeyCompletions(state: State): CompletionItem[] {
     }
 
     return {
-      label: themeKey,
+      label,
       kind: CompletionItemKind.Variable,
       sortText: naturalExpand(index, knownThemeKeys.length),
       detail: value,

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Include the theme prefix in variable completions inside `var(…)` ([#1630](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1630))
 
 ## 0.16.0