Add fallback values to theme variables

This lets users see the current theme value _and_ pixel/color equivalents

Author: thecrypticace

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -587,11 +587,11 @@ withFixture('v4/basic', (c) => {
     expect(resolved).toEqual({
       ...item,
       detail:
-        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));',
+        'font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height));',
       documentation: {
         kind: 'markdown',
         value:
-          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));\n}\n```',
+          '```css\n.text-sm {\n  font-size: var(--text-sm, 0.875rem /* 8.75px */);\n  line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem /* 12.5px */));\n}\n```',
       },
     })
   })
@@ -613,7 +613,7 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'background-color: var(--color-red-500, oklch(0.637 0.237 25.331));',
+      detail: 'background-color: var(--color-red-500);',
       documentation: '#fb2c36',
     })
   })
@@ -642,19 +642,19 @@ withFixture('v4/workspaces', (c) => {
 
     expect(resolved[0]).toEqual({
       ...items[0],
-      detail: 'background-color: var(--color-beet, #8e3b46);',
+      detail: 'background-color: var(--color-beet);',
       documentation: '#8e3b46',
     })
 
     expect(resolved[1]).toEqual({
       ...items[1],
-      detail: 'background-color: var(--color-orangepeel, #ff9f00);',
+      detail: 'background-color: var(--color-orangepeel);',
       documentation: '#ff9f00',
     })
 
     expect(resolved[2]).toEqual({
       ...items[2],
-      detail: 'background-color: var(--color-style-main, #8e3b46);',
+      detail: 'background-color: var(--color-style-main);',
       documentation: '#8e3b46',
     })
   })

packages/tailwindcss-language-server/tests/hover/hover.test.js

@@ -194,7 +194,7 @@ withFixture('v4/basic', (c) => {
     text: '<div class="bg-red-500">',
     position: { line: 0, character: 13 },
     expected:
-      '.bg-red-500 {\n  background-color: var(--color-red-500, oklch(0.637 0.237 25.331));\n}',
+      '.bg-red-500 {\n  background-color: var(--color-red-500, oklch(0.637 0.237 25.331) /* #fb2c36 */);\n}',
     expectedRange: {
       start: { line: 0, character: 12 },
       end: { line: 0, character: 22 },

packages/tailwindcss-language-service/src/util/colorEquivalents.ts

@@ -19,6 +19,10 @@ export function equivalentColorValues({ comments }: { comments: Comment[] }): Pl
           return true
         }
 
+        if (node.value === 'var') {
+          return true
+        }
+
         if (!allowedFunctions.includes(node.value)) {
           return false
         }

packages/tailwindcss-language-service/src/util/css-vars.test.ts

@@ -4,9 +4,7 @@ import { State } from './state'
 import { DesignSystem } from './v4'
 
 test('replacing CSS variables with their fallbacks (when they have them)', () => {
-  let map = new Map<string, string>([
-      ['--known', 'blue'],
-  ])
+  let map = new Map<string, string>([['--known', 'blue']])
 
   let state: State = {
     enabled: true,
@@ -26,7 +24,7 @@ test('replacing CSS variables with their fallbacks (when they have them)', () =>
       state,
       'rgb(var(var(--bar, var(--baz), var(--qux), var(--thing))))',
     ),
-  ).toBe('rgb(var(var(--bar, var(--baz), var(--qux), var(--thing))))')
+  ).toBe('rgb(var( var(--baz), var(--qux), var(--thing)))')
 
   expect(
     replaceCssVarsWithFallbacks(

packages/tailwindcss-language-service/src/util/css-vars.ts

@@ -21,7 +21,7 @@ export function replaceCssVarsWithFallbacks(state: State, str: string): string {
 
 type CssVarReplacer = (name: string, fallback: string | null) => string | null
 
-function replaceCssVars(str: string, replace: CssVarReplacer): string {
+export function replaceCssVars(str: string, replace: CssVarReplacer): string {
   for (let i = 0; i < str.length; ++i) {
     if (!str.startsWith('var(', i)) continue
 
@@ -51,16 +51,11 @@ function replaceCssVars(str: string, replace: CssVarReplacer): string {
 
         if (replacement !== null) {
           str = str.slice(0, i) + replacement + str.slice(j + 1)
-
-          // We don't want to skip past anything here because `replacement`
-          // might contain more var(…) calls in which case `i` will already
-          // be pointing at the right spot to start looking for them
-          break
         }
 
-        // It can't be replaced so we can avoid unncessary work by skipping over
-        // the entire var(…) call.
-        i = j + 1
+        // We don't want to skip past anything here because `replacement`
+        // might contain more var(…) calls in which case `i` will already
+        // be pointing at the right spot to start looking for them
         break
       }
     }

packages/tailwindcss-language-service/src/util/jit.ts

@@ -2,6 +2,7 @@ import type { State } from './state'
 import type { Container, Document, Root, Rule, Node, AtRule } from 'postcss'
 import { addPixelEquivalentsToValue } from './pixelEquivalents'
 import { addEquivalents } from './equivalents'
+import { replaceCssVars } from './css-vars'
 
 export function bigSign(bigIntValue) {
   // @ts-ignore
@@ -44,6 +45,21 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
 
   let css = clone.toString()
 
+  // Add fallbacks to variables with their theme values
+  // Ideally these would just be commentss like
+  // `var(--foo) /* 3rem = 48px */` or
+  // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
+  if (state.designSystem) {
+    css = replaceCssVars(css, (name) => {
+      if (!name.startsWith('--')) return null
+
+      let value = state.designSystem.resolveThemeValue?.(name) ?? null
+      if (value === null) return null
+
+      return `var(${name}, ${value})`
+    })
+  }
+
   css = addEquivalents(css, settings.tailwindCSS)
 
   let identSize = state.v4 ? 2 : 4