@pandacss/generator 0.39.2 → 0.40.1

package/dist/index.js

@@ -477,7 +477,7 @@ function generateIsValidProp(ctx) {
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     'var userGeneratedStr = "";',
-    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
+    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`
   );
   content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
@@ -1053,9 +1053,9 @@ function generatePreactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, { ref, ...restProps })
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1380,9 +1380,9 @@ function generateQwikJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, restProps)
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1714,9 +1714,9 @@ function generateReactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return createElement(Comp, { ref, ...restProps })
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -2090,10 +2090,14 @@ function generateSolidJsxPattern(ctx, filters) {
         () => import_outdent30.outdent`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
         
-        const styleProps = ${styleFnName}(patternProps)
-        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        const cssProps = createMemo(() => {
+          const styleProps = ${styleFnName}(patternProps)
+          return { css: styleProps }
+        })
         
-        return createComponent(Comp, restProps)
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
       ).with(
         "minimal",
@@ -2104,6 +2108,7 @@ function generateSolidJsxPattern(ctx, filters) {
           const styleProps = ${styleFnName}(patternProps)
           return { css: mergeCss(styleProps, props.css) }
         })
+
         const mergedProps = mergeProps(restProps, cssProps)
 
         return createComponent(${factoryName}.${jsxElement}, mergedProps)
@@ -2546,13 +2551,14 @@ function generateVueJsxPattern(ctx, filters) {
           ${(0, import_ts_pattern9.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent36.outdent`
-            const Comp = computed(() => {
+            const cssProps = computed(() => {
               const styleProps = ${styleFnName}(props)
-              return ${factoryName}("${jsxElement}", { base: styleProps })
+              return { css: styleProps }
             })
             
             return () => {
-              return h(Comp.value, attrs, slots)
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
             `
       ).with(
@@ -3555,22 +3561,20 @@ var system_types_d_ts_default = {
 
 // src/artifacts/types/generated.ts
 function getGeneratedTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     cssType: csstype_d_ts_default.content,
     static: static_css_d_ts_default.content,
-    recipe: rewriteImports(recipe_d_ts_default.content),
-    pattern: rewriteImports(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
-    parts: rewriteImports(parts_d_ts_default.content),
-    composition: rewriteImports(composition_d_ts_default.content),
-    selectors: rewriteImports(selectors_d_ts_default.content)
+    recipe: ctx.file.rewriteTypeImport(recipe_d_ts_default.content),
+    pattern: ctx.file.rewriteTypeImport(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
+    parts: ctx.file.rewriteTypeImport(parts_d_ts_default.content),
+    composition: ctx.file.rewriteTypeImport(composition_d_ts_default.content),
+    selectors: ctx.file.rewriteTypeImport(selectors_d_ts_default.content)
   };
 }
-var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
-    system: rewriteImports(
+    system: ctx.file.rewriteTypeImport(
       (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")

package/dist/index.mjs

@@ -441,7 +441,7 @@ function generateIsValidProp(ctx) {
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     'var userGeneratedStr = "";',
-    `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
+    `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`
   );
   content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
@@ -1017,9 +1017,9 @@ function generatePreactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, { ref, ...restProps })
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1344,9 +1344,9 @@ function generateQwikJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, restProps)
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1678,9 +1678,9 @@ function generateReactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return createElement(Comp, { ref, ...restProps })
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -2054,10 +2054,14 @@ function generateSolidJsxPattern(ctx, filters) {
         () => outdent30`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
         
-        const styleProps = ${styleFnName}(patternProps)
-        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        const cssProps = createMemo(() => {
+          const styleProps = ${styleFnName}(patternProps)
+          return { css: styleProps }
+        })
         
-        return createComponent(Comp, restProps)
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
       ).with(
         "minimal",
@@ -2068,6 +2072,7 @@ function generateSolidJsxPattern(ctx, filters) {
           const styleProps = ${styleFnName}(patternProps)
           return { css: mergeCss(styleProps, props.css) }
         })
+
         const mergedProps = mergeProps(restProps, cssProps)
 
         return createComponent(${factoryName}.${jsxElement}, mergedProps)
@@ -2510,13 +2515,14 @@ function generateVueJsxPattern(ctx, filters) {
           ${match9(jsxStyleProps2).with(
         "none",
         () => outdent36`
-            const Comp = computed(() => {
+            const cssProps = computed(() => {
               const styleProps = ${styleFnName}(props)
-              return ${factoryName}("${jsxElement}", { base: styleProps })
+              return { css: styleProps }
             })
             
             return () => {
-              return h(Comp.value, attrs, slots)
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
             `
       ).with(
@@ -3519,22 +3525,20 @@ var system_types_d_ts_default = {
 
 // src/artifacts/types/generated.ts
 function getGeneratedTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     cssType: csstype_d_ts_default.content,
     static: static_css_d_ts_default.content,
-    recipe: rewriteImports(recipe_d_ts_default.content),
-    pattern: rewriteImports(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
-    parts: rewriteImports(parts_d_ts_default.content),
-    composition: rewriteImports(composition_d_ts_default.content),
-    selectors: rewriteImports(selectors_d_ts_default.content)
+    recipe: ctx.file.rewriteTypeImport(recipe_d_ts_default.content),
+    pattern: ctx.file.rewriteTypeImport(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
+    parts: ctx.file.rewriteTypeImport(parts_d_ts_default.content),
+    composition: ctx.file.rewriteTypeImport(composition_d_ts_default.content),
+    selectors: ctx.file.rewriteTypeImport(selectors_d_ts_default.content)
   };
 }
-var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
-    system: rewriteImports(
+    system: ctx.file.rewriteTypeImport(
       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")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.39.2",
+  "version": "0.40.1",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.38",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.39.2",
-    "@pandacss/is-valid-prop": "^0.39.2",
-    "@pandacss/logger": "0.39.2",
-    "@pandacss/shared": "0.39.2",
-    "@pandacss/token-dictionary": "0.39.2",
-    "@pandacss/types": "0.39.2"
+    "@pandacss/core": "0.40.1",
+    "@pandacss/is-valid-prop": "^0.40.1",
+    "@pandacss/logger": "0.40.1",
+    "@pandacss/shared": "0.40.1",
+    "@pandacss/token-dictionary": "0.40.1",
+    "@pandacss/types": "0.40.1"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"