cache the converter

We will likely clean this up later. But just trying to move things
aroudn first.

packages/tailwindcss/src/canonicalize-candidates.ts

@@ -65,7 +65,7 @@ const enum Convert {
 }
 
 function themeToVar(designSystem: DesignSystem, rawCandidate: string): string {
-  let convert = createConverter(designSystem)
+  let convert = converterCache.get(designSystem)
 
   for (let candidate of parseCandidate(rawCandidate, designSystem)) {
     let clone = structuredClone(candidate)
@@ -122,161 +122,164 @@ function themeToVar(designSystem: DesignSystem, rawCandidate: string): string {
   return rawCandidate
 }
 
-function createConverter(designSystem: DesignSystem, { prettyPrint = false } = {}) {
-  function convert(input: string, options = Convert.All): [string, CandidateModifier | null] {
-    let ast = ValueParser.parse(input)
+const converterCache = new DefaultMap((ds: DesignSystem) => {
+  return createConverter(ds)
 
-    // In some scenarios (e.g.: variants), we can't migrate to `var(…)` if it
-    // ends up in the `@media (…)` part. In this case we only have to migrate to
-    // the new `theme(…)` notation.
-    if (options & Convert.MigrateThemeOnly) {
-      return [substituteFunctionsInValue(ast, toTheme), null]
-    }
+  function createConverter(designSystem: DesignSystem) {
+    function convert(input: string, options = Convert.All): [string, CandidateModifier | null] {
+      let ast = ValueParser.parse(input)
 
-    let themeUsageCount = 0
-    let themeModifierCount = 0
+      // In some scenarios (e.g.: variants), we can't migrate to `var(…)` if it
+      // ends up in the `@media (…)` part. In this case we only have to migrate to
+      // the new `theme(…)` notation.
+      if (options & Convert.MigrateThemeOnly) {
+        return [substituteFunctionsInValue(ast, toTheme), null]
+      }
 
-    // Analyze AST
-    ValueParser.walk(ast, (node) => {
-      if (node.kind !== 'function') return
-      if (node.value !== 'theme') return
+      let themeUsageCount = 0
+      let themeModifierCount = 0
 
-      // We are only interested in the `theme` function
-      themeUsageCount += 1
+      // Analyze AST
+      ValueParser.walk(ast, (node) => {
+        if (node.kind !== 'function') return
+        if (node.value !== 'theme') return
 
-      // Figure out if a modifier is used
-      ValueParser.walk(node.nodes, (child) => {
-        // If we see a `,`, it means that we have a fallback value
-        if (child.kind === 'separator' && child.value.includes(',')) {
-          return ValueParser.ValueWalkAction.Stop
-        }
-
-        // If we see a `/`, we have a modifier
-        else if (child.kind === 'separator' && child.value.trim() === '/') {
-          themeModifierCount += 1
-          return ValueParser.ValueWalkAction.Stop
-        }
+        // We are only interested in the `theme` function
+        themeUsageCount += 1
 
-        return ValueParser.ValueWalkAction.Skip
-      })
-    })
-
-    // No `theme(…)` calls, nothing to do
-    if (themeUsageCount === 0) {
-      return [input, null]
-    }
+        // Figure out if a modifier is used
+        ValueParser.walk(node.nodes, (child) => {
+          // If we see a `,`, it means that we have a fallback value
+          if (child.kind === 'separator' && child.value.includes(',')) {
+            return ValueParser.ValueWalkAction.Stop
+          }
 
-    // No `theme(…)` with modifiers, we can migrate to `var(…)`
-    if (themeModifierCount === 0) {
-      return [substituteFunctionsInValue(ast, toVar), null]
-    }
+          // If we see a `/`, we have a modifier
+          else if (child.kind === 'separator' && child.value.trim() === '/') {
+            themeModifierCount += 1
+            return ValueParser.ValueWalkAction.Stop
+          }
 
-    // Multiple modifiers which means that there are multiple `theme(…/…)`
-    // values. In this case, we can't convert the modifier to a candidate
-    // modifier.
-    //
-    // We also can't migrate to `var(…)` because that would lose the modifier.
-    //
-    // Try to convert each `theme(…)` call to the modern syntax.
-    if (themeModifierCount > 1) {
-      return [substituteFunctionsInValue(ast, toTheme), null]
-    }
+          return ValueParser.ValueWalkAction.Skip
+        })
+      })
 
-    // Only a single `theme(…)` with a modifier left, that modifier will be
-    // migrated to a candidate modifier.
-    let modifier: CandidateModifier | null = null
-    let result = substituteFunctionsInValue(ast, (path, fallback) => {
-      let parts = segment(path, '/').map((part) => part.trim())
+      // No `theme(…)` calls, nothing to do
+      if (themeUsageCount === 0) {
+        return [input, null]
+      }
 
-      // Multiple `/` separators, which makes this an invalid path
-      if (parts.length > 2) return null
+      // No `theme(…)` with modifiers, we can migrate to `var(…)`
+      if (themeModifierCount === 0) {
+        return [substituteFunctionsInValue(ast, toVar), null]
+      }
 
-      // The path contains a `/`, which means that there is a modifier such as
-      // `theme(colors.red.500/50%)`.
+      // Multiple modifiers which means that there are multiple `theme(…/…)`
+      // values. In this case, we can't convert the modifier to a candidate
+      // modifier.
       //
-      // Currently, we are assuming that this is only being used for colors,
-      // which means that we can typically convert them to a modifier on the
-      // candidate itself.
+      // We also can't migrate to `var(…)` because that would lose the modifier.
       //
-      // If there is more than one node in the AST though, `theme(…)` must not
-      // be the whole value so it's not safe to use a modifier instead.
-      //
-      // E.g.: `inset 0px 1px theme(colors.red.500/50%)` is a shadow, not a color.
-      if (ast.length === 1 && parts.length === 2 && options & Convert.MigrateModifier) {
-        let [pathPart, modifierPart] = parts
+      // Try to convert each `theme(…)` call to the modern syntax.
+      if (themeModifierCount > 1) {
+        return [substituteFunctionsInValue(ast, toTheme), null]
+      }
 
-        // 50% -> /50
-        if (/^\d+%$/.test(modifierPart)) {
-          modifier = { kind: 'named', value: modifierPart.slice(0, -1) }
-        }
+      // Only a single `theme(…)` with a modifier left, that modifier will be
+      // migrated to a candidate modifier.
+      let modifier: CandidateModifier | null = null
+      let result = substituteFunctionsInValue(ast, (path, fallback) => {
+        let parts = segment(path, '/').map((part) => part.trim())
+
+        // Multiple `/` separators, which makes this an invalid path
+        if (parts.length > 2) return null
+
+        // The path contains a `/`, which means that there is a modifier such as
+        // `theme(colors.red.500/50%)`.
+        //
+        // Currently, we are assuming that this is only being used for colors,
+        // which means that we can typically convert them to a modifier on the
+        // candidate itself.
+        //
+        // If there is more than one node in the AST though, `theme(…)` must not
+        // be the whole value so it's not safe to use a modifier instead.
+        //
+        // E.g.: `inset 0px 1px theme(colors.red.500/50%)` is a shadow, not a color.
+        if (ast.length === 1 && parts.length === 2 && options & Convert.MigrateModifier) {
+          let [pathPart, modifierPart] = parts
+
+          // 50% -> /50
+          if (/^\d+%$/.test(modifierPart)) {
+            modifier = { kind: 'named', value: modifierPart.slice(0, -1) }
+          }
 
-        // .12 -> /12
-        // .12345 -> /[12.345]
-        else if (/^0?\.\d+$/.test(modifierPart)) {
-          let value = Number(modifierPart) * 100
-          modifier = {
-            kind: Number.isInteger(value) ? 'named' : 'arbitrary',
-            value: value.toString(),
+          // .12 -> /12
+          // .12345 -> /[12.345]
+          else if (/^0?\.\d+$/.test(modifierPart)) {
+            let value = Number(modifierPart) * 100
+            modifier = {
+              kind: Number.isInteger(value) ? 'named' : 'arbitrary',
+              value: value.toString(),
+            }
+          }
+
+          // Anything else becomes arbitrary
+          else {
+            modifier = { kind: 'arbitrary', value: modifierPart }
           }
-        }
 
-        // Anything else becomes arbitrary
-        else {
-          modifier = { kind: 'arbitrary', value: modifierPart }
+          // Update path to be the first part
+          path = pathPart
         }
 
-        // Update path to be the first part
-        path = pathPart
-      }
+        return toVar(path, fallback) || toTheme(path, fallback)
+      })
 
-      return toVar(path, fallback) || toTheme(path, fallback)
-    })
+      return [result, modifier]
+    }
 
-    return [result, modifier]
-  }
+    function pathToVariableName(path: string) {
+      let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
+      if (!designSystem.theme.get([variable])) return null
 
-  function pathToVariableName(path: string) {
-    let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
-    if (!designSystem.theme.get([variable])) return null
+      if (designSystem.theme.prefix) {
+        return `--${designSystem.theme.prefix}-${variable.slice(2)}`
+      }
 
-    if (designSystem.theme.prefix) {
-      return `--${designSystem.theme.prefix}-${variable.slice(2)}`
+      return variable
     }
 
-    return variable
-  }
+    function toVar(path: string, fallback?: string) {
+      let variable = pathToVariableName(path)
+      if (variable) return fallback ? `var(${variable}, ${fallback})` : `var(${variable})`
 
-  function toVar(path: string, fallback?: string) {
-    let variable = pathToVariableName(path)
-    if (variable) return fallback ? `var(${variable}, ${fallback})` : `var(${variable})`
+      let keyPath = toKeyPath(path)
+      if (keyPath[0] === 'spacing' && designSystem.theme.get(['--spacing'])) {
+        let multiplier = keyPath[1]
+        if (!isValidSpacingMultiplier(multiplier)) return null
 
-    let keyPath = toKeyPath(path)
-    if (keyPath[0] === 'spacing' && designSystem.theme.get(['--spacing'])) {
-      let multiplier = keyPath[1]
-      if (!isValidSpacingMultiplier(multiplier)) return null
+        return `--spacing(${multiplier})`
+      }
 
-      return `--spacing(${multiplier})`
+      return null
     }
 
-    return null
-  }
+    function toTheme(path: string, fallback?: string) {
+      let parts = segment(path, '/').map((part) => part.trim())
+      path = parts.shift()!
 
-  function toTheme(path: string, fallback?: string) {
-    let parts = segment(path, '/').map((part) => part.trim())
-    path = parts.shift()!
+      let variable = pathToVariableName(path)
+      if (!variable) return null
 
-    let variable = pathToVariableName(path)
-    if (!variable) return null
+      let modifier = parts.length > 0 ? `/${parts.join('/')}` : ''
+      return fallback
+        ? `--theme(${variable}${modifier}, ${fallback})`
+        : `--theme(${variable}${modifier})`
+    }
 
-    let modifier =
-      parts.length > 0 ? (prettyPrint ? ` / ${parts.join(' / ')}` : `/${parts.join('/')}`) : ''
-    return fallback
-      ? `--theme(${variable}${modifier}, ${fallback})`
-      : `--theme(${variable}${modifier})`
+    return convert
   }
-
-  return convert
-}
+})
 
 function substituteFunctionsInValue(
   ast: ValueParser.ValueAstNode[],