diff --git a/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts b/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts index 0db2d807..bbbb10f3 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts +++ b/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([ ['--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 */', + ) }) diff --git a/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts b/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts index 5f7f353e..fe25cdb4 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts +++ b/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 } diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 8f82faa5..677f5854 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/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