Handle escaped CSS variable names

Author: thecrypticace

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

@@ -18,6 +18,8 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
     ['--circular-1', 'var(--circular-3)'],
     ['--circular-2', 'var(--circular-1)'],
     ['--circular-3', 'var(--circular-2)'],
+
+    ['--escaped\\,name', 'green'],
   ])
 
   let state: State = {
@@ -58,6 +60,9 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
   // Known theme keys are replaced with their values
   expect(replaceCssVarsWithFallbacks(state, 'var(--known)')).toBe('blue')
 
+  // Escaped commas are not treated as separators
+  expect(replaceCssVarsWithFallbacks(state, 'var(--escaped\\,name)')).toBe('green')
+
   // Values from the theme take precedence over fallbacks
   expect(replaceCssVarsWithFallbacks(state, 'var(--known, red)')).toBe('blue')
 

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

@@ -52,6 +52,8 @@ export function replaceCssVars(
         depth++
       } else if (str[j] === ')' && depth > 0) {
         depth--
+      } else if (str[j] === '\\') {
+        j++
       } else if (str[j] === ',' && depth === 0 && fallbackStart === null) {
         fallbackStart = j + 1
       } else if (str[j] === ')' && depth === 0) {