Add fallback values to theme variables

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

Author: thecrypticace

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

@@ -29,6 +29,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/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 { addThemeValues } from './rewriting'
 
 export function bigSign(bigIntValue) {
   // @ts-ignore
@@ -44,6 +45,7 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
 
   let css = clone.toString()
 
+  css = addThemeValues(css, state, settings.tailwindCSS)
   css = addEquivalents(css, settings.tailwindCSS)
 
   let identSize = state.v4 ? 2 : 4

packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts

@@ -0,0 +1,20 @@
+import type { State } from '../state'
+
+import { replaceCssVars } from './replacements'
+
+export function addThemeValues(css: string, state: State) {
+  if (!state.designSystem) return css
+
+  // 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 */`
+  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})`
+  })
+}

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

@@ -1,2 +1,3 @@
 export * from './replacements'
 export * from './var-fallbacks'
+export * from './add-theme-values'