@pandacss/generator 0.10.0 → 0.11.0

package/dist/index.js

@@ -623,11 +623,7 @@ function generateCssFn(ctx) {
     config: { hash, prefix },
     conditions
   } = ctx;
-  const { separator } = utility;
-  const shorthandsByProp = Array.from(utility.shorthands.entries()).reduce((acc, [shorthand, prop]) => {
-    acc[prop] = shorthand;
-    return acc;
-  }, {});
+  const { separator, getPropShorthands } = utility;
   return {
     dts: import_outdent4.outdent`
     import type { SystemStyleObject } from '../types'
@@ -644,25 +640,39 @@ function generateCssFn(ctx) {
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const utilities = "${utility.entries().map(([prop, className]) => {
-      const shorthand = shorthandsByProp[prop];
-      return [prop, shorthand ? [className, shorthand === className ? 1 : shorthand].join("/") : className].join(":");
+      const shorthandList = getPropShorthands(prop);
+      const result = [
+        prop,
+        [
+          className,
+          shorthandList.length ? (
+            // mark shorthand equal to className as 1 to save a few bytes
+            shorthandList.map((shorthand) => shorthand === className ? 1 : shorthand).join("/")
+          ) : null
+        ].filter(Boolean).join("/")
+      ].join(":");
+      return result;
     }).join(",")}"
 
-    const classMap = {}
+    const classNames = new Map()
     ${utility.hasShorthand ? import_outdent4.outdent`
-    const shorthands = {}
+    const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
-      const [className, shorthand] = meta.split('/')
-      classMap[prop] = className
-      if (shorthand) shorthands[shorthand === '1' ? className : shorthand] = prop
+      const [className, ...shorthandList] = meta.split('/')
+      classNames.set(prop, className)
+      if (shorthandList.length) {
+        shorthandList.forEach((shorthand) => {
+          shorthands.set(shorthand === '1' ? className : shorthand, prop)
+        })
+      }
     })
 
-    const resolveShorthand = (prop) => shorthands[prop] || prop
+    const resolveShorthand = (prop) => shorthands.get(prop) || prop
     ` : import_outdent4.outdent`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classMap[prop] = className
+      classNames.set(prop, className)
     })
     `}
 
@@ -677,9 +687,9 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classMap[key] || hypenateProperty(key)
+              const propKey = classNames.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classMap[key] || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
@@ -2990,9 +3000,9 @@ function generatePropTypes(ctx) {
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T]${strictText}>
+    ? ConditionalValue<PropertyTypes[T]${strictText} | (string & {})>
     : T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T]>
+    ? ConditionalValue<CssProperties[T] | (string & {})>
     : ConditionalValue<string | number>
   `;
 }
@@ -3341,7 +3351,9 @@ var generateFlattenedCss = (ctx) => (options) => {
     ].filter(Boolean).join("\n\n") : unresolved
   });
   sheet.append(...files);
-  return sheet.toCss({ optimize: true, minify });
+  const output = sheet.toCss({ optimize: true, minify });
+  ctx.hooks.callHook("generator:css", "styles.css", output);
+  return output;
 };
 
 // src/artifacts/css/parser-css.ts

package/dist/index.mjs

@@ -592,11 +592,7 @@ function generateCssFn(ctx) {
     config: { hash, prefix },
     conditions
   } = ctx;
-  const { separator } = utility;
-  const shorthandsByProp = Array.from(utility.shorthands.entries()).reduce((acc, [shorthand, prop]) => {
-    acc[prop] = shorthand;
-    return acc;
-  }, {});
+  const { separator, getPropShorthands } = utility;
   return {
     dts: outdent4`
     import type { SystemStyleObject } from '../types'
@@ -613,25 +609,39 @@ function generateCssFn(ctx) {
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const utilities = "${utility.entries().map(([prop, className]) => {
-      const shorthand = shorthandsByProp[prop];
-      return [prop, shorthand ? [className, shorthand === className ? 1 : shorthand].join("/") : className].join(":");
+      const shorthandList = getPropShorthands(prop);
+      const result = [
+        prop,
+        [
+          className,
+          shorthandList.length ? (
+            // mark shorthand equal to className as 1 to save a few bytes
+            shorthandList.map((shorthand) => shorthand === className ? 1 : shorthand).join("/")
+          ) : null
+        ].filter(Boolean).join("/")
+      ].join(":");
+      return result;
     }).join(",")}"
 
-    const classMap = {}
+    const classNames = new Map()
     ${utility.hasShorthand ? outdent4`
-    const shorthands = {}
+    const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
-      const [className, shorthand] = meta.split('/')
-      classMap[prop] = className
-      if (shorthand) shorthands[shorthand === '1' ? className : shorthand] = prop
+      const [className, ...shorthandList] = meta.split('/')
+      classNames.set(prop, className)
+      if (shorthandList.length) {
+        shorthandList.forEach((shorthand) => {
+          shorthands.set(shorthand === '1' ? className : shorthand, prop)
+        })
+      }
     })
 
-    const resolveShorthand = (prop) => shorthands[prop] || prop
+    const resolveShorthand = (prop) => shorthands.get(prop) || prop
     ` : outdent4`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classMap[prop] = className
+      classNames.set(prop, className)
     })
     `}
 
@@ -646,9 +656,9 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classMap[key] || hypenateProperty(key)
+              const propKey = classNames.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classMap[key] || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
@@ -2959,9 +2969,9 @@ function generatePropTypes(ctx) {
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T]${strictText}>
+    ? ConditionalValue<PropertyTypes[T]${strictText} | (string & {})>
     : T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T]>
+    ? ConditionalValue<CssProperties[T] | (string & {})>
     : ConditionalValue<string | number>
   `;
 }
@@ -3310,7 +3320,9 @@ var generateFlattenedCss = (ctx) => (options) => {
     ].filter(Boolean).join("\n\n") : unresolved
   });
   sheet.append(...files);
-  return sheet.toCss({ optimize: true, minify });
+  const output = sheet.toCss({ optimize: true, minify });
+  ctx.hooks.callHook("generator:css", "styles.css", output);
+  return output;
 };
 
 // src/artifacts/css/parser-css.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "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.10.0",
-    "@pandacss/is-valid-prop": "0.10.0",
-    "@pandacss/logger": "0.10.0",
-    "@pandacss/shared": "0.10.0",
-    "@pandacss/token-dictionary": "0.10.0",
-    "@pandacss/types": "0.10.0"
+    "@pandacss/core": "0.11.0",
+    "@pandacss/is-valid-prop": "0.11.0",
+    "@pandacss/logger": "0.11.0",
+    "@pandacss/shared": "0.11.0",
+    "@pandacss/token-dictionary": "0.11.0",
+    "@pandacss/types": "0.11.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.10.0"
+    "@pandacss/fixture": "0.11.0"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",