Perform CSS variable replacements recursively

Author: thecrypticace

packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts

@@ -65,6 +65,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
   })
 
   css = replaceCssVars(css, {
+    recursive: false,
     replace({ name, range }) {
       if (!name.startsWith('--')) return null
 

packages/tailwindcss-language-service/src/util/rewriting/index.test.ts

@@ -9,7 +9,16 @@ import { State, TailwindCssSettings } from '../state'
 import { DesignSystem } from '../v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
-  let map = new Map<string, string>([['--known', 'blue']])
+  let map = new Map<string, string>([
+    ['--known', 'blue'],
+    ['--level-1', 'var(--known)'],
+    ['--level-2', 'var(--level-1)'],
+    ['--level-3', 'var(--level-2)'],
+
+    ['--circular-1', 'var(--circular-3)'],
+    ['--circular-2', 'var(--circular-1)'],
+    ['--circular-3', 'var(--circular-2)'],
+  ])
 
   let state: State = {
     enabled: true,
@@ -57,6 +66,17 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
 
   // Unknown theme keys without fallbacks are not replaced
   expect(replaceCssVarsWithFallbacks(state, 'var(--unknown)')).toBe('var(--unknown)')
+
+  // Fallbacks are replaced recursively
+  expect(replaceCssVarsWithFallbacks(state, 'var(--unknown,var(--unknown-2,red))')).toBe('red')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--level-1)')).toBe('blue')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--level-2)')).toBe('blue')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--level-3)')).toBe('blue')
+
+  // Circular replacements don't cause infinite loops
+  expect(replaceCssVarsWithFallbacks(state, 'var(--circular-1)')).toBe('var(--circular-3)')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--circular-2)')).toBe('var(--circular-1)')
+  expect(replaceCssVarsWithFallbacks(state, 'var(--circular-3)')).toBe('var(--circular-2)')
 })
 
 test('Evaluating CSS calc expressions', () => {

packages/tailwindcss-language-service/src/util/rewriting/replacements.ts

@@ -17,6 +17,13 @@ export interface Range {
 }
 
 export interface ReplacerOptions {
+  /**
+   * Whether or not the replacement should be performed recursively
+   *
+   * default: true
+   */
+  recursive?: boolean
+
   /**
    * How to replace the CSS variable
    */
@@ -32,6 +39,8 @@ export function replaceCssVars(
   str: string,
   { replace, recursive = true }: ReplacerOptions,
 ): string {
+  let seen = new Set<string>()
+
   for (let i = 0; i < str.length; ++i) {
     if (!str.startsWith('var(', i)) continue
 
@@ -68,9 +77,20 @@ export function replaceCssVars(
           str = str.slice(0, i) + replacement + str.slice(j + 1)
         }
 
-        // We don't want to skip past anything here because `replacement`
-        // might contain more var(…) calls in which case `i` will already
-        // be pointing at the right spot to start looking for them
+        // Move the index back one so it can look at the spot again since it'll
+        // be incremented by the outer loop. However, since we're replacing
+        // variables recursively we might end up in a loop so we need to keep
+        // track of which variables we've already seen and where they were
+        // replaced to avoid infinite loops.
+        if (recursive) {
+          let key = `${i}:${replacement}`
+
+          if (!seen.has(key)) {
+            seen.add(key)
+            i -= 1
+          }
+        }
+
         break
       }
     }