Add support for getThemeEntries API

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

@@ -40,6 +40,7 @@ import { customClassesIn } from './util/classes'
 import { IS_SCRIPT_SOURCE, IS_TEMPLATE_SOURCE } from './metadata/extensions'
 import * as postcss from 'postcss'
 import { findFileDirective } from './completions/file-paths'
+import type { ThemeEntry } from './util/v4'
 
 let isUtil = (className) =>
   Array.isArray(className.__info)
@@ -789,6 +790,8 @@ function provideThemeVariableCompletions(
   position: Position,
   _context?: CompletionContext,
 ): CompletionList {
+  if (!state.v4) return null
+
   // Make sure we're in a CSS "context'
   if (!isCssContext(state, document, position)) return null
   let text = getTextWithoutComments(document, 'css', {
@@ -804,52 +807,50 @@ function provideThemeVariableCompletions(
   if (themeBlock === -1) return null
   if (braceLevel(text.slice(themeBlock)) !== 1) return null
 
-  function themeVar(label: string) {
-    return {
-      label,
-      kind: CompletionItemKind.Variable,
-      // insertTextFormat: InsertTextFormat.Snippet,
-      // textEditText: `${label}-[\${1}]`,
-    }
+  let entries: ThemeEntry[] = [
+    // Polyfill data for older versions of the design system
+    { kind: 'variable', name: '--default-transition-duration' },
+    { kind: 'variable', name: '--default-transition-timing-function' },
+    { kind: 'variable', name: '--default-font-family' },
+    { kind: 'variable', name: '--default-font-feature-settings' },
+    { kind: 'variable', name: '--default-font-variation-settings' },
+    { kind: 'variable', name: '--default-mono-font-family' },
+    { kind: 'variable', name: '--default-mono-font-feature-settings' },
+    { kind: 'variable', name: '--default-mono-font-variation-settings' },
+    { kind: 'namespace', name: '--breakpoint' },
+    { kind: 'namespace', name: '--color' },
+    { kind: 'namespace', name: '--animate' },
+    { kind: 'namespace', name: '--blur' },
+    { kind: 'namespace', name: '--radius' },
+    { kind: 'namespace', name: '--shadow' },
+    { kind: 'namespace', name: '--inset-shadow' },
+    { kind: 'namespace', name: '--drop-shadow' },
+    { kind: 'namespace', name: '--spacing' },
+    { kind: 'namespace', name: '--width' },
+    { kind: 'namespace', name: '--font-family' },
+    { kind: 'namespace', name: '--font-size' },
+    { kind: 'namespace', name: '--letter-spacing' },
+    { kind: 'namespace', name: '--line-height' },
+    { kind: 'namespace', name: '--transition-timing-function' },
+  ]
+
+  if (state.designSystem.getThemeEntries) {
+    entries = state.designSystem.getThemeEntries()
   }
 
-  function themeNamespace(label: string) {
-    return {
-      label: `${label}-`,
+  let items: CompletionItem[] = []
+
+  for (let entry of entries) {
+    items.push({
+      label: entry.kind === 'namespace' ? `${entry.name}-` : entry.name,
       kind: CompletionItemKind.Variable,
-      // insertTextFormat: InsertTextFormat.Snippet,
-      // textEditText: `${label}-[\${1}]`,
-    }
+    })
   }
 
   return withDefaults(
     {
       isIncomplete: false,
-      items: [
-        themeVar('--default-transition-duration'),
-        themeVar('--default-transition-timing-function'),
-        themeVar('--default-font-family'),
-        themeVar('--default-font-feature-settings'),
-        themeVar('--default-font-variation-settings'),
-        themeVar('--default-mono-font-family'),
-        themeVar('--default-mono-font-feature-settings'),
-        themeVar('--default-mono-font-variation-settings'),
-        themeNamespace('--breakpoint'),
-        themeNamespace('--color'),
-        themeNamespace('--animate'),
-        themeNamespace('--blur'),
-        themeNamespace('--radius'),
-        themeNamespace('--shadow'),
-        themeNamespace('--inset-shadow'),
-        themeNamespace('--drop-shadow'),
-        themeNamespace('--spacing'),
-        themeNamespace('--width'),
-        themeNamespace('--font-family'),
-        themeNamespace('--font-size'),
-        themeNamespace('--letter-spacing'),
-        themeNamespace('--line-height'),
-        themeNamespace('--transition-timing-function'),
-      ],
+      items,
     },
     {
       data: {

packages/tailwindcss-language-service/src/util/v4/design-system.ts

@@ -24,6 +24,11 @@ export interface VariantEntry {
 
 export type VariantFn = (rule: Rule, variant: NamedVariant) => null | void
 
+export interface ThemeEntry {
+  kind: 'namespace' | 'variable'
+  name: string
+}
+
 export interface DesignSystem {
   theme: Theme
   variants: Map<string, VariantFn>
@@ -32,12 +37,15 @@ export interface DesignSystem {
   getClassOrder(classes: string[]): [string, bigint | null][]
   getClassList(): ClassEntry[]
   getVariants(): VariantEntry[]
+
+  // Optional because it did not exist in earlier v4 alpha versions
+  resolveThemeValue?(path: string): string | undefined
+
+  // Earlier v4 versions did not have this method
+  getThemeEntries?(): ThemeEntry[]
 }
 
 export interface DesignSystem {
   compile(classes: string[]): postcss.Root[]
   toCss(nodes: postcss.Root | postcss.Node[]): string
-
-  // Optional because it did not exist in earlier v4 alpha versions
-  resolveThemeValue?(path: string): string | undefined
 }