Fix theme lookup when variable names contain escaped dots (#1466)

Fixes #1465

Author: thecrypticace

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

@@ -191,6 +191,7 @@ test('Inlining calc expressions using the design system', () => {
   let map = new Map<string, string>([
     ['--spacing', '0.25rem'],
     ['--color-red-500', 'oklch(0.637 0.237 25.331)'],
+    ['--font-size.md', '1rem'],
   ])
 
   let state: State = {
@@ -240,4 +241,9 @@ test('Inlining calc expressions using the design system', () => {
   expect(addThemeValues('var(--color-red-500)', state, settings)).toBe(
     'var(--color-red-500) /* oklch(0.637 0.237 25.331) = #fb2c36 */',
   )
+
+  // Variables containing dots
+  expect(addThemeValues('var(--font-size\\.md)', state, settings)).toBe(
+    'var(--font-size\\.md) /* 1rem = 10px */',
+  )
 })

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

@@ -8,5 +8,9 @@ export function resolveVariableValue(design: DesignSystem, name: string): string
     name = `--${name.slice(prefix.length + 3)}`
   }
 
+  // Variables have to escape the `.` but the theme system in v4 does not store
+  // the values with escapes so name lookups will fail.
+  name = name.replaceAll('\\.', '.')
+
   return design.resolveThemeValue?.(name, true) ?? null
 }

packages/vscode-tailwindcss/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Show color swatches for OKLCH colors with units in all positions ([#1442](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1442))
 - Fix incorrect diagnostic for `--theme(--some-var inline)` ([#1443](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1443))
 - Bump precision of evaluated calc expressions ([#1449](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1449))
+- Fix theme lookup when variable names contain escaped dots ([#1466](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1466))
 
 ## 0.14.26