Lookup variables in the CSS theme

Author: thecrypticace

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

@@ -64,7 +64,7 @@ function getColorsInString(state: State, str: string): (culori.Color | KeywordCo
     return getKeywordColor(color) ?? culori.parse(color)
   }
 
-  str = replaceCssVarsWithFallbacks(str)
+  str = replaceCssVarsWithFallbacks(state, str)
   str = removeColorMixWherePossible(str)
 
   let possibleColors = str.matchAll(colorRegex)

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

@@ -1,26 +1,56 @@
 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>([
+      ['--known', '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: {
+      resolveThemeValue: (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%)')
+
+  // Known theme keys are replaced with their values
+  expect(replaceCssVarsWithFallbacks(state, 'var(--known)')).toBe('blue')
+
+  // Values from the theme take precedence over fallbacks
+  expect(replaceCssVarsWithFallbacks(state, 'var(--known, red)')).toBe('blue')
+
+  // Unknown theme keys use a fallback if provided
+  expect(replaceCssVarsWithFallbacks(state, 'var(--unknown, red)')).toBe(' red')
+
+  // Unknown theme keys without fallbacks are not replaced
+  expect(replaceCssVarsWithFallbacks(state, 'var(--unknown)')).toBe('var(--unknown)')
 })

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

@@ -1,5 +1,15 @@
-export function replaceCssVarsWithFallbacks(str: string): string {
+import type { State } from './state'
+
+export function replaceCssVarsWithFallbacks(state: State, str: string): string {
   return replaceCssVars(str, (name, fallback) => {
+    // Replace with the value from the design system first. The design system
+    // take precedences over other sources as that emulates the behavior of a
+    // browser where the fallback is only used if the variable is defined.
+    if (state.designSystem && name.startsWith('--')) {
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value !== null) return value
+    }
+
     if (fallback) {
       return fallback
     }

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

@@ -37,4 +37,7 @@ export interface DesignSystem {
 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
 }