Always return theme values when known

Author: thecrypticace

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

@@ -5,7 +5,7 @@ import { DesignSystem } from './v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
   let map = new Map<string, string>([
-      ['--foo', 'blue'],
+      ['--known', 'blue'],
   ])
 
   let state: State = {
@@ -42,12 +42,15 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
     ),
   ).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')
+  // 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')
 
-  // Values from the theme are used when no fallback is provided
-  expect(replaceCssVarsWithFallbacks(state, 'var(--foo)')).toBe('blue')
+  // Unknown theme keys use a fallback if provided
+  expect(replaceCssVarsWithFallbacks(state, 'var(--unknown, red)')).toBe(' red')
 
-  // Values not in the theme don't get replaced if no fallback is provided
-  expect(replaceCssVarsWithFallbacks(state, 'var(--bar)')).toBe('var(--bar)')
+  // 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,18 +1,20 @@
-import type { State } from "./state"
+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
+    // 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('--')) {
-      return state.designSystem.resolveThemeValue?.(name) ?? null
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value !== null) return value
+    }
+
+    if (fallback) {
+      return fallback
     }
 
-    // Don't replace the variable otherwise
+    // Don't touch it since there's no suitable replacement
     return null
   })
 }
@@ -34,8 +36,17 @@ function replaceCssVars(str: string, replace: CssVarReplacer): string {
       } else if (str[j] === ',' && depth === 0 && fallbackStart === null) {
         fallbackStart = j + 1
       } else if (str[j] === ')' && depth === 0) {
-        let varName = str.slice(i + 4, j)
-        let fallback = fallbackStart === null ? null : str.slice(fallbackStart, j)
+        let varName: string
+        let fallback: string | null
+
+        if (fallbackStart === null) {
+          varName = str.slice(i + 4, j)
+          fallback = null
+        } else {
+          varName = str.slice(i + 4, fallbackStart - 1)
+          fallback = str.slice(fallbackStart, j)
+        }
+
         let replacement = replace(varName, fallback)
 
         if (replacement !== null) {
@@ -47,7 +58,8 @@ function replaceCssVars(str: string, replace: CssVarReplacer): string {
           break
         }
 
-        // Skip past the closing parenthesis and onto the next `var(`
+        // It can't be replaced so we can avoid unncessary work by skipping over
+        // the entire var(…) call.
         i = j + 1
         break
       }