@pandacss/generator 0.0.0-dev-20230813121817 → 0.0.0-dev-20230814191147

package/dist/index.js

@@ -654,13 +654,13 @@ function generateCssFn(ctx) {
       return result;
     }).join(",")}"
 
-    const classNames = new Map()
+    const classNameByProp = new Map()
     ${utility.hasShorthand ? import_outdent4.outdent`
     const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
       const [className, ...shorthandList] = meta.split('/')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
       if (shorthandList.length) {
         shorthandList.forEach((shorthand) => {
           shorthands.set(shorthand === '1' ? className : shorthand, prop)
@@ -672,7 +672,7 @@ function generateCssFn(ctx) {
     ` : import_outdent4.outdent`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
     })
     `}
 
@@ -687,15 +687,21 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classNames.get(key) || hypenateProperty(key)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
 
-    export const css = createCss(context)
+    const cssFn = createCss(context)
+    export const cssCache = new Map()
+    export const css = (styles) => {
+      const classNames = cssFn(styles)
+      cssCache.set(classNames, styles)
+      return classNames
+    }
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -833,23 +839,34 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 var import_outdent7 = __toESM(require("outdent"));
-function generateCx() {
+function generateCx(ctx) {
   return {
     js: import_outdent7.default`
+    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
+
     function cx() {
+      const objs = []
       let str = '',
         i = 0,
         arg
-    
+
       for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+        arg = arguments[i++]
+        if (!arg || typeof arg !== 'string') continue
+
+        if (cssCache.has(arg)) {
+          objs.push(cssCache.get(arg))
+          continue
         }
+
+        str && (str += ' ')
+        str += arg.toString()
       }
-      return str
+
+      const merged = mergeCss(...objs)
+      return [css(merged), str].join(' ')
     }
-   
+
     export { cx }
   `,
     dts: import_outdent7.default`
@@ -3168,7 +3185,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx();
+  const code = generateCx(ctx);
   return {
     dir: ctx.paths.css,
     files: [

package/dist/index.mjs

@@ -623,13 +623,13 @@ function generateCssFn(ctx) {
       return result;
     }).join(",")}"
 
-    const classNames = new Map()
+    const classNameByProp = new Map()
     ${utility.hasShorthand ? outdent4`
     const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
       const [className, ...shorthandList] = meta.split('/')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
       if (shorthandList.length) {
         shorthandList.forEach((shorthand) => {
           shorthands.set(shorthand === '1' ? className : shorthand, prop)
@@ -641,7 +641,7 @@ function generateCssFn(ctx) {
     ` : outdent4`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
     })
     `}
 
@@ -656,15 +656,21 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classNames.get(key) || hypenateProperty(key)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
 
-    export const css = createCss(context)
+    const cssFn = createCss(context)
+    export const cssCache = new Map()
+    export const css = (styles) => {
+      const classNames = cssFn(styles)
+      cssCache.set(classNames, styles)
+      return classNames
+    }
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -802,23 +808,34 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 import outdent7 from "outdent";
-function generateCx() {
+function generateCx(ctx) {
   return {
     js: outdent7`
+    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
+
     function cx() {
+      const objs = []
       let str = '',
         i = 0,
         arg
-    
+
       for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+        arg = arguments[i++]
+        if (!arg || typeof arg !== 'string') continue
+
+        if (cssCache.has(arg)) {
+          objs.push(cssCache.get(arg))
+          continue
         }
+
+        str && (str += ' ')
+        str += arg.toString()
       }
-      return str
+
+      const merged = mergeCss(...objs)
+      return [css(merged), str].join(' ')
     }
-   
+
     export { cx }
   `,
     dts: outdent7`
@@ -3137,7 +3154,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx();
+  const code = generateCx(ctx);
   return {
     dir: ctx.paths.css,
     files: [

package/package.json

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