@pandacss/generator 0.26.1 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +33 -28
  2. package/dist/index.mjs +37 -32
  3. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -281,7 +281,7 @@ var import_outdent5 = require("outdent");
281
281
  function generateCvaFn(ctx) {
282
282
  return {
283
283
  js: import_outdent5.outdent`
284
- ${ctx.file.import("compact, mergeProps, splitProps, uniq", "../helpers")}
284
+ ${ctx.file.import("compact, mergeProps, memo, splitProps, uniq", "../helpers")}
285
285
  ${ctx.file.import("css, mergeCss", "./css")}
286
286
 
287
287
  const defaults = (conf) => ({
@@ -332,7 +332,7 @@ function generateCvaFn(ctx) {
332
332
 
333
333
  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
334
334
 
335
- return Object.assign(cvaFn, {
335
+ return Object.assign(memo(cvaFn), {
336
336
  __cva__: true,
337
337
  variantMap,
338
338
  variantKeys,
@@ -418,7 +418,7 @@ var astish_mjs_default = {
418
418
 
419
419
  // src/artifacts/generated/helpers.mjs.json
420
420
  var helpers_mjs_default = {
421
- content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?/;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce((acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n }, {});\n}\nfunction normalizeShorthand(styles, context) {\n const { hasShorthand, resolveShorthand } = context.utility;\n return walkObject(styles, (v) => v, {\n getKey: (prop) => {\n return hasShorthand ? resolveShorthand(prop) : prop;\n }\n });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(toHash(baseArray.join(":")));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return (styleObject = {}) => {\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n };\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeShorthand(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
421
+ content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce((acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n }, {});\n}\nfunction normalizeShorthand(styles, context) {\n const { hasShorthand, resolveShorthand } = context.utility;\n return walkObject(styles, (v) => v, {\n getKey: (prop) => {\n return hasShorthand ? resolveShorthand(prop) : prop;\n }\n });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(toHash(baseArray.join(":")));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo((styleObject = {}) => {\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeShorthand(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
422
422
  };
423
423
 
424
424
  // src/artifacts/generated/normalize-html.mjs.json
@@ -478,8 +478,15 @@ function generateIsValidProp(ctx) {
478
478
  return {
479
479
  js: content,
480
480
  dts: import_outdent8.outdent`
481
+ import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types';
482
+
481
483
  declare const isCssProperty: (value: string) => boolean;
482
- declare const splitCssProps: <TProps extends Record<string, unknown>>(props: TProps) => [Pick<TProps, CssProperty>, Omit<TProps, CssProperty>]
484
+
485
+ type CssPropKey = keyof JsxStyleProps
486
+ type PickedCssProps<T> = Pretty<Pick<T, CssPropKey>>
487
+ type OmittedCssProps<T> = Pretty<DistributiveOmit<T, CssPropKey>>
488
+
489
+ declare const splitCssProps: <T>(props: T) => [PickedCssProps<T>, OmittedCssProps<T>]
483
490
 
484
491
  export { isCssProperty, splitCssProps };
485
492
  `
@@ -719,7 +726,7 @@ function generateRecipes(ctx, filters) {
719
726
  const jsCode = (0, import_ts_pattern4.match)(config).when(
720
727
  import_core.Recipes.isSlotRecipeConfig,
721
728
  (config2) => import_outdent11.outdent`
722
- ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
729
+ ${ctx.file.import("getSlotCompoundVariant, memo, splitProps", "../helpers")}
723
730
  ${ctx.file.import("createRecipe", "./create-recipe")}
724
731
 
725
732
  const ${baseName}DefaultVariants = ${stringify2(defaultVariants ?? {})}
@@ -728,9 +735,9 @@ function generateRecipes(ctx, filters) {
728
735
  const ${baseName}SlotNames = ${stringify2(config2.slots.map((slot) => [slot, `${config2.className}__${slot}`]))}
729
736
  const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
730
737
 
731
- const ${baseName}Fn = (props = {}) => {
738
+ const ${baseName}Fn = memo((props = {}) => {
732
739
  return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
733
- }
740
+ })
734
741
 
735
742
  const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
736
743
 
@@ -747,7 +754,7 @@ function generateRecipes(ctx, filters) {
747
754
  `
748
755
  ).otherwise(
749
756
  (config2) => import_outdent11.outdent`
750
- ${ctx.file.import("splitProps", "../helpers")}
757
+ ${ctx.file.import("memo, splitProps", "../helpers")}
751
758
  ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
752
759
 
753
760
  const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
@@ -758,7 +765,7 @@ function generateRecipes(ctx, filters) {
758
765
 
759
766
  const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
760
767
 
761
- export const ${baseName} = /* @__PURE__ */ Object.assign(${baseName}Fn, {
768
+ export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn), {
762
769
  __recipe__: true,
763
770
  __name__: '${baseName}',
764
771
  raw: (props) => props,
@@ -818,7 +825,7 @@ var import_outdent12 = require("outdent");
818
825
  function generateSvaFn(ctx) {
819
826
  return {
820
827
  js: import_outdent12.outdent`
821
- ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
828
+ ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
822
829
  ${ctx.file.import("cva", "./cva")}
823
830
 
824
831
  export function sva(config) {
@@ -845,7 +852,7 @@ function generateSvaFn(ctx) {
845
852
  Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
846
853
  );
847
854
 
848
- return Object.assign(svaFn, {
855
+ return Object.assign(memo(svaFn), {
849
856
  __cva__: false,
850
857
  raw,
851
858
  variantMap,
@@ -2925,12 +2932,15 @@ function generatePropTypes(ctx) {
2925
2932
  | 'visibility'
2926
2933
  | 'wordBreak'
2927
2934
  | 'writingMode'
2935
+
2928
2936
  type WithEscapeHatch<T> = T | \`[\${string}]\`
2937
+
2929
2938
  type FilterVagueString<Key, Value> = Value extends boolean
2930
2939
  ? Value
2931
2940
  : Key extends StrictableProps
2932
2941
  ? Value extends \`\${infer _}\` ? Value : never
2933
2942
  : Value
2943
+
2934
2944
  type PropOrCondition<Key, Value> = ${(0, import_ts_pattern11.match)(ctx.config).with(
2935
2945
  { strictTokens: true, strictPropertyValues: true },
2936
2946
  () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>"
@@ -2983,6 +2993,7 @@ var import_shared3 = require("@pandacss/shared");
2983
2993
  var import_outdent42 = require("outdent");
2984
2994
  var import_pluralize = __toESM(require("pluralize"));
2985
2995
  var categories = [
2996
+ "aspectRatios",
2986
2997
  "zIndex",
2987
2998
  "opacity",
2988
2999
  "colors",
@@ -3502,20 +3513,14 @@ var generateGlobalCss = (ctx, sheet) => {
3502
3513
 
3503
3514
  // src/artifacts/css/keyframe-css.ts
3504
3515
  var import_core2 = require("@pandacss/core");
3505
- var import_postcss = __toESM(require("postcss"));
3506
3516
  function generateKeyframeCss(ctx, sheet) {
3507
3517
  const { keyframes = {} } = ctx.config.theme ?? {};
3508
- const root = import_postcss.default.root();
3518
+ const result = {};
3509
3519
  for (const [name, definition] of Object.entries(keyframes)) {
3510
- root.append(
3511
- import_postcss.default.atRule({
3512
- name: "keyframes",
3513
- params: name,
3514
- nodes: (0, import_core2.toCss)(definition).root.nodes
3515
- })
3516
- );
3520
+ result[`@keyframes ${name}`] = definition;
3517
3521
  }
3518
- sheet.layers.tokens.append(root);
3522
+ const css2 = (0, import_core2.stringify)(sheet.serialize(result));
3523
+ sheet.layers.tokens.append(css2);
3519
3524
  void ctx.hooks.callHook("generator:css", "keyframes.css", "");
3520
3525
  }
3521
3526
 
@@ -3776,7 +3781,7 @@ var generateStaticCss = (ctx, sheet) => {
3776
3781
 
3777
3782
  // src/artifacts/css/token-css.ts
3778
3783
  var import_core3 = require("@pandacss/core");
3779
- var import_postcss2 = __toESM(require("postcss"));
3784
+ var import_postcss = __toESM(require("postcss"));
3780
3785
  function generateTokenCss(ctx, sheet) {
3781
3786
  const {
3782
3787
  config: { cssVarRoot },
@@ -3790,11 +3795,11 @@ function generateTokenCss(ctx, sheet) {
3790
3795
  if (Object.keys(varsObj).length === 0)
3791
3796
  continue;
3792
3797
  if (key === "base") {
3793
- const { css: css3 } = (0, import_core3.toCss)({ [root]: varsObj });
3798
+ const css3 = (0, import_core3.stringify)({ [root]: varsObj });
3794
3799
  results.push(css3);
3795
3800
  } else {
3796
3801
  const keys = key.split(":");
3797
- const { css: css3 } = (0, import_core3.toCss)(varsObj);
3802
+ const css3 = (0, import_core3.stringify)(varsObj);
3798
3803
  const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
3799
3804
  const parent = (0, import_core3.extractParentSelectors)(condition);
3800
3805
  return parent ? `&${parent}` : condition;
@@ -3812,15 +3817,15 @@ function generateTokenCss(ctx, sheet) {
3812
3817
  void ctx.hooks.callHook("generator:css", "tokens.css", "");
3813
3818
  }
3814
3819
  function getDeepestRule(root, selectors) {
3815
- const rule = import_postcss2.default.rule({ selector: "" });
3820
+ const rule = import_postcss.default.rule({ selector: "" });
3816
3821
  for (const selector of selectors) {
3817
3822
  const last = getDeepestNode(rule);
3818
3823
  const node = last ?? rule;
3819
3824
  if (selector.startsWith("@")) {
3820
- const atRule = import_postcss2.default.rule({ selector, nodes: [import_postcss2.default.rule({ selector: `${root}&` })] });
3825
+ const atRule = import_postcss.default.rule({ selector, nodes: [import_postcss.default.rule({ selector: `${root}&` })] });
3821
3826
  node.append(atRule);
3822
3827
  } else {
3823
- node.append(import_postcss2.default.rule({ selector }));
3828
+ node.append(import_postcss.default.rule({ selector }));
3824
3829
  }
3825
3830
  }
3826
3831
  return rule;
@@ -3832,7 +3837,7 @@ function getDeepestNode(node) {
3832
3837
  return node;
3833
3838
  }
3834
3839
  function cleanupSelectors(css2, varSelector) {
3835
- const root = import_postcss2.default.parse(css2);
3840
+ const root = import_postcss.default.parse(css2);
3836
3841
  root.walkRules((rule) => {
3837
3842
  const selectors = [];
3838
3843
  rule.selectors.forEach((selector) => {
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/generator.ts
2
- import { Context } from "@pandacss/core";
2
+ import { Context as Context2 } from "@pandacss/core";
3
3
  import { match as match12 } from "ts-pattern";
4
4
 
5
5
  // src/artifacts/setup-artifacts.ts
@@ -245,7 +245,7 @@ import { outdent as outdent5 } from "outdent";
245
245
  function generateCvaFn(ctx) {
246
246
  return {
247
247
  js: outdent5`
248
- ${ctx.file.import("compact, mergeProps, splitProps, uniq", "../helpers")}
248
+ ${ctx.file.import("compact, mergeProps, memo, splitProps, uniq", "../helpers")}
249
249
  ${ctx.file.import("css, mergeCss", "./css")}
250
250
 
251
251
  const defaults = (conf) => ({
@@ -296,7 +296,7 @@ function generateCvaFn(ctx) {
296
296
 
297
297
  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
298
298
 
299
- return Object.assign(cvaFn, {
299
+ return Object.assign(memo(cvaFn), {
300
300
  __cva__: true,
301
301
  variantMap,
302
302
  variantKeys,
@@ -382,7 +382,7 @@ var astish_mjs_default = {
382
382
 
383
383
  // src/artifacts/generated/helpers.mjs.json
384
384
  var helpers_mjs_default = {
385
- content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?/;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce((acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n }, {});\n}\nfunction normalizeShorthand(styles, context) {\n const { hasShorthand, resolveShorthand } = context.utility;\n return walkObject(styles, (v) => v, {\n getKey: (prop) => {\n return hasShorthand ? resolveShorthand(prop) : prop;\n }\n });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(toHash(baseArray.join(":")));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return (styleObject = {}) => {\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n };\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeShorthand(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
385
+ content: '// src/assert.ts\nfunction isObject(value) {\n return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n let name = "";\n let x;\n for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n name = toChar(x % 52) + name;\n return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n let i = x.length;\n while (i)\n h = h * 33 ^ x.charCodeAt(--i);\n return h;\n}\nfunction toHash(value) {\n return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n const objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n const cache = /* @__PURE__ */ new Map();\n const get = (...args) => {\n const key = JSON.stringify(args);\n if (cache.has(key)) {\n return cache.get(key);\n }\n const result = fn(...args);\n cache.set(key, result);\n return result;\n };\n return get;\n};\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n const next = inner(child, childPath);\n if (isNotNullish(next)) {\n result[key] = next;\n }\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\nfunction mapObject(obj, fn) {\n if (Array.isArray(obj))\n return obj.map((value) => fn(value));\n if (!isObject(obj))\n return fn(obj);\n return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n return values.reduce((acc, current, index) => {\n const key = breakpoints[index];\n if (current != null) {\n acc[key] = current;\n }\n return acc;\n }, {});\n}\nfunction normalizeShorthand(styles, context) {\n const { hasShorthand, resolveShorthand } = context.utility;\n return walkObject(styles, (v) => v, {\n getKey: (prop) => {\n return hasShorthand ? resolveShorthand(prop) : prop;\n }\n });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n const { utility, conditions } = context;\n const { hasShorthand, resolveShorthand } = utility;\n return walkObject(\n styles,\n (value) => {\n return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n },\n {\n stop: (value) => Array.isArray(value),\n getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n }\n );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n shift: (v) => v,\n finalize: (v) => v,\n breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n const { utility, hash, conditions: conds = fallbackCondition } = context;\n const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n const hashFn = (conditions, className) => {\n let result;\n if (hash) {\n const baseArray = [...conds.finalize(conditions), className];\n result = formatClassName(toHash(baseArray.join(":")));\n } else {\n const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n result = baseArray.join(":");\n }\n return result;\n };\n return memo((styleObject = {}) => {\n const normalizedObject = normalizeStyleObject(styleObject, context);\n const classNames = /* @__PURE__ */ new Set();\n walkObject(normalizedObject, (value, paths) => {\n const important = isImportant(value);\n if (value == null)\n return;\n const [prop, ...allConditions] = conds.shift(paths);\n const conditions = filterBaseConditions(allConditions);\n const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n let className = hashFn(conditions, transformed.className);\n if (important)\n className = `${className}!`;\n classNames.add(className);\n });\n return Array.from(classNames).join(" ");\n });\n}\nfunction compactStyles(...styles) {\n return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n function resolve(styles) {\n const allStyles = compactStyles(...styles);\n if (allStyles.length === 1)\n return allStyles;\n return allStyles.map((style) => normalizeShorthand(style, context));\n }\n function mergeCss(...styles) {\n return mergeProps(...resolve(styles));\n }\n function assignCss(...styles) {\n return Object.assign({}, ...resolve(styles));\n }\n return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n if (property.startsWith("--"))\n return property;\n return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n const init = (slot) => ({\n className: [recipe.className, slot].filter(Boolean).join("__"),\n base: recipe.base?.[slot] ?? {},\n variants: {},\n defaultVariants: recipe.defaultVariants ?? {},\n compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n });\n const slots = recipe.slots ?? [];\n const recipeParts = slots.map((slot) => [slot, init(slot)]);\n for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n recipeParts.forEach(([slot, slotRecipe]) => {\n slotRecipe.variants[variantsKey] ??= {};\n slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n });\n }\n }\n return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n compact,\n createCss,\n createMergeCss,\n filterBaseConditions,\n getSlotCompoundVariant,\n getSlotRecipes,\n hypenateProperty,\n isBaseCondition,\n isObject,\n mapObject,\n memo,\n mergeProps,\n splitProps,\n toHash,\n uniq,\n walkObject,\n withoutSpace\n};\n'
386
386
  };
387
387
 
388
388
  // src/artifacts/generated/normalize-html.mjs.json
@@ -442,8 +442,15 @@ function generateIsValidProp(ctx) {
442
442
  return {
443
443
  js: content,
444
444
  dts: outdent8`
445
+ import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types';
446
+
445
447
  declare const isCssProperty: (value: string) => boolean;
446
- declare const splitCssProps: <TProps extends Record<string, unknown>>(props: TProps) => [Pick<TProps, CssProperty>, Omit<TProps, CssProperty>]
448
+
449
+ type CssPropKey = keyof JsxStyleProps
450
+ type PickedCssProps<T> = Pretty<Pick<T, CssPropKey>>
451
+ type OmittedCssProps<T> = Pretty<DistributiveOmit<T, CssPropKey>>
452
+
453
+ declare const splitCssProps: <T>(props: T) => [PickedCssProps<T>, OmittedCssProps<T>]
447
454
 
448
455
  export { isCssProperty, splitCssProps };
449
456
  `
@@ -683,7 +690,7 @@ function generateRecipes(ctx, filters) {
683
690
  const jsCode = match4(config).when(
684
691
  Recipes.isSlotRecipeConfig,
685
692
  (config2) => outdent11`
686
- ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
693
+ ${ctx.file.import("getSlotCompoundVariant, memo, splitProps", "../helpers")}
687
694
  ${ctx.file.import("createRecipe", "./create-recipe")}
688
695
 
689
696
  const ${baseName}DefaultVariants = ${stringify2(defaultVariants ?? {})}
@@ -692,9 +699,9 @@ function generateRecipes(ctx, filters) {
692
699
  const ${baseName}SlotNames = ${stringify2(config2.slots.map((slot) => [slot, `${config2.className}__${slot}`]))}
693
700
  const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
694
701
 
695
- const ${baseName}Fn = (props = {}) => {
702
+ const ${baseName}Fn = memo((props = {}) => {
696
703
  return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
697
- }
704
+ })
698
705
 
699
706
  const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
700
707
 
@@ -711,7 +718,7 @@ function generateRecipes(ctx, filters) {
711
718
  `
712
719
  ).otherwise(
713
720
  (config2) => outdent11`
714
- ${ctx.file.import("splitProps", "../helpers")}
721
+ ${ctx.file.import("memo, splitProps", "../helpers")}
715
722
  ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
716
723
 
717
724
  const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
@@ -722,7 +729,7 @@ function generateRecipes(ctx, filters) {
722
729
 
723
730
  const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
724
731
 
725
- export const ${baseName} = /* @__PURE__ */ Object.assign(${baseName}Fn, {
732
+ export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn), {
726
733
  __recipe__: true,
727
734
  __name__: '${baseName}',
728
735
  raw: (props) => props,
@@ -782,7 +789,7 @@ import { outdent as outdent12 } from "outdent";
782
789
  function generateSvaFn(ctx) {
783
790
  return {
784
791
  js: outdent12`
785
- ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
792
+ ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
786
793
  ${ctx.file.import("cva", "./cva")}
787
794
 
788
795
  export function sva(config) {
@@ -809,7 +816,7 @@ function generateSvaFn(ctx) {
809
816
  Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
810
817
  );
811
818
 
812
- return Object.assign(svaFn, {
819
+ return Object.assign(memo(svaFn), {
813
820
  __cva__: false,
814
821
  raw,
815
822
  variantMap,
@@ -2889,12 +2896,15 @@ function generatePropTypes(ctx) {
2889
2896
  | 'visibility'
2890
2897
  | 'wordBreak'
2891
2898
  | 'writingMode'
2899
+
2892
2900
  type WithEscapeHatch<T> = T | \`[\${string}]\`
2901
+
2893
2902
  type FilterVagueString<Key, Value> = Value extends boolean
2894
2903
  ? Value
2895
2904
  : Key extends StrictableProps
2896
2905
  ? Value extends \`\${infer _}\` ? Value : never
2897
2906
  : Value
2907
+
2898
2908
  type PropOrCondition<Key, Value> = ${match11(ctx.config).with(
2899
2909
  { strictTokens: true, strictPropertyValues: true },
2900
2910
  () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>"
@@ -2947,6 +2957,7 @@ import { capitalize, unionType as unionType3 } from "@pandacss/shared";
2947
2957
  import { outdent as outdent42 } from "outdent";
2948
2958
  import pluralize from "pluralize";
2949
2959
  var categories = [
2960
+ "aspectRatios",
2950
2961
  "zIndex",
2951
2962
  "opacity",
2952
2963
  "colors",
@@ -3465,21 +3476,15 @@ var generateGlobalCss = (ctx, sheet) => {
3465
3476
  };
3466
3477
 
3467
3478
  // src/artifacts/css/keyframe-css.ts
3468
- import { toCss } from "@pandacss/core";
3469
- import postcss from "postcss";
3479
+ import { stringify as stringify3 } from "@pandacss/core";
3470
3480
  function generateKeyframeCss(ctx, sheet) {
3471
3481
  const { keyframes = {} } = ctx.config.theme ?? {};
3472
- const root = postcss.root();
3482
+ const result = {};
3473
3483
  for (const [name, definition] of Object.entries(keyframes)) {
3474
- root.append(
3475
- postcss.atRule({
3476
- name: "keyframes",
3477
- params: name,
3478
- nodes: toCss(definition).root.nodes
3479
- })
3480
- );
3484
+ result[`@keyframes ${name}`] = definition;
3481
3485
  }
3482
- sheet.layers.tokens.append(root);
3486
+ const css2 = stringify3(sheet.serialize(result));
3487
+ sheet.layers.tokens.append(css2);
3483
3488
  void ctx.hooks.callHook("generator:css", "keyframes.css", "");
3484
3489
  }
3485
3490
 
@@ -3739,8 +3744,8 @@ var generateStaticCss = (ctx, sheet) => {
3739
3744
  };
3740
3745
 
3741
3746
  // src/artifacts/css/token-css.ts
3742
- import { expandNestedCss, extractParentSelectors, toCss as toCss2 } from "@pandacss/core";
3743
- import postcss2 from "postcss";
3747
+ import { expandNestedCss, extractParentSelectors, stringify as stringify4 } from "@pandacss/core";
3748
+ import postcss from "postcss";
3744
3749
  function generateTokenCss(ctx, sheet) {
3745
3750
  const {
3746
3751
  config: { cssVarRoot },
@@ -3754,11 +3759,11 @@ function generateTokenCss(ctx, sheet) {
3754
3759
  if (Object.keys(varsObj).length === 0)
3755
3760
  continue;
3756
3761
  if (key === "base") {
3757
- const { css: css3 } = toCss2({ [root]: varsObj });
3762
+ const css3 = stringify4({ [root]: varsObj });
3758
3763
  results.push(css3);
3759
3764
  } else {
3760
3765
  const keys = key.split(":");
3761
- const { css: css3 } = toCss2(varsObj);
3766
+ const css3 = stringify4(varsObj);
3762
3767
  const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
3763
3768
  const parent = extractParentSelectors(condition);
3764
3769
  return parent ? `&${parent}` : condition;
@@ -3776,15 +3781,15 @@ function generateTokenCss(ctx, sheet) {
3776
3781
  void ctx.hooks.callHook("generator:css", "tokens.css", "");
3777
3782
  }
3778
3783
  function getDeepestRule(root, selectors) {
3779
- const rule = postcss2.rule({ selector: "" });
3784
+ const rule = postcss.rule({ selector: "" });
3780
3785
  for (const selector of selectors) {
3781
3786
  const last = getDeepestNode(rule);
3782
3787
  const node = last ?? rule;
3783
3788
  if (selector.startsWith("@")) {
3784
- const atRule = postcss2.rule({ selector, nodes: [postcss2.rule({ selector: `${root}&` })] });
3789
+ const atRule = postcss.rule({ selector, nodes: [postcss.rule({ selector: `${root}&` })] });
3785
3790
  node.append(atRule);
3786
3791
  } else {
3787
- node.append(postcss2.rule({ selector }));
3792
+ node.append(postcss.rule({ selector }));
3788
3793
  }
3789
3794
  }
3790
3795
  return rule;
@@ -3796,7 +3801,7 @@ function getDeepestNode(node) {
3796
3801
  return node;
3797
3802
  }
3798
3803
  function cleanupSelectors(css2, varSelector) {
3799
- const root = postcss2.parse(css2);
3804
+ const root = postcss.parse(css2);
3800
3805
  root.walkRules((rule) => {
3801
3806
  const selectors = [];
3802
3807
  rule.selectors.forEach((selector) => {
@@ -3822,7 +3827,7 @@ function cleanupSelectors(css2, varSelector) {
3822
3827
  }
3823
3828
 
3824
3829
  // src/generator.ts
3825
- var Generator = class extends Context {
3830
+ var Generator = class extends Context2 {
3826
3831
  constructor(conf) {
3827
3832
  super(conf);
3828
3833
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pandacss/generator",
3
- "version": "0.26.1",
3
+ "version": "0.27.0",
4
4
  "description": "The css generator for css panda",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
37
37
  "pluralize": "8.0.0",
38
38
  "postcss": "^8.4.31",
39
39
  "ts-pattern": "5.0.5",
40
- "@pandacss/core": "0.26.1",
41
- "@pandacss/is-valid-prop": "^0.26.1",
42
- "@pandacss/logger": "0.26.1",
43
- "@pandacss/shared": "0.26.1",
44
- "@pandacss/token-dictionary": "0.26.1",
45
- "@pandacss/types": "0.26.1"
40
+ "@pandacss/core": "0.27.0",
41
+ "@pandacss/is-valid-prop": "^0.27.0",
42
+ "@pandacss/logger": "0.27.0",
43
+ "@pandacss/shared": "0.27.0",
44
+ "@pandacss/token-dictionary": "0.27.0",
45
+ "@pandacss/types": "0.27.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@types/pluralize": "0.0.33",