@pandacss/generator 0.22.1 → 0.24.0

package/dist/index.js

@@ -82,7 +82,7 @@ var artifactsGenerated = (ctx) => {
 var configExists = (cmd) => import_outdent.outdent`
       \n
       It looks like you already have panda created\`.
-      
+
       You can now run ${(0, import_logger.quote)(cmd, " panda --watch")}.
 
       `;
@@ -96,9 +96,9 @@ var thankYou = () => import_outdent.outdent`
 var codegenComplete = () => import_outdent.outdent`
 
   ${import_logger.colors.bold().cyan("Next steps:")}
-  
+
   [1] Create a ${(0, import_logger.quote)("index.css")} file in your project that contains:
-  
+
       @layer reset, base, tokens, recipes, utilities;
 
 
@@ -1092,7 +1092,7 @@ function generatePreactJsxFactory(ctx) {
 var import_outdent16 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generatePreactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1102,23 +1102,44 @@ function generatePreactJsxPattern(ctx, filters) {
       js: import_outdent16.outdent`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern5.match)(props.length).with(
-        0,
+        ${(0, import_ts_pattern5.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent16.outdent`
-          const styleProps = ${styleFnName}()
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, { ref, ...restProps })
           `
-      ).otherwise(
+      ).with(
+        "minimal",
+        () => import_outdent16.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
+          `
+      ).with(
+        "all",
         () => import_outdent16.outdent`
-          const { ${props.join(", ")}, ...restProps } = props
-          const styleProps = ${styleFnName}({${props.join(", ")}})
-          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).exhaustive()}
       })
       `,
       dts: import_outdent16.outdent`
@@ -1397,7 +1418,7 @@ function generateQwikJsxFactory(ctx) {
 var import_outdent21 = require("outdent");
 var import_ts_pattern6 = require("ts-pattern");
 function generateQwikJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1406,23 +1427,44 @@ function generateQwikJsxPattern(ctx, filters) {
       name: dashName,
       js: import_outdent21.outdent`
       import { h } from '@builder.io/qwik'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
-      export const ${jsxName} = function ${jsxName}(props) {
-        ${(0, import_ts_pattern6.match)(props.length).with(
-        0,
+      export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+        ${(0, import_ts_pattern6.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent21.outdent`
-        const styleProps = ${styleFnName}()
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return h(Comp, restProps)
           `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => import_outdent21.outdent`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ...restProps, ...cssProps }
+
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).with(
+        "all",
+        () => import_outdent21.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
+          `
+      ).exhaustive()}
       }
       `,
       dts: import_outdent21.outdent`
@@ -1708,7 +1750,7 @@ function generateReactJsxFactory(ctx) {
 var import_outdent26 = require("outdent");
 var import_ts_pattern7 = require("ts-pattern");
 function generateReactJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -1717,24 +1759,45 @@ function generateReactJsxPattern(ctx, filters) {
       name: dashName,
       js: import_outdent26.outdent`
       import { createElement, forwardRef } from 'react'
-      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import("mergeCss", "../css/css")}
+      ${ctx.file.import("splitProps", "../helpers")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+      ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern7.match)(props.length).with(
-        0,
+        ${(0, import_ts_pattern7.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent26.outdent`
-        const styleProps = ${styleFnName}()
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return createElement(Comp, { ref, ...restProps })
           `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => import_outdent26.outdent`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFnName}({${props.join(", ")}})
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
-      })
+      ).with(
+        "all",
+        () => import_outdent26.outdent`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ref, ...styleProps, ...restProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
+          `
+      ).exhaustive()}
+        })
       `,
       dts: import_outdent26.outdent`
       import type { FunctionComponent } from 'react'
