@pandacss/generator 0.22.1 → 0.23.0

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as _pandacss_types from '@pandacss/types';
 import { UserConfig, PatternConfig, Dict, ArtifactFilters, ConfigResultWithHooks, RequiredBy, StudioOptions, HashOptions, PrefixOptions, Theme, CascadeLayers, TSConfig, ArtifactId, ParserResultType } from '@pandacss/types';
 import { Utility, Recipes, Conditions, Layers, Stylesheet, RecipeContext, RecipeNode } from '@pandacss/core';
+import { mapObject } from '@pandacss/shared';
 import { TokenDictionary } from '@pandacss/token-dictionary';
 
 declare class FileEngine {
@@ -108,7 +109,15 @@ declare class Context {
     createLayers(layers: CascadeLayers): Layers;
     setupCompositions(theme: Theme): void;
     setupProperties(): void;
-    private get baseSheetContext();
+    get baseSheetContext(): {
+        conditions: Conditions;
+        layers: Layers;
+        utility: Utility;
+        helpers: {
+            map: typeof mapObject;
+        };
+        hash: boolean | undefined;
+    };
     createSheet(): Stylesheet;
     createRecipes(theme: Theme, context: RecipeContext): Recipes;
 }
@@ -175,6 +184,7 @@ interface ParserJsxOptions {
 interface ParserOptions {
     importMap: ParserImportMap;
     jsx: ParserJsxOptions;
+    isTemplateLiteralSyntax: boolean;
     patternKeys: Context['patterns']['keys'];
     recipeKeys: Context['recipes']['keys'];
     getRecipesByJsxName: Context['recipes']['filter'];

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as _pandacss_types from '@pandacss/types';
 import { UserConfig, PatternConfig, Dict, ArtifactFilters, ConfigResultWithHooks, RequiredBy, StudioOptions, HashOptions, PrefixOptions, Theme, CascadeLayers, TSConfig, ArtifactId, ParserResultType } from '@pandacss/types';
 import { Utility, Recipes, Conditions, Layers, Stylesheet, RecipeContext, RecipeNode } from '@pandacss/core';
+import { mapObject } from '@pandacss/shared';
 import { TokenDictionary } from '@pandacss/token-dictionary';
 
 declare class FileEngine {
@@ -108,7 +109,15 @@ declare class Context {
     createLayers(layers: CascadeLayers): Layers;
     setupCompositions(theme: Theme): void;
     setupProperties(): void;
-    private get baseSheetContext();
+    get baseSheetContext(): {
+        conditions: Conditions;
+        layers: Layers;
+        utility: Utility;
+        helpers: {
+            map: typeof mapObject;
+        };
+        hash: boolean | undefined;
+    };
     createSheet(): Stylesheet;
     createRecipes(theme: Theme, context: RecipeContext): Recipes;
 }
@@ -175,6 +184,7 @@ interface ParserJsxOptions {
 interface ParserOptions {
     importMap: ParserImportMap;
     jsx: ParserJsxOptions;
+    isTemplateLiteralSyntax: boolean;
     patternKeys: Context['patterns']['keys'];
     recipeKeys: Context['recipes']['keys'];
     getRecipesByJsxName: Context['recipes']['filter'];

package/dist/index.js

@@ -132,7 +132,7 @@ var getMessages = (ctx) => ({
 });
 
 // src/generator.ts
-var import_ts_pattern11 = require("ts-pattern");
+var import_ts_pattern12 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
 var import_outdent44 = __toESM(require("outdent"));
@@ -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 { ${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 cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
+      ).with(
+        "all",
+        () => import_outdent16.outdent`
+          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 [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return createElement(Comp, { ref, ...restProps })
+          `
+      ).with(
+        "minimal",
         () => 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 cssProps = { css: mergeCss(styleProps, props.css) }
+          const mergedProps = { ref, ...restProps, ...cssProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => 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 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()}
         }
     })
     `,
@@ -2719,7 +2836,7 @@ var static_css_d_ts_default = {
 };
 
 // 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(
@@ -3425,7 +3542,7 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
-var import_ts_pattern10 = require("ts-pattern");
+var import_ts_pattern11 = require("ts-pattern");
 var generateParserCss = (ctx, result) => {
   const { patterns, recipes } = ctx;
   result.css.forEach((css2) => {
@@ -3454,7 +3571,7 @@ var generateParserCss = (ctx, result) => {
         const recipeConfig = recipes.getConfig(recipeName);
         if (!recipeConfig)
           continue;
-        (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
+        (0, import_ts_pattern11.match)(recipe).with({ type: "jsx-recipe" }, () => {
           recipe.data.forEach((data) => {
             const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
             ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3473,7 +3590,7 @@ var generateParserCss = (ctx, result) => {
   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 }) => {
+        (0, import_ts_pattern11.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern11.P.string }, ({ name: jsxName }) => {
           pattern.data.forEach((data) => {
             const fnName = patterns.find(jsxName);
             const styleProps = patterns.transform(fnName, data);
@@ -4138,7 +4255,7 @@ var Context = class {
     return new import_core5.Utility({
       prefix: this.prefix.className,
       tokens: this.tokens,
-      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
+      config: this.isTemplateLiteralSyntax ? {} : Object.assign({}, config.utilities),
       separator: config.separator,
       shorthands: config.shorthands,
       strictTokens: config.strictTokens
@@ -4217,6 +4334,7 @@ var getParserOptions = (ctx) => {
       isStyleProp: isValidProperty,
       nodes: [...patterns.details, ...recipes.details]
     },
+    isTemplateLiteralSyntax: ctx.isTemplateLiteralSyntax,
     patternKeys: patterns.keys,
     recipeKeys: recipes.keys,
     getRecipesByJsxName: recipes.filter,
@@ -4239,7 +4357,7 @@ var Generator = class extends Context {
     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(() => {
+    (0, import_ts_pattern12.match)(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   }

package/dist/index.mjs

@@ -101,7 +101,7 @@ var getMessages = (ctx) => ({
 });
 
 // src/generator.ts
-import { match as match11 } from "ts-pattern";
+import { match as match12 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
 import outdent44 from "outdent";
@@ -1061,7 +1061,7 @@ function generatePreactJsxFactory(ctx) {
 import { outdent as outdent16 } from "outdent";
 import { match as match5 } from "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;
@@ -1071,23 +1071,44 @@ function generatePreactJsxPattern(ctx, filters) {
       js: outdent16`
       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) {
-        ${match5(props.length).with(
-        0,
+        ${match5(jsxStyleProps2).with(
+        "none",
         () => outdent16`
-          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 })
+          `
+      ).with(
+        "minimal",
+        () => outdent16`
+          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)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => outdent16`
-          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: outdent16`
@@ -1366,7 +1387,7 @@ function generateQwikJsxFactory(ctx) {
 import { outdent as outdent21 } from "outdent";
 import { match as match6 } from "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;
@@ -1375,23 +1396,44 @@ function generateQwikJsxPattern(ctx, filters) {
       name: dashName,
       js: outdent21`
       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) {
-        ${match6(props.length).with(
-        0,
+      export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+        ${match6(jsxStyleProps2).with(
+        "none",
         () => outdent21`
-        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",
         () => outdent21`
-        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",
+        () => outdent21`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const mergedProps = { ...styleProps, ...restProps }
+          
+          return h(${factoryName}.${jsxElement}, mergedProps)
+          `
+      ).exhaustive()}
       }
       `,
       dts: outdent21`
@@ -1677,7 +1719,7 @@ function generateReactJsxFactory(ctx) {
 import { outdent as outdent26 } from "outdent";
 import { match as match7 } from "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;
@@ -1686,24 +1728,45 @@ function generateReactJsxPattern(ctx, filters) {
       name: dashName,
       js: outdent26`
       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) {
-        ${match7(props.length).with(
-        0,
+        ${match7(jsxStyleProps2).with(
+        "none",
+        () => outdent26`
+          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+          
+          const styleProps = ${styleFnName}(patternProps)
+          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          
+          return createElement(Comp, { ref, ...restProps })
+          `
+      ).with(
+        "minimal",
         () => outdent26`
-        const styleProps = ${styleFnName}()
-        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
+          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)
           `
-      ).otherwise(
+      ).with(
+        "all",
         () => outdent26`
-        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 mergedProps = { ref, ...styleProps, ...restProps }
+
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
-      )}
-      })
+      ).exhaustive()}
+        })
       `,
       dts: outdent26`
       import type { FunctionComponent } from 'react'
@@ -2013,7 +2076,7 @@ function generateSolidJsxFactory(ctx) {
 import { outdent as outdent31 } from "outdent";
 import { match as match8 } from "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;
@@ -2021,25 +2084,47 @@ function generateSolidJsxPattern(ctx, filters) {
     return {
       name: dashName,
       js: outdent31`
-    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) {
-      ${match8(props.length).with(
-        0,
+    export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
+      ${match8(jsxStyleProps2).with(
+        "none",
         () => outdent31`
-          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",
         () => outdent31`
-          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",
+        () => outdent31`
+        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
+        
+        const styleProps = ${styleFnName}(patternProps)        
+        const mergedProps = mergeProps(styleProps, restProps)
+        
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
+        `
+      ).exhaustive()}
     }
     `,
       dts: outdent31`
@@ -2266,7 +2351,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(() => {
@@ -2394,30 +2479,62 @@ function generateVueJsxStringLiteralFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 import { outdent as outdent37 } from "outdent";
+import { match as match9 } from "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: outdent37`
     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 }) {
+          ${match9(jsxStyleProps2).with(
+        "none",
+        () => outdent37`
+            const Comp = computed(() => {
+              const styleProps = ${styleFnName}(props)
+              return ${factoryName}("${jsxElement}", { base: styleProps })
+            })
+            
+            return () => {
+              return h(Comp.value, attrs, slots)
+            }
+            `
+      ).with(
+        "minimal",
+        () => outdent37`            
+            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",
+        () => outdent37`            
             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()}
         }
     })
     `,
@@ -2688,7 +2805,7 @@ var static_css_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-import { match as match9 } from "ts-pattern";
+import { match as match10 } from "ts-pattern";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
@@ -2706,7 +2823,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(
-      match9(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      match10(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(
@@ -3394,7 +3511,7 @@ function generateKeyframeCss(ctx) {
 
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
-import { P, match as match10 } from "ts-pattern";
+import { P, match as match11 } from "ts-pattern";
 var generateParserCss = (ctx, result) => {
   const { patterns, recipes } = ctx;
   result.css.forEach((css2) => {
@@ -3423,7 +3540,7 @@ var generateParserCss = (ctx, result) => {
         const recipeConfig = recipes.getConfig(recipeName);
         if (!recipeConfig)
           continue;
-        match10(recipe).with({ type: "jsx-recipe" }, () => {
+        match11(recipe).with({ type: "jsx-recipe" }, () => {
           recipe.data.forEach((data) => {
             const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
             ctx.stylesheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3442,7 +3559,7 @@ var generateParserCss = (ctx, result) => {
   result.pattern.forEach((patternSet, name) => {
     try {
       for (const pattern of patternSet) {
-        match10(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
+        match11(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
           pattern.data.forEach((data) => {
             const fnName = patterns.find(jsxName);
             const styleProps = patterns.transform(fnName, data);
@@ -4114,7 +4231,7 @@ var Context = class {
     return new Utility({
       prefix: this.prefix.className,
       tokens: this.tokens,
-      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
+      config: this.isTemplateLiteralSyntax ? {} : Object.assign({}, config.utilities),
       separator: config.separator,
       shorthands: config.shorthands,
       strictTokens: config.strictTokens
@@ -4193,6 +4310,7 @@ var getParserOptions = (ctx) => {
       isStyleProp: isValidProperty,
       nodes: [...patterns.details, ...recipes.details]
     },
+    isTemplateLiteralSyntax: ctx.isTemplateLiteralSyntax,
     patternKeys: patterns.keys,
     recipeKeys: recipes.keys,
     getRecipesByJsxName: recipes.filter,
@@ -4215,7 +4333,7 @@ var Generator = class extends Context {
     return generateArtifacts(this, ids);
   }
   appendCss(type) {
-    match11(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
+    match12(type).with("preflight", () => generateResetCss(this)).with("tokens", () => generateTokenCss(this)).with("static", () => generateStaticCss(this)).with("global", () => generateGlobalCss(this)).with("keyframes", () => generateKeyframeCss(this)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -32,17 +32,16 @@
     "pluralize": "8.0.0",
     "postcss": "^8.4.31",
     "ts-pattern": "5.0.5",
-    "@pandacss/core": "0.22.1",
-    "@pandacss/is-valid-prop": "0.22.1",
-    "@pandacss/logger": "0.22.1",
-    "@pandacss/shared": "0.22.1",
-    "@pandacss/token-dictionary": "0.22.1",
-    "@pandacss/types": "0.22.1"
+    "@pandacss/core": "0.23.0",
+    "@pandacss/is-valid-prop": "0.23.0",
+    "@pandacss/logger": "0.23.0",
+    "@pandacss/shared": "0.23.0",
+    "@pandacss/token-dictionary": "0.23.0",
+    "@pandacss/types": "0.23.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33",
-    "hookable": "5.5.3",
-    "@pandacss/fixture": "0.22.1"
+    "hookable": "5.5.3"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",