Fix equivalent calculation when using prefixes in v4 (#1166)

Fixes #1160

We were passing the CSS variable straight through when resolving the
theme values but this isn't accurate when a prefix is used. The theme
variables *do not* have prefixes but the emitted CSS variables _do_.

We have to strip the prefix before doing the lookup.

Author: thecrypticace

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)

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

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

@@ -0,0 +1,12 @@
+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
+}

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
     }
 

packages/vscode-tailwindcss/CHANGELOG.md

@@ -10,6 +10,7 @@
 - Support style-rule like completions inside `@custom-variant` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165))
 - Support style-rule like completions inside `@variant` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165))
 - Make sure `@slot` isn't considered an unknown at-rule ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165))
+- Fix equivalent calculation when using prefixes in v4 ([#1166](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1166))
 
 ## 0.14.2