@@ -2044,7 +2107,7 @@ function generateSolidJsxFactory(ctx) {
 var import_outdent31 = require("outdent");
 var import_ts_pattern8 = require("ts-pattern");
 function generateSolidJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
@@ -2052,25 +2115,47 @@ function generateSolidJsxPattern(ctx, filters) {
     return {
       name: dashName,
       js: import_outdent31.outdent`
-    import { splitProps, mergeProps } from 'solid-js'
+    import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export function ${jsxName}(props) {
-      ${(0, import_ts_pattern8.match)(props.length).with(
-        0,
+    export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+      ${(0, import_ts_pattern8.match)(jsxStyleProps2).with(
+        "none",
         () => import_outdent31.outdent`
-          const styleProps = ${styleFnName}()
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)
+        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        
+        return createComponent(Comp, restProps)
         `
-      ).otherwise(
+      ).with(
+        "minimal",
         () => import_outdent31.outdent`
-          const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const cssProps = createMemo(() => {
           const styleProps = ${styleFnName}(patternProps)
-          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
+          return { css: mergeCss(styleProps, props.css) }
+        })
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
+        `
+      ).with(
+        "all",
+        () => import_outdent31.outdent`
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)        
+        const mergedProps = mergeProps(styleProps, restProps)
+        
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
-      )}
+      ).exhaustive()}
     }
     `,
       dts: import_outdent31.outdent`
@@ -2297,7 +2382,7 @@ function generateVueJsxFactory(ctx) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
           const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty)
+            return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
           })
 
           const recipeClass = computed(() => {
@@ -2425,30 +2510,62 @@ function generateVueJsxStringLiteralFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 var import_outdent37 = require("outdent");
+var import_ts_pattern9 = require("ts-pattern");
 function generateVueJsxPattern(ctx, filters) {
-  const { typeName, factoryName } = ctx.jsx;
+  const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
-    const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
       js: import_outdent37.outdent`
     import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import("mergeCss", "../css/css")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+    ${ctx.file.import(factoryName, "./factory")}
 
-    export const ${jsxName} = defineComponent({
+    export const ${jsxName} = /* @__PURE__ */ defineComponent({
         name: '${jsxName}',
         inheritAttrs: false,
-        props: [${propList}],
+        props: ${JSON.stringify(props)},
         setup(props, { attrs, slots }) {
+          ${(0, import_ts_pattern9.match)(jsxStyleProps2).with(
+        "none",
+        () => import_outdent37.outdent`
+            const Comp = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return ${factoryName}("${jsxElement}", { base: styleProps })
+            })
+            
+            return () => {
+              return h(Comp.value, attrs, slots)
+            }
+            `
+      ).with(
+        "minimal",
+        () => import_outdent37.outdent`            
+            const cssProps = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return { css: mergeCss(styleProps, attrs.css) }
+            })
+            
+            return () => {
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
+            }
+            `
+      ).with(
+        "all",
+        () => import_outdent37.outdent`            
             const styleProps = computed(() => ${styleFnName}(props))
