Lookup variables in the CSS theme

Author: thecrypticace

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

@@ -172,6 +172,22 @@ export async function loadDesignSystem(
         ? postcss.root({ nodes }).toString().trim()
         : nodes.toString().trim()
     },
+
+    lookupThemeValue(themeKey: string): string | null {
+      if (!themeKey.startsWith('--')) {
+        return null
+      }
+
+      let details = design.theme.values.get(themeKey)
+
+      // Early versions of v4 had string values
+      if (typeof details === 'string') {
+        return details
+      }
+
+      // Later versions have an object with more data
+      return details.value
+    }
   })
 
   return design

packages/tailwindcss-language-service/src/util/color.ts

@@ -50,15 +50,15 @@ const colorRegex = new RegExp(
   'gi',
 )
 
-function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
+function getColorsInString(state: State, str: string): (culori.Color | KeywordColor)[] {
   if (/(?:box|drop)-shadow/.test(str)) return []
 
   function toColor(match: RegExpMatchArray) {
     let color = match[1].replace(/var\([^)]+\)/, '1')
     return getKeywordColor(color) ?? culori.parse(color)
   }
 
-  str = replaceCssVarsWithFallbacks(str)
+  str = replaceCssVarsWithFallbacks(state, str)
   str = removeColorMixWherePossible(str)
 
   let possibleColors = str.matchAll(colorRegex)
@@ -67,6 +67,7 @@ function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
 }
 
 function getColorFromDecls(
+  state: State,
   decls: Record<string, string | string[]>,
 ): culori.Color | KeywordColor | null {
   let props = Object.keys(decls).filter((prop) => {
@@ -93,7 +94,9 @@ function getColorFromDecls(
 
   const propsToCheck = areAllCustom ? props : nonCustomProps
 
-  const colors = propsToCheck.flatMap((prop) => ensureArray(decls[prop]).flatMap(getColorsInString))
+  const colors = propsToCheck.flatMap((prop) => ensureArray(decls[prop]).flatMap((str) => {
+    return getColorsInString(state, str)
+  }))
 
   // check that all of the values are valid colors
   // if (colors.some((color) => color instanceof TinyColor && !color.isValid)) {
@@ -164,7 +167,7 @@ function getColorFromRoot(state: State, css: postcss.Root): culori.Color | Keywo
     decls[decl.prop].push(decl.value)
   })
 
-  return getColorFromDecls(decls)
+  return getColorFromDecls(state, decls)
 }
 
 export function getColor(state: State, className: string): culori.Color | KeywordColor | null {
@@ -180,7 +183,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
     if (state.classNames) {
       const item = dlv(state.classNames.classNames, [className, '__info'])
       if (item && item.__rule) {
-        return getColorFromDecls(removeMeta(item))
+        return getColorFromDecls(state, removeMeta(item))
       }
     }
 
@@ -209,7 +212,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
         decls[decl.prop] = decl.value
       }
     })
-    return getColorFromDecls(decls)
+    return getColorFromDecls(state, decls)
   }
 
   let parts = getClassNameParts(state, className)
@@ -218,7 +221,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
   const item = dlv(state.classNames.classNames, [...parts, '__info'])
   if (!item.__rule) return null
 
