From daaa9ca6f4284084c92ff5d65b9959d91f815245 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 13:16:39 -0500 Subject: [PATCH 1/3] Refactor --- .../src/util/rewriting/add-theme-values.ts | 5 +++-- .../src/util/rewriting/inline-theme-values.ts | 5 +++-- .../src/util/rewriting/lookup.ts | 6 ++++++ .../src/util/rewriting/var-fallbacks.ts | 3 ++- 4 files changed, 14 insertions(+), 5 deletions(-) create mode 100644 packages/tailwindcss-language-service/src/util/rewriting/lookup.ts diff --git a/packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts b/packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts index 6dc10537..ad167eba 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts @@ -5,6 +5,7 @@ import { replaceCssVars, replaceCssCalc, Range } from './replacements' import { addPixelEquivalentsToValue } from '../pixelEquivalents' import { applyComments, Comment } from '../comments' import { getEquivalentColor } from '../colorEquivalents' +import { resolveVariableValue } from './lookup' export function addThemeValues(css: string, state: State, settings: TailwindCssSettings) { if (!state.designSystem) return css @@ -16,7 +17,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS let inlined = replaceCssVars(expr.value, ({ name }) => { if (!name.startsWith('--')) return null - let value = state.designSystem.resolveThemeValue?.(name) ?? null + let value = resolveVariableValue(state.designSystem, name) if (value === null) return null // Inline CSS calc expressions in theme values @@ -70,7 +71,7 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS } } - let value = state.designSystem.resolveThemeValue?.(name) ?? null + let value = resolveVariableValue(state.designSystem, name) if (value === null) return null let px = addPixelEquivalentsToValue(value, settings.rootFontSize, false) diff --git a/packages/tailwindcss-language-service/src/util/rewriting/inline-theme-values.ts b/packages/tailwindcss-language-service/src/util/rewriting/inline-theme-values.ts index a630de46..69010c11 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/inline-theme-values.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/inline-theme-values.ts @@ -1,6 +1,7 @@ import type { State, TailwindCssSettings } from '../state' import { evaluateExpression } from './calc' +import { resolveVariableValue } from './lookup' import { replaceCssVars, replaceCssCalc } from './replacements' export function inlineThemeValues(css: string, state: State) { @@ -10,7 +11,7 @@ export function inlineThemeValues(css: string, state: State) { let inlined = replaceCssVars(expr.value, ({ name, fallback }) => { if (!name.startsWith('--')) return null - let value = state.designSystem.resolveThemeValue?.(name) ?? null + let value = resolveVariableValue(state.designSystem, name) if (value === null) return fallback return value @@ -22,7 +23,7 @@ export function inlineThemeValues(css: string, state: State) { css = replaceCssVars(css, ({ name, fallback }) => { if (!name.startsWith('--')) return null - let value = state.designSystem.resolveThemeValue?.(name) ?? null + let value = resolveVariableValue(state.designSystem, name) if (value === null) return fallback return value diff --git a/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts b/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts new file mode 100644 index 00000000..b285ce72 --- /dev/null +++ b/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts @@ -0,0 +1,6 @@ +import { DesignSystem } from '../v4' + +// Resolve a variable value from the design system +export function resolveVariableValue(design: DesignSystem, name: string) { + return design.resolveThemeValue?.(name) ?? null +} diff --git a/packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts b/packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts index 0361f6e2..b2d5d7ce 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts @@ -1,4 +1,5 @@ import type { State } from '../state' +import { resolveVariableValue } from './lookup' import { replaceCssVars } from './replacements' export function replaceCssVarsWithFallbacks(state: State, str: string): string { @@ -7,7 +8,7 @@ export function replaceCssVarsWithFallbacks(state: State, str: string): string { // take precedences over other sources as that emulates the behavior of a // browser where the fallback is only used if the variable is defined. if (state.designSystem && name.startsWith('--')) { - let value = state.designSystem.resolveThemeValue?.(name) ?? null + let value = resolveVariableValue(state.designSystem, name) if (value !== null) return value } From 11ec70de9799253b05f0a047ee6d523c2edeba86 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 13:16:47 -0500 Subject: [PATCH 2/3] Handle theme prefixes when looking up CSS variable values --- .../src/util/rewriting/lookup.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts b/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts index b285ce72..ae8e70e7 100644 --- a/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts +++ b/packages/tailwindcss-language-service/src/util/rewriting/lookup.ts @@ -2,5 +2,11 @@ import { DesignSystem } from '../v4' // Resolve a variable value from the design system export function resolveVariableValue(design: DesignSystem, name: string) { + let prefix = design.theme.prefix ?? null + + if (prefix && name.startsWith(`--${prefix}`)) { + name = `--${name.slice(prefix.length + 3)}` + } + return design.resolveThemeValue?.(name) ?? null } From f39e2861083ce2bc052455c6f39a352a36284f53 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 13:20:40 -0500 Subject: [PATCH 3/3] 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 4ee3bd7c..6057ee0b 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -5,6 +5,7 @@ - Allow v4.0 projects not installed with npm to use IntelliSense ([#1157](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1157)) - Ignore preprocessor files when looking for v4 configs ([#1159](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1159)) - Allow language service to be used in native ESM environments ([#1122](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1122)) +- Fix equivalent calculation when using prefixes in v4 ([#1166](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1166)) ## 0.14.2