+            
             return () => {
-                const computedProps = { ...styleProps.value, ...attrs }
-                return h(${factoryName}.${jsxElement}, computedProps, slots)
+              const mergedProps = { ...styleProps.value, ...attrs }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
+            `
+      ).exhaustive()}
         }
     })
     `,
@@ -2715,11 +2832,11 @@ var selectors_d_ts_default = {
 
 // src/artifacts/generated/static-css.d.ts.json
 var static_css_d_ts_default = {
-  content: "interface CssRule {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: string[]\n  }\n  /**\n   * The css conditions to generate utilities for.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  /**\n   * Whether to generate responsive utilities.\n   */\n  responsive?: boolean\n}\n\nexport type RecipeRule =\n  | '*'\n  | ({\n      conditions?: string[]\n      responsive?: boolean\n    } & { [variant: string]: boolean | string[] })\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?: {\n    [recipe: string]: RecipeRule[]\n  }\n}\n"
+  content: "interface WithConditions {\n  /**\n   * The css conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  responsive?: boolean\n}\n\nexport interface CssRule extends WithConditions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?: {\n    [recipe: string]: RecipeRule[]\n  }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n}\n"
 };
 
 // src/artifacts/types/generated.ts
-var import_ts_pattern9 = require("ts-pattern");
+var import_ts_pattern10 = require("ts-pattern");
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
@@ -2737,7 +2854,7 @@ function getGeneratedSystemTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     system: rewriteImports(
-      (0, import_ts_pattern9.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      (0, import_ts_pattern10.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
         () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")
       ).with(
@@ -3180,11 +3297,11 @@ function setupJsxFactory(ctx) {
 function setupJsxHelpers(ctx) {
   if (!ctx.jsx.framework)
     return;
-  const helpers3 = generatedJsxHelpers(ctx);
+  const helpers = generatedJsxHelpers(ctx);
   return {
     id: "jsx-helpers",
     dir: ctx.paths.jsx,
-    files: [{ file: ctx.file.ext("factory-helper"), code: helpers3.js }]
+    files: [{ file: ctx.file.ext("factory-helper"), code: helpers.js }]
   };
 }
 function setupJsxPatterns(ctx, filters) {
@@ -3363,31 +3480,31 @@ var generateArtifacts = (ctx, ids) => {
 };
 
 // src/artifacts/css/global-css.ts
-var generateGlobalCss = (ctx) => {
+var generateGlobalCss = (ctx, sheet) => {
   const { globalCss = {} } = ctx.config;
-  ctx.stylesheet.processGlobalCss({
+  sheet.processGlobalCss({
     ":root": {
       "--made-with-panda": `'\u{1F43C}'`
     },
     "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*!*/ /*!*/",
-      "--brightness": "/*!*/ /*!*/",
-      "--contrast": "/*!*/ /*!*/",
-      "--grayscale": "/*!*/ /*!*/",
-      "--hue-rotate": "/*!*/ /*!*/",
-      "--invert": "/*!*/ /*!*/",
-      "--saturate": "/*!*/ /*!*/",
-      "--sepia": "/*!*/ /*!*/",
-      "--drop-shadow": "/*!*/ /*!*/",
-      "--backdrop-blur": "/*!*/ /*!*/",
-      "--backdrop-brightness": "/*!*/ /*!*/",
-      "--backdrop-contrast": "/*!*/ /*!*/",
-      "--backdrop-grayscale": "/*!*/ /*!*/",
-      "--backdrop-hue-rotate": "/*!*/ /*!*/",
-      "--backdrop-invert": "/*!*/ /*!*/",
-      "--backdrop-opacity": "/*!*/ /*!*/",
-      "--backdrop-saturate": "/*!*/ /*!*/",
-      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--blur": "/*-*/ /*-*/",
+      "--brightness": "/*-*/ /*-*/",
+      "--contrast": "/*-*/ /*-*/",
+      "--grayscale": "/*-*/ /*-*/",
+      "--hue-rotate": "/*-*/ /*-*/",
+      "--invert": "/*-*/ /*-*/",
+      "--saturate": "/*-*/ /*-*/",
+      "--sepia": "/*-*/ /*-*/",
+      "--drop-shadow": "/*-*/ /*-*/",
+      "--backdrop-blur": "/*-*/ /*-*/",
+      "--backdrop-brightness": "/*-*/ /*-*/",
+      "--backdrop-contrast": "/*-*/ /*-*/",
+      "--backdrop-grayscale": "/*-*/ /*-*/",
+      "--backdrop-hue-rotate": "/*-*/ /*-*/",
+      "--backdrop-invert": "/*-*/ /*-*/",
+      "--backdrop-opacity": "/*-*/ /*-*/",
+      "--backdrop-saturate": "/*-*/ /*-*/",
+      "--backdrop-sepia": "/*-*/ /*-*/",
       "--scroll-snap-strictness": "proximity",
       "--border-spacing-x": 0,
       "--border-spacing-y": 0,
@@ -3400,14 +3517,14 @@ var generateGlobalCss = (ctx) => {
       "--scale-y": 1
     }
   });
-  ctx.stylesheet.processGlobalCss(globalCss);
+  sheet.processGlobalCss(globalCss);
   void ctx.hooks.callHook("generator:css", "global.css", "");
 };
 
 // src/artifacts/css/keyframe-css.ts
 var import_core2 = require("@pandacss/core");
 var import_postcss = __toESM(require("postcss"));
-function generateKeyframeCss(ctx) {
+function generateKeyframeCss(ctx, sheet) {
   const { keyframes = {} } = ctx.config.theme ?? {};
   const root = import_postcss.default.root();
   for (const [name, definition] of Object.entries(keyframes)) {
@@ -3419,93 +3536,32 @@ function generateKeyframeCss(ctx) {
       })
     );
   }
-  ctx.layers.tokens.append(root);
+  sheet.layers.tokens.append(root);
   void ctx.hooks.callHook("generator:css", "keyframes.css", "");
 }
 
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
-var import_ts_pattern10 = require("ts-pattern");
-var generateParserCss = (ctx, result) => {
-  const { patterns, recipes } = ctx;
-  result.css.forEach((css2) => {
-    css2.data.forEach((data) => {
-      ctx.stylesheet.processAtomic(data);
-    });
-  });
-  result.cva.forEach((cva) => {
-    cva.data.forEach((data) => {
-      ctx.stylesheet.processAtomicRecipe(data);
-    });
-  });
-  result.sva.forEach((sva) => {
-    sva.data.forEach((data) => {
-      ctx.stylesheet.processAtomicSlotRecipe(data);
-    });
-  });
-  result.jsx.forEach((jsx) => {
-    jsx.data.forEach((data) => {
-      ctx.stylesheet.processStyleProps(filterProps(ctx, data));
-    });
-  });
-  result.recipe.forEach((recipeSet, recipeName) => {
-    try {
-      for (const recipe of recipeSet) {
-        const recipeConfig = recipes.getConfig(recipeName);
-        if (!recipeConfig)
-          continue;
-        (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
-          recipe.data.forEach((data) => {
-            const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
-            ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
-            ctx.stylesheet.processRecipe(recipeName, recipeConfig, recipeProps);
-          });
-        }).otherwise(() => {
-          recipe.data.forEach((data) => {
-            ctx.stylesheet.processRecipe(recipeName, recipeConfig, data);
-          });
-        });
-      }
-    } catch (error) {
-      import_logger2.logger.error("serializer:recipe", error);
-    }
-  });
-  result.pattern.forEach((patternSet, name) => {
-    try {
-      for (const pattern of patternSet) {
-        (0, import_ts_pattern10.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern10.P.string }, ({ name: jsxName }) => {
-          pattern.data.forEach((data) => {
-            const fnName = patterns.find(jsxName);
-            const styleProps = patterns.transform(fnName, data);
-            ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
-          });
-        }).otherwise(() => {
-          pattern.data.forEach((data) => {
-            const styleProps = patterns.transform(name, data);
-            ctx.stylesheet.processAtomic(styleProps);
-          });
-        });
-      }
-    } catch (error) {
-      import_logger2.logger.error("serializer:pattern", error);
-    }
-  });
-  void ctx.hooks.callHook("parser:css", result.filePath ?? "", "");
-};
-var filterProps = (ctx, props) => {
-  const clone = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (ctx.isValidProperty(key)) {
-      clone[key] = value;
-    }
+var generateParserCss = (ctx, decoder, filePath) => {
+  if (!decoder)
+    return "";
+  const sheet = ctx.createSheet();
+  const { minify, optimize } = ctx.config;
+  sheet.processDecoder(decoder);
+  try {
+    const css2 = sheet.toCss({ minify, optimize });
+    ctx.hooks.callHook("parser:css", filePath ?? "", css2);
+    return css2;
+  } catch (err) {
+    import_logger2.logger.error("serializer:css", "Failed to serialize CSS: " + err);
+    return "";
   }
-  return clone;
 };
 
 // src/artifacts/css/reset-css.ts
 var import_shared4 = require("@pandacss/shared");
 var css = String.raw;
-function generateResetCss(ctx) {
+function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
   const scope = (0, import_shared4.isObject)(preflight) ? preflight.scope : void 0;
   const selector = scope ? `${scope} ` : "";
@@ -3688,7 +3744,7 @@ function generateResetCss(ctx) {
   ${selector}input[type="search"],
   ${selector}input[type="password"] {
     -webkit-appearance: none;
-    -moz-appearance: none; 
+    -moz-appearance: none;
   }
 
   ${selector}input[type='search'] {
@@ -3723,57 +3779,26 @@ function generateResetCss(ctx) {
     outline: auto;
   }
 `;
-  ctx.layers.reset.append(output);
+  sheet.layers.reset.append(output);
   void ctx.hooks.callHook("generator:css", "reset.css", "");
 }
 
 // src/artifacts/css/static-css.ts
-var import_core3 = require("@pandacss/core");
-var generateStaticCss = (ctx) => {
-  const { config, utility, recipes } = ctx;
-  const { staticCss = {}, theme = {} } = config;
-  staticCss.recipes = staticCss.recipes ?? {};
-  const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
-  Object.entries(recipeConfigs).forEach(([name, recipe]) => {
-    if (recipe.staticCss) {
-      staticCss.recipes[name] = recipe.staticCss;
-    }
-  });
-  const getResult = (0, import_core3.getStaticCss)(staticCss);
-  const results = getResult({
-    breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: (prop) => {
-      const propConfig = utility.config[prop];
-      if (!propConfig)
-        return [];
-      const values = utility.getPropertyValues(propConfig);
-      if (!values)
-        return [];
-      return Object.keys(values);
-    },
-    getRecipeKeys: (recipe) => {
-      const recipeConfig = recipes.details.find((detail) => detail.baseName === recipe);
-      return Object.assign({ __base: recipeConfig?.config.base }, recipeConfig?.variantKeyMap ?? {});
-    }
-  });
-  results.css.forEach((css2) => {
-    ctx.stylesheet.processAtomic(css2);
-  });
-  results.recipes.forEach((result) => {
-    Object.entries(result).forEach(([name, value]) => {
-      const recipeConfig = recipes.getConfig(name);
-      if (!recipeConfig)
-        return;
-      ctx.stylesheet.processRecipe(name, recipeConfig, value);
-    });
-  });
-  void ctx.hooks.callHook("generator:css", "static.css", "");
+var generateStaticCss = (ctx, sheet) => {
+  const { config, staticCss } = ctx;
+  const engine = staticCss.process(ctx.config.staticCss ?? {}, sheet);
+  if (!sheet) {
+    const { optimize = true, minify } = config;
+    const output = engine.sheet.toCss({ optimize, minify });
+    void ctx.hooks.callHook("generator:css", "static.css", output);
+    return output;
+  }
 };
 
 // src/artifacts/css/token-css.ts
-var import_core4 = require("@pandacss/core");
+var import_core3 = require("@pandacss/core");
 var import_postcss2 = __toESM(require("postcss"));
-function generateTokenCss(ctx) {
+function generateTokenCss(ctx, sheet) {
   const {
     config: { cssVarRoot },
     conditions,
@@ -3786,25 +3811,25 @@ function generateTokenCss(ctx) {
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const { css: css3 } = (0, import_core4.toCss)({ [root]: varsObj });
+      const { css: css3 } = (0, import_core3.toCss)({ [root]: varsObj });
       results.push(css3);
     } else {
       const keys = key.split(":");
-      const { css: css3 } = (0, import_core4.toCss)(varsObj);
+      const { css: css3 } = (0, import_core3.toCss)(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
-        const parent = (0, import_core4.extractParentSelectors)(condition);
+        const parent = (0, import_core3.extractParentSelectors)(condition);
         return parent ? `&${parent}` : condition;
       });
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
       getDeepestNode(rule)?.append(css3);
-      results.push((0, import_core4.expandNestedCss)(rule.toString()));
+      results.push((0, import_core3.expandNestedCss)(rule.toString()));
     }
   }
   let css2 = results.join("\n\n");
   css2 = "\n\n" + cleanupSelectors(css2, root);
-  ctx.layers.tokens.append(css2);
+  sheet.layers.tokens.append(css2);
   void ctx.hooks.callHook("generator:css", "tokens.css", "");
 }
 function getDeepestRule(root, selectors) {
@@ -3854,11 +3879,7 @@ function cleanupSelectors(css2, varSelector) {
 }
 
 // src/engines/index.ts
-var import_core5 = require("@pandacss/core");
-var import_is_valid_prop3 = require("@pandacss/is-valid-prop");
-var import_shared7 = require("@pandacss/shared");
-var import_token_dictionary = require("@pandacss/token-dictionary");
-var import_lil_fp = require("lil-fp");
+var import_core4 = require("@pandacss/core");
 
 // src/engines/file.ts
 var FileEngine = class {
@@ -3976,214 +3997,22 @@ var PathEngine = class {
   }
 };
 
-// src/engines/pattern.ts
-var import_shared6 = require("@pandacss/shared");
-var helpers = { map: import_shared6.mapObject };
-var Patterns = class {
-  patterns;
-  details;
-  constructor(config) {
-    this.patterns = config.patterns ?? {};
-    this.details = Object.entries(this.patterns).map(([name, pattern]) => this.createDetail(name, pattern));
-  }
-  createDetail(name, pattern) {
-    const names = this.getNames(name);
-    const jsx = (pattern.jsx ?? []).concat([names.jsxName]);
-    return {
-      ...names,
-      props: Object.keys(pattern?.properties ?? {}),
-      blocklistType: pattern?.blocklist ? `| '${pattern.blocklist.join("' | '")}'` : "",
-      config: pattern,
-      type: "pattern",
-      match: (0, import_shared6.createRegex)(jsx),
-      jsx
-    };
-  }
-  get keys() {
-    return Object.keys(this.patterns);
-  }
-  getConfig(name) {
-    return this.patterns[name];
-  }
-  transform(name, data) {
-    return this.patterns[name]?.transform?.(data, helpers) ?? {};
-  }
-  getNames(name) {
-    const upperName = (0, import_shared6.capitalize)(name);
-    return {
-      upperName,
-      baseName: name,
-      dashName: (0, import_shared6.dashCase)(name),
-      styleFnName: `get${upperName}Style`,
-      jsxName: this.patterns[name]?.jsxName ?? upperName
-    };
-  }
-  find = (0, import_shared6.memo)((jsxName) => {
-    return this.details.find((node) => node.match.test(jsxName))?.baseName ?? (0, import_shared6.uncapitalize)(jsxName);
-  });
-  filter = (0, import_shared6.memo)((jsxName) => {
-    return this.details.filter((node) => node.match.test(jsxName));
-  });
-  isEmpty() {
-    return this.keys.length === 0;
-  }
-  saveOne(name, pattern) {
-    this.patterns[name] = pattern;
-    const detailIndex = this.details.findIndex((detail) => detail.baseName === name);
-    const updated = this.createDetail(name, pattern);
-    if (detailIndex > -1) {
-      this.details[detailIndex] = updated;
-    } else {
-      this.details.push(updated);
-    }
-  }
-  remove(name) {
-    delete this.patterns[name];
-    const detailIndex = this.details.findIndex((detail) => detail.baseName === name);
-    if (detailIndex > -1) {
-      this.details.splice(detailIndex, 1);
-    }
-  }
-  filterDetails(filters) {
-    const patternDiffs = filters?.affecteds?.patterns;
-    return patternDiffs ? this.details.filter((pattern) => patternDiffs.includes(pattern.dashName)) : this.details;
-  }
-};
-
 // src/engines/index.ts
-var helpers2 = { map: import_shared7.mapObject };
-var defaults = (config) => ({
-  cssVarRoot: ":where(:root, :host)",
-  jsxFactory: "styled",
-  jsxStyleProps: "all",
-  outExtension: "mjs",
-  shorthands: true,
-  syntax: "object-literal",
-  ...config,
-  layers: {
-    reset: "reset",
-    base: "base",
-    tokens: "tokens",
-    recipes: "recipes",
-    utilities: "utilities",
-    ...config.layers
-  }
-});
-var Context = class {
+var Context = class extends import_core4.CoreContext {
   constructor(conf) {
+    super(conf);
     this.conf = conf;
-    const config = defaults(conf.config);
-    const theme = config.theme ?? {};
-    conf.config = config;
-    this.tokens = this.createTokenDictionary(theme);
-    this.utility = this.createUtility(config);
-    this.conditions = this.createConditions(config);
-    this.layers = this.createLayers(config.layers);
-    this.patterns = new Patterns(config);
+    const config = conf.config;
     this.jsx = new JsxEngine(config);
     this.paths = new PathEngine(config);
     this.file = new FileEngine(config);
-    this.studio = { outdir: `${config.outdir}-studio`, ...conf.config.studio };
-    this.setupCompositions(theme);
-    this.setupProperties();
-    this.recipes = this.createRecipes(theme, this.baseSheetContext);
-    this.stylesheet = this.createSheet();
   }
-  studio;
-  // Engines
-  tokens;
-  utility;
-  recipes;
-  conditions;
-  patterns;
-  layers;
   jsx;
   paths;
   file;
-  stylesheet;
-  // Props
-  properties;
-  isValidProperty;
-  get config() {
-    return this.conf.config;
-  }
-  get hooks() {
-    return this.conf.hooks;
-  }
-  get isTemplateLiteralSyntax() {
-    return this.config.syntax === "template-literal";
-  }
-  get hash() {
-    return {
-      tokens: (0, import_lil_fp.isBool)(this.config.hash) ? this.config.hash : this.config.hash?.cssVar,
-      className: (0, import_lil_fp.isBool)(this.config.hash) ? this.config.hash : this.config.hash?.className
-    };
-  }
-  get prefix() {
-    return {
-      tokens: (0, import_lil_fp.isStr)(this.config.prefix) ? this.config.prefix : this.config.prefix?.cssVar,
-      className: (0, import_lil_fp.isStr)(this.config.prefix) ? this.config.prefix : this.config.prefix?.className
-    };
-  }
-  createTokenDictionary(theme) {
-    return new import_token_dictionary.TokenDictionary({
-      breakpoints: theme.breakpoints,
-      tokens: theme.tokens,
-      semanticTokens: theme.semanticTokens,
-      prefix: this.prefix.tokens,
-      hash: this.hash.tokens
-    });
-  }
-  createUtility(config) {
-    return new import_core5.Utility({
-      prefix: this.prefix.className,
-      tokens: this.tokens,
-      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
-      separator: config.separator,
-      shorthands: config.shorthands,
-      strictTokens: config.strictTokens
-    });
-  }
-  createConditions(config) {
-    return new import_core5.Conditions({
-      conditions: config.conditions,
-      breakpoints: config.theme?.breakpoints
-    });
-  }
-  createLayers(layers) {
-    return new import_core5.Layers(layers);
-  }
-  setupCompositions(theme) {
-    const { textStyles, layerStyles } = theme;
-    const compositions = (0, import_shared7.compact)({ textStyle: textStyles, layerStyle: layerStyles });
-    (0, import_core5.assignCompositions)(compositions, { conditions: this.conditions, utility: this.utility });
-  }
-  setupProperties() {
-    this.properties = /* @__PURE__ */ new Set(["css", ...this.utility.keys(), ...this.conditions.keys()]);
-    this.isValidProperty = (0, import_shared7.memo)((key) => this.properties.has(key) || (0, import_is_valid_prop3.isCssProperty)(key));
-  }
-  get baseSheetContext() {
-    return {
-      conditions: this.conditions,
-      layers: this.layers,
-      utility: this.utility,
-      helpers: helpers2,
-      hash: this.hash.className
-    };
-  }
-  createSheet() {
-    return new import_core5.Stylesheet({
-      ...this.baseSheetContext,
-      recipes: this.recipes
-    });
-  }
-  createRecipes(theme, context) {
-    const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
-    return new import_core5.Recipes(recipeConfigs, context);
-  }
 };
 
-// src/parser-options.ts
+// src/import-map.ts
 var getImportMap = (outdir, configImportMap) => {
   if (typeof configImportMap === "string") {
     return {
@@ -4201,14 +4030,16 @@ var getImportMap = (outdir, configImportMap) => {
     jsx: jsx ? [jsx] : [outdir, "jsx"]
   };
 };
+
+// src/parser-options.ts
 var getParserOptions = (ctx) => {
   const { config, jsx, isValidProperty, patterns, recipes } = ctx;
-  const { tsconfig, tsOptions } = ctx.conf;
-  const compilerOptions = tsconfig?.compilerOptions ?? {};
+  const compilerOptions = ctx.conf.tsconfig?.compilerOptions ?? {};
   const baseUrl = compilerOptions.baseUrl ?? "";
   const cwd = config.cwd;
   const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, "").slice(1) : cwd;
   return {
+    hash: ctx.hash,
     importMap: getImportMap(config.outdir.replace(relativeBaseUrl, ""), config.importMap),
     jsx: {
       framework: jsx.framework,
@@ -4217,12 +4048,14 @@ var getParserOptions = (ctx) => {
       isStyleProp: isValidProperty,
       nodes: [...patterns.details, ...recipes.details]
     },
-    patternKeys: patterns.keys,
-    recipeKeys: recipes.keys,
-    getRecipesByJsxName: recipes.filter,
-    getPatternsByJsxName: patterns.filter,
+    syntax: config.syntax,
+    isValidProperty,
+    recipes,
+    patterns,
+    encoder: ctx.encoder,
     compilerOptions,
-    tsOptions
+    tsOptions: ctx.conf.tsOptions,
+    join: (...paths) => paths.join("/")
   };
 };
 
@@ -4235,41 +4068,42 @@ var Generator = class extends Context {
     this.parserOptions = getParserOptions(this);
     this.messages = getMessages(this);
   }
-  getArtifacts(ids) {
+  getArtifacts = (ids) => {
     return generateArtifacts(this, ids);
-  }
-  appendCss(type) {
-    (0, import_ts_pattern11.match)(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
+  };
+  appendCssOfType = (type, sheet) => {
+    (0, import_ts_pattern11.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
-  }
-  appendLayerParams() {
-    this.stylesheet.prepend(this.layers.params);
-  }
-  appendBaselineCss() {
+  };
+  appendLayerParams = (sheet) => {
+    sheet.layers.root.prepend(sheet.layers.params);
+  };
+  appendBaselineCss = (sheet) => {
     if (this.config.preflight)
-      this.appendCss("preflight");
+      this.appendCssOfType("preflight", sheet);
     if (!this.tokens.isEmpty)
-      this.appendCss("tokens");
+      this.appendCssOfType("tokens", sheet);
     if (this.config.staticCss)
-      this.appendCss("static");
-    this.appendCss("global");
+      this.appendCssOfType("static", sheet);
+    this.appendCssOfType("global", sheet);
     if (this.config.theme?.keyframes)
-      this.appendCss("keyframes");
-  }
-  appendParserCss(...results) {
-    results.forEach((result) => {
-      if (!result)
-        return;
-      generateParserCss(this, result);
-    });
-  }
-  getCss() {
-    return this.stylesheet.toCss({
+      this.appendCssOfType("keyframes", sheet);
+  };
+  appendParserCss = (sheet) => {
+    const decoder = this.decoder.collect(this.encoder);
+    sheet.processDecoder(decoder);
+  };
+  getParserCss = (decoder, filePath) => {
+    return generateParserCss(this, decoder, filePath);
+  };
+  getCss = (stylesheet) => {
+    const sheet = stylesheet ?? this.createSheet();
+    return sheet.toCss({
       optimize: true,
       minify: this.config.minify
     });
-  }
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {