@pandacss/generator 0.12.1 → 0.12.2

package/dist/index.js

@@ -629,7 +629,7 @@ function generateCssFn(ctx) {
     import type { SystemStyleObject } from '../types'
 
     interface CssFunction {
-      (styles: SystemStyleObject): string
+      (...styles: SystemStyleObject[]): string
       raw: (styles: SystemStyleObject) => SystemStyleObject
     }
 
@@ -696,12 +696,7 @@ function generateCssFn(ctx) {
     }
 
     const cssFn = createCss(context)
-    export const cssCache = new Map()
-    export const css = (styles) => {
-      const classNames = cssFn(styles)
-      cssCache.set(classNames, styles)
-      return classNames
-    }
+    export const css = (...styles) => cssFn(mergeCss(...styles))
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -767,7 +762,7 @@ function generateCvaFn(ctx) {
     export function cva(config) {
       const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
 
-      function resolve(props) {
+      function resolve(props = {}) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
         let variantCss = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
@@ -782,7 +777,7 @@ function generateCvaFn(ctx) {
       function cvaFn(props) {
         return css(resolve(props))
       }
-      
+
       const variantKeys = Object.keys(variants)
 
       function splitVariantProps(props) {
@@ -795,7 +790,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        resolve,
+        raw: resolve,
         config,
         splitVariantProps,
       })
@@ -823,7 +818,7 @@ function generateCvaFn(ctx) {
       if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
         throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
-    }    
+    }
 
     `,
     dts: import_outdent6.outdent`
@@ -839,32 +834,21 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 var import_outdent7 = __toESM(require("outdent"));
-function generateCx(ctx) {
+function generateCx() {
   return {
     js: import_outdent7.default`
-    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
-
     function cx() {
-      const objs = []
       let str = '',
         i = 0,
         arg
 
       for (; i < arguments.length; ) {
-        arg = arguments[i++]
-        if (!arg || typeof arg !== 'string') continue
-
-        if (cssCache.has(arg)) {
-          objs.push(cssCache.get(arg))
-          continue
+        if ((arg = arguments[i++]) && typeof arg === 'string') {
+          str && (str += ' ')
+          str += arg
         }
-
-        str && (str += ' ')
-        str += arg.toString()
       }
-
-      const merged = mergeCss(...objs)
-      return [css(merged), str].join(' ')
+      return str
     }
 
     export { cx }
@@ -1003,7 +987,7 @@ function generatePattern(ctx) {
 
           interface ${upperName}PatternFn {
             (styles?: ${upperName}Styles): string
-            raw: (styles: ${upperName}Styles) => ${upperName}Styles
+            raw: (styles: ${upperName}Styles) => SystemStyleObject
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -1021,7 +1005,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${baseName}Config.transform(styles, { map: mapObject })
 
     export const ${baseName} = (styles) => css(${styleFnName}(styles))
-    ${baseName}.raw = (styles) => styles
+    ${baseName}.raw = ${styleFnName}
     `
     };
   });
@@ -1187,7 +1171,7 @@ var import_outdent12 = require("outdent");
 function generateSvaFn(ctx) {
   return {
     js: import_outdent12.outdent`
-    ${ctx.file.import("getSlotRecipes", "../helpers")}
+    ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
 
     export function sva(config) {
@@ -1198,13 +1182,22 @@ function generateSvaFn(ctx) {
         return Object.fromEntries(result)
       }
 
-      const [, firstCva] = slots[0]
+      const variants = config.variants ?? {};
+      const variantKeys = Object.keys(variants);
+
+      function splitVariantProps(props) {
+        return splitProps(props, variantKeys);
+      }
+
+      const variantMap = Object.fromEntries(
+        Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
+      );
 
       return Object.assign(svaFn, {
         __cva__: false,
-        variantMap: firstCva.variantMap,
-        variantKeys: firstCva.variantKeys,
-        splitVariantProps: firstCva.splitVariantProps,
+        variantMap,
+        variantKeys,
+        splitVariantProps,
       })
     }
     `,
@@ -1285,7 +1278,7 @@ function generatePreactJsxFactory(ctx) {
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.className, elementProps.class)
         }
@@ -1527,7 +1520,7 @@ function generateQwikJsxFactory(ctx) {
         }
 
         function cvaClass() {
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.class)
         }
@@ -1779,7 +1772,7 @@ function generateReactJsxFactory(ctx) {
 
           function cvaClass() {
             const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles, propStyles, cssStyles)
             return cx(css(styles), elementProps.className)
           }`;
@@ -1794,7 +1787,7 @@ function generateReactJsxFactory(ctx) {
           }
 
           function cvaClass() {
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles, elementProps.css)
             return cx(css(styles), elementProps.className)
           }`;
@@ -1809,7 +1802,7 @@ function generateReactJsxFactory(ctx) {
           }
 
           function cvaClass() {
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles)
             return cx(css(styles), elementProps.className)
           }`;
@@ -2065,7 +2058,7 @@ function generateSolidJsxFactory(ctx) {
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), localProps.class)
         }
@@ -2904,7 +2897,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -3179,7 +3172,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx(ctx);
+  const code = generateCx();
   return {
     dir: ctx.paths.css,
     files: [

package/dist/index.mjs

@@ -598,7 +598,7 @@ function generateCssFn(ctx) {
     import type { SystemStyleObject } from '../types'
 
     interface CssFunction {
-      (styles: SystemStyleObject): string
+      (...styles: SystemStyleObject[]): string
       raw: (styles: SystemStyleObject) => SystemStyleObject
     }
 
@@ -665,12 +665,7 @@ function generateCssFn(ctx) {
     }
 
     const cssFn = createCss(context)
-    export const cssCache = new Map()
-    export const css = (styles) => {
-      const classNames = cssFn(styles)
-      cssCache.set(classNames, styles)
-      return classNames
-    }
+    export const css = (...styles) => cssFn(mergeCss(...styles))
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -736,7 +731,7 @@ function generateCvaFn(ctx) {
     export function cva(config) {
       const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
 
-      function resolve(props) {
+      function resolve(props = {}) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
         let variantCss = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
@@ -751,7 +746,7 @@ function generateCvaFn(ctx) {
       function cvaFn(props) {
         return css(resolve(props))
       }
-      
+
       const variantKeys = Object.keys(variants)
 
       function splitVariantProps(props) {
@@ -764,7 +759,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        resolve,
+        raw: resolve,
         config,
         splitVariantProps,
       })
@@ -792,7 +787,7 @@ function generateCvaFn(ctx) {
       if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
         throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
-    }    
+    }
 
     `,
     dts: outdent6`
@@ -808,32 +803,21 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 import outdent7 from "outdent";
-function generateCx(ctx) {
+function generateCx() {
   return {
     js: outdent7`
-    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
-
     function cx() {
-      const objs = []
       let str = '',
         i = 0,
         arg
 
       for (; i < arguments.length; ) {
-        arg = arguments[i++]
-        if (!arg || typeof arg !== 'string') continue
-
-        if (cssCache.has(arg)) {
-          objs.push(cssCache.get(arg))
-          continue
+        if ((arg = arguments[i++]) && typeof arg === 'string') {
+          str && (str += ' ')
+          str += arg
         }
-
-        str && (str += ' ')
-        str += arg.toString()
       }
-
-      const merged = mergeCss(...objs)
-      return [css(merged), str].join(' ')
+      return str
     }
 
     export { cx }
@@ -972,7 +956,7 @@ function generatePattern(ctx) {
 
           interface ${upperName}PatternFn {
             (styles?: ${upperName}Styles): string
-            raw: (styles: ${upperName}Styles) => ${upperName}Styles
+            raw: (styles: ${upperName}Styles) => SystemStyleObject
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -990,7 +974,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${baseName}Config.transform(styles, { map: mapObject })
 
     export const ${baseName} = (styles) => css(${styleFnName}(styles))
-    ${baseName}.raw = (styles) => styles
+    ${baseName}.raw = ${styleFnName}
     `
     };
   });
@@ -1156,7 +1140,7 @@ import { outdent as outdent12 } from "outdent";
 function generateSvaFn(ctx) {
   return {
     js: outdent12`
-    ${ctx.file.import("getSlotRecipes", "../helpers")}
+    ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
 
     export function sva(config) {
@@ -1167,13 +1151,22 @@ function generateSvaFn(ctx) {
         return Object.fromEntries(result)
       }
 
-      const [, firstCva] = slots[0]
+      const variants = config.variants ?? {};
+      const variantKeys = Object.keys(variants);
+
+      function splitVariantProps(props) {
+        return splitProps(props, variantKeys);
+      }
+
+      const variantMap = Object.fromEntries(
+        Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
+      );
 
       return Object.assign(svaFn, {
         __cva__: false,
-        variantMap: firstCva.variantMap,
-        variantKeys: firstCva.variantKeys,
-        splitVariantProps: firstCva.splitVariantProps,
+        variantMap,
+        variantKeys,
+        splitVariantProps,
       })
     }
     `,
@@ -1254,7 +1247,7 @@ function generatePreactJsxFactory(ctx) {
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.className, elementProps.class)
         }
@@ -1496,7 +1489,7 @@ function generateQwikJsxFactory(ctx) {
         }
 
         function cvaClass() {
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.class)
         }
@@ -1748,7 +1741,7 @@ function generateReactJsxFactory(ctx) {
 
           function cvaClass() {
             const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles, propStyles, cssStyles)
             return cx(css(styles), elementProps.className)
           }`;
@@ -1763,7 +1756,7 @@ function generateReactJsxFactory(ctx) {
           }
 
           function cvaClass() {
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles, elementProps.css)
             return cx(css(styles), elementProps.className)
           }`;
@@ -1778,7 +1771,7 @@ function generateReactJsxFactory(ctx) {
           }
 
           function cvaClass() {
-            const cvaStyles = cvaFn.resolve(variantProps)
+            const cvaStyles = cvaFn.raw(variantProps)
             const styles = assignCss(cvaStyles)
             return cx(css(styles), elementProps.className)
           }`;
@@ -2034,7 +2027,7 @@ function generateSolidJsxFactory(ctx) {
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
+          const cvaStyles = cvaFn.raw(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), localProps.class)
         }
@@ -2873,7 +2866,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -3148,7 +3141,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx(ctx);
+  const code = generateCx();
   return {
     dir: ctx.paths.css,
     files: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.27",
     "ts-pattern": "5.0.4",
-    "@pandacss/core": "0.12.1",
-    "@pandacss/is-valid-prop": "0.12.1",
-    "@pandacss/logger": "0.12.1",
-    "@pandacss/shared": "0.12.1",
-    "@pandacss/token-dictionary": "0.12.1",
-    "@pandacss/types": "0.12.1"
+    "@pandacss/core": "0.12.2",
+    "@pandacss/is-valid-prop": "0.12.2",
+    "@pandacss/logger": "0.12.2",
+    "@pandacss/shared": "0.12.2",
+    "@pandacss/token-dictionary": "0.12.2",
+    "@pandacss/types": "0.12.2"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.12.1"
+    "@pandacss/fixture": "0.12.2"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",