Improve performance of rebuilds (#16283)

This PR introduces a performance improvement we noticed while working on
on: #16211

We noticed that `substituteFunctions` was being called on every `node`
after the `compileAstNodes` was done. However, the `compileAstNodes` is
heavily cached.

By moving the `substituteFunctions` we into the cached `compileAstNodes`
we sped up performance for Catalyst rebuilds from ~15ms to ~10ms.


| Before | After |
| --- | --- |
| <img width="710" alt="image"
src="https://github.com/user-attachments/assets/eaf110d9-2f88-447c-9b10-c77d47bd99a5"
/> | <img width="696" alt="image"
src="https://github.com/user-attachments/assets/c5a2ff4c-d75e-4e35-a2b6-d896598810f5"
/> |

Author: RobinMalfait

packages/tailwindcss/src/compile.ts

@@ -9,7 +9,6 @@ import {
   type StyleRule,
 } from './ast'
 import { type Candidate, type Variant } from './candidate'
-import { substituteFunctions } from './css-functions'
 import { type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
 import { asColor, type Utility } from './utilities'
@@ -55,22 +54,6 @@ export function compileCandidates(
       let rules = designSystem.compileAstNodes(candidate)
       if (rules.length === 0) continue
 
-      // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
-      // properties (`[--my-var:theme(--color-red-500)]`) can contain function
-      // calls so we need evaluate any functions we find there that weren't in
-      // the source CSS.
-      try {
-        substituteFunctions(
-          rules.map(({ node }) => node),
-          designSystem,
-        )
-      } catch (err) {
-        // If substitution fails then the candidate likely contains a call to
-        // `theme()` that is invalid which may be because of incorrect usage,
-        // invalid arguments, or a theme key that does not exist.
-        continue
-      }
-
       found = true
 
       for (let { node, propertySort } of rules) {

packages/tailwindcss/src/design-system.ts

@@ -1,6 +1,7 @@
 import { optimizeAst, toCss } from './ast'
 import { parseCandidate, parseVariant, type Candidate, type Variant } from './candidate'
 import { compileAstNodes, compileCandidates } from './compile'
+import { substituteFunctions } from './css-functions'
 import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense'
 import { getClassOrder } from './sort'
 import type { Theme, ThemeKey } from './theme'
@@ -41,9 +42,27 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
   let parsedCandidates = new DefaultMap((candidate) =>
     Array.from(parseCandidate(candidate, designSystem)),
   )
-  let compiledAstNodes = new DefaultMap<Candidate>((candidate) =>
-    compileAstNodes(candidate, designSystem),
-  )
+  let compiledAstNodes = new DefaultMap<Candidate>((candidate) => {
+    let ast = compileAstNodes(candidate, designSystem)
+
+    // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
+    // properties (`[--my-var:theme(--color-red-500)]`) can contain function
+    // calls so we need evaluate any functions we find there that weren't in
+    // the source CSS.
+    try {
+      substituteFunctions(
+        ast.map(({ node }) => node),
+        designSystem,
+      )
+    } catch (err) {
+      // If substitution fails then the candidate likely contains a call to
+      // `theme()` that is invalid which may be because of incorrect usage,
+      // invalid arguments, or a theme key that does not exist.
+      return []
+    }
+
+    return ast
+  })
 
   let designSystem: DesignSystem = {
     theme,