From cf47476e05fafd4e7d464083621fa5f95fa78781 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Sep 2025 11:12:50 -0400 Subject: [PATCH 1/4] Fix variable lookup when it contains escaped dots --- .../src/util/rewriting/index.test.ts | 36 +++++++++++++++++++ .../src/util/rewriting/lookup.ts | 4 +++ 2 files changed, 40 insertions(+) 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..7902c2ed 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts @@ -164,6 +164,42 @@ test('recursive theme replacements (inlined)', () => { expect(inlineThemeValues('var(--mutual-b)', state)).toBe('calc(calc(var(--mutual-b) * 1) + 1)') }) +test('pixel equivalents work with theme variables containing dots', () => { + let map = new Map([ + ['--font-size-sm', '0.875rem'], + ['--font-size.md', '1rem'], + ['--font-size.lg', '1.125rem'], + ['--spacing-4', '1rem'], + ['--spacing.8', '2rem'], + ]) + + let state = { + designSystem: { + theme: { prefix: null } as any, + resolveThemeValue: (name) => map.get(name) ?? null, + } as DesignSystem, + } as State + + let settings = { rootFontSize: 16 } as TailwindCssSettings + + // Test that dotted variables are resolved correctly + expect(addThemeValues('var(--font-size-sm)', state, settings)).toBe( + 'var(--font-size-sm) /* 0.875rem = 14px */', + ) + expect(addThemeValues('var(--font-size\\.md)', state, settings)).toBe( + 'var(--font-size\\.md) /* 1rem = 16px */', + ) + expect(addThemeValues('var(--font-size\\.lg)', state, settings)).toBe( + 'var(--font-size\\.lg) /* 1.125rem = 18px */', + ) + expect(addThemeValues('var(--spacing-4)', state, settings)).toBe( + 'var(--spacing-4) /* 1rem = 16px */', + ) + expect(addThemeValues('var(--spacing.8)', state, settings)).toBe( + 'var(--spacing.8) /* 2rem = 32px */', + ) +}) + test('Evaluating CSS calc expressions', () => { expect(replaceCssCalc('calc(1px + 1px)', (node) => evaluateExpression(node.value))).toBe('2px') expect(replaceCssCalc('calc(1px * 4)', (node) => evaluateExpression(node.value))).toBe('4px') 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 } From 26174a3878a24a7f391de78ac9b5af0328574f4b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Sep 2025 11:13:32 -0400 Subject: [PATCH 2/4] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 8f82faa5..ad2966a5 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 variable lookup when it contains escaped dots ([#1466](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1466)) ## 0.14.26 From a1611407afb4e9759892fc6ed3575edccec901dd Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Sep 2025 11:17:09 -0400 Subject: [PATCH 3/4] Simplify --- .../src/util/rewriting/index.test.ts | 42 +++---------------- 1 file changed, 6 insertions(+), 36 deletions(-) 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 7902c2ed..bbbb10f3 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/index.test.ts @@ -164,42 +164,6 @@ test('recursive theme replacements (inlined)', () => { expect(inlineThemeValues('var(--mutual-b)', state)).toBe('calc(calc(var(--mutual-b) * 1) + 1)') }) -test('pixel equivalents work with theme variables containing dots', () => { - let map = new Map([ - ['--font-size-sm', '0.875rem'], - ['--font-size.md', '1rem'], - ['--font-size.lg', '1.125rem'], - ['--spacing-4', '1rem'], - ['--spacing.8', '2rem'], - ]) - - let state = { - designSystem: { - theme: { prefix: null } as any, - resolveThemeValue: (name) => map.get(name) ?? null, - } as DesignSystem, - } as State - - let settings = { rootFontSize: 16 } as TailwindCssSettings - - // Test that dotted variables are resolved correctly - expect(addThemeValues('var(--font-size-sm)', state, settings)).toBe( - 'var(--font-size-sm) /* 0.875rem = 14px */', - ) - expect(addThemeValues('var(--font-size\\.md)', state, settings)).toBe( - 'var(--font-size\\.md) /* 1rem = 16px */', - ) - expect(addThemeValues('var(--font-size\\.lg)', state, settings)).toBe( - 'var(--font-size\\.lg) /* 1.125rem = 18px */', - ) - expect(addThemeValues('var(--spacing-4)', state, settings)).toBe( - 'var(--spacing-4) /* 1rem = 16px */', - ) - expect(addThemeValues('var(--spacing.8)', state, settings)).toBe( - 'var(--spacing.8) /* 2rem = 32px */', - ) -}) - test('Evaluating CSS calc expressions', () => { expect(replaceCssCalc('calc(1px + 1px)', (node) => evaluateExpression(node.value))).toBe('2px') expect(replaceCssCalc('calc(1px * 4)', (node) => evaluateExpression(node.value))).toBe('4px') @@ -227,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 = { @@ -276,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 */', + ) }) From 1c5bb86b727b581f2cca4b7bf18a85964771b910 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 23 Sep 2025 11:18:04 -0400 Subject: [PATCH 4/4] update --- packages/vscode-tailwindcss/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index ad2966a5..677f5854 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -7,7 +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 variable lookup when it contains escaped dots ([#1466](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1466)) +- Fix theme lookup when variable names contain escaped dots ([#1466](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1466)) ## 0.14.26