cache tracking of variables

This makes sure that the `optimizeAst` goes from ~11ms back to ~5ms

Author: RobinMalfait

packages/tailwindcss/src/ast.ts

@@ -2,7 +2,6 @@ import { parseAtRule } from './css-parser'
 import type { DesignSystem } from './design-system'
 import { ThemeOptions } from './theme'
 import { DefaultMap } from './utils/default-map'
-import * as ValueParser from './value-parser'
 
 const AT_SIGN = 0x40
 
@@ -262,17 +261,7 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
 
       // Track used CSS variables
       if (node.value.includes('var(')) {
-        ValueParser.walk(ValueParser.parse(node.value), (node) => {
-          if (node.kind !== 'function' || node.value !== 'var') return
-
-          ValueParser.walk(node.nodes, (child) => {
-            if (child.kind !== 'word' || child.value[0] !== '-' || child.value[1] !== '-') return
-
-            designSystem.theme.markUsedVariable(child.value)
-          })
-
-          return ValueParser.ValueWalkAction.Skip
-        })
+        designSystem.trackUsedVariables(node.value)
       }
 
       parent.push(node)

packages/tailwindcss/src/design-system.ts

@@ -6,6 +6,7 @@ import { getClassOrder } from './sort'
 import type { Theme, ThemeKey } from './theme'
 import { Utilities, createUtilities, withAlpha } from './utilities'
 import { DefaultMap } from './utils/default-map'
+import * as ValueParser from './value-parser'
 import { Variants, createVariants } from './variants'
 
 export type DesignSystem = {
@@ -29,6 +30,8 @@ export type DesignSystem = {
   getVariantOrder(): Map<Variant, number>
   resolveThemeValue(path: string): string | undefined
 
+  trackUsedVariables(raw: string): void
+
   // Used by IntelliSense
   candidatesToCss(classes: string[]): (string | null)[]
 }
@@ -44,6 +47,21 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
   let compiledAstNodes = new DefaultMap<Candidate>((candidate) =>
     compileAstNodes(candidate, designSystem),
   )
+  let trackUsedVariables = new DefaultMap((raw) => {
+    ValueParser.walk(ValueParser.parse(raw), (node) => {
+      if (node.kind !== 'function' || node.value !== 'var') return
+
+      ValueParser.walk(node.nodes, (child) => {
+        if (child.kind !== 'word' || child.value[0] !== '-' || child.value[1] !== '-') return
+
+        theme.markUsedVariable(child.value)
+      })
+
+      return ValueParser.ValueWalkAction.Skip
+    })
+
+    return true
+  })
 
   let designSystem: DesignSystem = {
     theme,
@@ -140,6 +158,10 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
 
       return themeValue
     },
+
+    trackUsedVariables(raw: string) {
+      trackUsedVariables.get(raw)
+    },
   }
 
   return designSystem