-  return getColorFromDecls(removeMeta(item))
+  return getColorFromDecls(state, removeMeta(item))
 }
 
 export function getColorFromValue(value: unknown): culori.Color | KeywordColor | null {

packages/tailwindcss-language-service/src/util/css-vars.test.ts

@@ -1,26 +1,53 @@
 import { expect, test } from 'vitest'
 import { replaceCssVarsWithFallbacks } from './css-vars'
+import { State } from './state'
+import { DesignSystem } from './v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
-  expect(replaceCssVarsWithFallbacks('var(--foo, red)')).toBe(' red')
-  expect(replaceCssVarsWithFallbacks('var(--foo, )')).toBe(' ')
+  let map = new Map<string, string>([
+      ['--foo', 'blue'],
+  ])
 
-  expect(replaceCssVarsWithFallbacks('rgb(var(--foo, 255 0 0))')).toBe('rgb( 255 0 0)')
-  expect(replaceCssVarsWithFallbacks('rgb(var(--foo, var(--bar)))')).toBe('rgb( var(--bar))')
+  let state: State = {
+    enabled: true,
+    designSystem: {
+      lookupThemeValue: (name) => map.get(name) ?? null,
+    } as DesignSystem,
+  }
+
+  expect(replaceCssVarsWithFallbacks(state, 'var(--foo, red)')).toBe(' red')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--foo, )')).toBe(' ')
+
+  expect(replaceCssVarsWithFallbacks(state, 'rgb(var(--foo, 255 0 0))')).toBe('rgb( 255 0 0)')
+  expect(replaceCssVarsWithFallbacks(state, 'rgb(var(--foo, var(--bar)))')).toBe('rgb( var(--bar))')
 
   expect(
-    replaceCssVarsWithFallbacks('rgb(var(var(--bar, var(--baz), var(--qux), var(--thing))))'),
+    replaceCssVarsWithFallbacks(
+      state,
+      'rgb(var(var(--bar, var(--baz), var(--qux), var(--thing))))',
+    ),
   ).toBe('rgb(var(var(--bar, var(--baz), var(--qux), var(--thing))))')
 
   expect(
     replaceCssVarsWithFallbacks(
+      state,
       'rgb(var(--one, var(--bar, var(--baz), var(--qux), var(--thing))))',
     ),
   ).toBe('rgb(  var(--baz), var(--qux), var(--thing))')
 
   expect(
     replaceCssVarsWithFallbacks(
+      state,
       'color-mix(in srgb, var(--color-primary, oklch(0 0 0 / 2.5)), var(--color-secondary, oklch(0 0 0 / 2.5)), 50%)',
     ),
   ).toBe('color-mix(in srgb,  oklch(0 0 0 / 2.5),  oklch(0 0 0 / 2.5), 50%)')
+
+  // Fallbacks take precedence over theme values
+  expect(replaceCssVarsWithFallbacks(state, 'var(--foo, red)')).toBe(' red')
+
+  // Values from the theme are used when no fallback is provided
+  expect(replaceCssVarsWithFallbacks(state, 'var(--foo)')).toBe('blue')
+
+  // Values not in the theme don't get replaced if no fallback is provided
+  expect(replaceCssVarsWithFallbacks(state, 'var(--bar)')).toBe('var(--bar)')
 })

packages/tailwindcss-language-service/src/util/css-vars.ts

@@ -1,8 +1,17 @@
-export function replaceCssVarsWithFallbacks(str: string): string {
+import type { State } from "./state"
+
+export function replaceCssVarsWithFallbacks(state: State, str: string): string {
   return replaceCssVars(str, (name, fallback) => {
     // If we have a fallback then we should use that value directly
     if (fallback) return fallback
 
+    // In a v4 project we should attempt to look up the value from the theme
+    // this is because not all v4 projects will generate utilities where
+    // variables have fallbacks
+    if (state.designSystem) {
+      return state.designSystem.lookupThemeValue(name)
+    }
+
     // Don't replace the variable otherwise
     return null
   })

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

@@ -6,6 +6,12 @@ export interface Theme {
   // Prefix didn't exist for earlier Tailwind versions
   prefix?: string
   entries(): [string, any][]
+
+  // In early alpha versions theme contained string values
+  // Later versions turned this into an object with more data
+  // but we only care about the value
+  // TODO: This is private API to Tailwind and we shouldn't be using it
+  values: Map<string, string | { value: string }>
 }
 
 export interface ClassMetadata {
@@ -37,4 +43,5 @@ export interface DesignSystem {
 export interface DesignSystem {
   compile(classes: string[]): postcss.Root[]
   toCss(nodes: postcss.Root | postcss.Node[]): string
+  lookupThemeValue(themeKey: string): string | null
 }