@pandacss/shared 0.30.1 → 0.31.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { W as WalkObjectStopFn, M as MappedObject, C as CreateCssContext } from './shared-z3agWt4M.mjs';
-export { x as WalkObjectOptions, f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, a as isBoolean, b as isFunction, j as isImportant, c as isObject, i as isString, z as mapObject, m as markImportant, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, w as withoutImportant, k as withoutSpace } from './shared-z3agWt4M.mjs';
+import { W as WalkObjectStopFn, M as MappedObject, C as CreateCssContext } from './shared-4wnn7ulW.mjs';
+export { x as WalkObjectOptions, f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, a as isBoolean, b as isFunction, j as isImportant, c as isObject, i as isString, z as mapObject, m as markImportant, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, w as withoutImportant, k as withoutSpace } from './shared-4wnn7ulW.mjs';
 export { astish } from './astish.mjs';
 
 declare const getArbitraryValue: (_value: string) => string;
@@ -78,6 +78,27 @@ declare const createRegex: (item: Array<string | RegExp>) => RegExp;
 declare const stringifyJson: (config: Record<string, any>) => string;
 declare const parseJson: (config: string) => any;
 
+/**
+ * Get the property priority: the higher the priority, the higher the resulting
+ * specificity of the atom. For example, if we had:
+ *
+ * ```tsx
+ * import { css } from '@pandacss/dev';
+ *
+ * css({
+ *   backgroundColor: 'blue',
+ *   background: 'red',
+ * })
+ *
+ * ```
+ *
+ * and so the more specific selector would win
+ *
+ * Taken from
+ * @see https://github.com/callstack/linaria/blob/049a4ccb77e29f3628353352db21bd446fa04a2e/packages/atomic/src/processors/helpers/propertyPriority.ts
+ */
+declare function getPropertyPriority(property: string): 1 | 2;
+
 declare function splitBy(value: string, separator?: string): any[];
 declare function splitDotPath(path: string): string[];
 declare function getNegativePath(path: string[]): string[];
@@ -89,19 +110,22 @@ type MapToRecord<K extends Map<string, any>> = {
 declare function mapToJson<T extends Map<string, any>>(map: T): MapToRecord<T>;
 
 type CallbackFn = (args: CallbackItem) => void;
-type CallbackItem = {
+interface CallbackItem {
     value: any;
     path: string;
+    paths: string[];
     depth: number;
     parent: any[] | Record<string, unknown>;
     key: string;
-};
+}
 declare const isObjectOrArray: (obj: unknown) => boolean;
-declare function traverse(obj: any, callback: CallbackFn, options?: {
-    separator: string;
+interface TraverseOptions {
+    separator?: string;
     maxDepth?: number;
-}): void;
+    stop?: (args: CallbackItem) => boolean;
+}
+declare function traverse(obj: any, callback: CallbackFn, options?: TraverseOptions): void;
 
 declare function unionType(values: IterableIterator<string> | string[] | readonly string[] | Set<string>): string;
 
-export { CreateCssContext, type CssVar, type CssVarOptions, type MapToRecord, MappedObject, PandaError, type PandaErrorCode, WalkObjectStopFn, calc, camelCaseProperty, capitalize, createRegex, cssVar, dashCase, deepSet, entries, esc, flatten, fromEntries, getArbitraryValue, getDotPath, getNegativePath, getOrCreateSet, getUnit, isCssFunction, isCssUnit, isCssVar, isObjectOrArray, mapEntries, mapToJson, normalizeStyleObject, parseJson, splitBy, splitDotPath, stringifyJson, toEm, toPx, toRem, toResponsiveObject, traverse, uncapitalize, unionType };
+export { CreateCssContext, type CssVar, type CssVarOptions, type MapToRecord, MappedObject, PandaError, type PandaErrorCode, WalkObjectStopFn, calc, camelCaseProperty, capitalize, createRegex, cssVar, dashCase, deepSet, entries, esc, flatten, fromEntries, getArbitraryValue, getDotPath, getNegativePath, getOrCreateSet, getPropertyPriority, getUnit, isCssFunction, isCssUnit, isCssVar, isObjectOrArray, mapEntries, mapToJson, normalizeStyleObject, parseJson, splitBy, splitDotPath, stringifyJson, toEm, toPx, toRem, toResponsiveObject, traverse, uncapitalize, unionType };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { W as WalkObjectStopFn, M as MappedObject, C as CreateCssContext } from './shared-z3agWt4M.js';
-export { x as WalkObjectOptions, f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, a as isBoolean, b as isFunction, j as isImportant, c as isObject, i as isString, z as mapObject, m as markImportant, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, w as withoutImportant, k as withoutSpace } from './shared-z3agWt4M.js';
+import { W as WalkObjectStopFn, M as MappedObject, C as CreateCssContext } from './shared-4wnn7ulW.js';
+export { x as WalkObjectOptions, f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, a as isBoolean, b as isFunction, j as isImportant, c as isObject, i as isString, z as mapObject, m as markImportant, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, w as withoutImportant, k as withoutSpace } from './shared-4wnn7ulW.js';
 export { astish } from './astish.js';
 
 declare const getArbitraryValue: (_value: string) => string;
@@ -78,6 +78,27 @@ declare const createRegex: (item: Array<string | RegExp>) => RegExp;
 declare const stringifyJson: (config: Record<string, any>) => string;
 declare const parseJson: (config: string) => any;
 
+/**
+ * Get the property priority: the higher the priority, the higher the resulting
+ * specificity of the atom. For example, if we had:
+ *
+ * ```tsx
+ * import { css } from '@pandacss/dev';
+ *
+ * css({
+ *   backgroundColor: 'blue',
+ *   background: 'red',
+ * })
+ *
+ * ```
+ *
+ * and so the more specific selector would win
+ *
+ * Taken from
+ * @see https://github.com/callstack/linaria/blob/049a4ccb77e29f3628353352db21bd446fa04a2e/packages/atomic/src/processors/helpers/propertyPriority.ts
+ */
+declare function getPropertyPriority(property: string): 1 | 2;
+
 declare function splitBy(value: string, separator?: string): any[];
 declare function splitDotPath(path: string): string[];
 declare function getNegativePath(path: string[]): string[];
@@ -89,19 +110,22 @@ type MapToRecord<K extends Map<string, any>> = {
 declare function mapToJson<T extends Map<string, any>>(map: T): MapToRecord<T>;
 
 type CallbackFn = (args: CallbackItem) => void;
-type CallbackItem = {
+interface CallbackItem {
     value: any;
     path: string;
+    paths: string[];
     depth: number;
     parent: any[] | Record<string, unknown>;
     key: string;
-};
+}
 declare const isObjectOrArray: (obj: unknown) => boolean;
-declare function traverse(obj: any, callback: CallbackFn, options?: {
-    separator: string;
+interface TraverseOptions {
+    separator?: string;
     maxDepth?: number;
-}): void;
+    stop?: (args: CallbackItem) => boolean;
+}
+declare function traverse(obj: any, callback: CallbackFn, options?: TraverseOptions): void;
 
 declare function unionType(values: IterableIterator<string> | string[] | readonly string[] | Set<string>): string;
 
-export { CreateCssContext, type CssVar, type CssVarOptions, type MapToRecord, MappedObject, PandaError, type PandaErrorCode, WalkObjectStopFn, calc, camelCaseProperty, capitalize, createRegex, cssVar, dashCase, deepSet, entries, esc, flatten, fromEntries, getArbitraryValue, getDotPath, getNegativePath, getOrCreateSet, getUnit, isCssFunction, isCssUnit, isCssVar, isObjectOrArray, mapEntries, mapToJson, normalizeStyleObject, parseJson, splitBy, splitDotPath, stringifyJson, toEm, toPx, toRem, toResponsiveObject, traverse, uncapitalize, unionType };
+export { CreateCssContext, type CssVar, type CssVarOptions, type MapToRecord, MappedObject, PandaError, type PandaErrorCode, WalkObjectStopFn, calc, camelCaseProperty, capitalize, createRegex, cssVar, dashCase, deepSet, entries, esc, flatten, fromEntries, getArbitraryValue, getDotPath, getNegativePath, getOrCreateSet, getPropertyPriority, getUnit, isCssFunction, isCssUnit, isCssVar, isObjectOrArray, mapEntries, mapToJson, normalizeStyleObject, parseJson, splitBy, splitDotPath, stringifyJson, toEm, toPx, toRem, toResponsiveObject, traverse, uncapitalize, unionType };

package/dist/index.js

@@ -42,6 +42,7 @@ __export(src_exports, {
   getNegativePath: () => getNegativePath,
   getOrCreateSet: () => getOrCreateSet,
   getPatternStyles: () => getPatternStyles,
+  getPropertyPriority: () => getPropertyPriority,
   getSlotCompoundVariant: () => getSlotCompoundVariant,
   getSlotRecipes: () => getSlotRecipes,
   getUnit: () => getUnit,
@@ -351,7 +352,8 @@ function createCss(context) {
     }
     return result;
   };
-  return memo((styleObject = {}) => {
+  return memo(({ base, ...styles } = {}) => {
+    const styleObject = Object.assign(styles, base);
     const normalizedObject = normalizeStyleObject(styleObject, context);
     const classNames = /* @__PURE__ */ new Set();
     walkObject(normalizedObject, (value, paths) => {
@@ -620,6 +622,123 @@ var parseJson = (config) => {
   return JSON.parse(config);
 };
 
+// src/shorthand-properties.ts
+var shorthandProperties = {
+  animation: [
+    "animationName",
+    "animationDuration",
+    "animationTimingFunction",
+    "animationDelay",
+    "animationIterationCount",
+    "animationDirection",
+    "animationFillMode",
+    "animationPlayState"
+  ],
+  background: [
+    "backgroundImage",
+    "backgroundPosition",
+    "backgroundSize",
+    "backgroundRepeat",
+    "backgroundAttachment",
+    "backgroundOrigin",
+    "backgroundClip",
+    "backgroundColor"
+  ],
+  backgroundPosition: ["backgroundPositionX", "backgroundPositionY"],
+  border: ["borderWidth", "borderStyle", "borderColor"],
+  borderBlockEnd: ["borderBlockEndWidth", "borderBlockEndStyle", "borderBlockEndColor"],
+  borderBlockStart: ["borderBlockStartWidth", "borderBlockStartStyle", "borderBlockStartColor"],
+  borderBottom: ["borderBottomWidth", "borderBottomStyle", "borderBottomColor"],
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderImage: ["borderImageSource", "borderImageSlice", "borderImageWidth", "borderImageOutset", "borderImageRepeat"],
+  borderInlineEnd: ["borderInlineEndWidth", "borderInlineEndStyle", "borderInlineEndColor"],
+  borderInlineStart: ["borderInlineStartWidth", "borderInlineStartStyle", "borderInlineStartColor"],
+  borderLeft: ["borderLeftWidth", "borderLeftStyle", "borderLeftColor"],
+  borderRadius: ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"],
+  borderRight: ["borderRightWidth", "borderRightStyle", "borderRightColor"],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderTop: ["borderTopWidth", "borderTopStyle", "borderTopColor"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  columnRule: ["columnRuleWidth", "columnRuleStyle", "columnRuleColor"],
+  columns: ["columnWidth", "columnCount"],
+  container: ["contain", "content"],
+  containIntrinsicSize: ["containIntrinsicSizeInline", "containIntrinsicSizeBlock"],
+  cue: ["cueBefore", "cueAfter"],
+  flex: ["flexGrow", "flexShrink", "flexBasis"],
+  flexFlow: ["flexDirection", "flexWrap"],
+  font: [
+    "fontStyle",
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "lineHeight",
+    "fontFamily"
+  ],
+  fontSynthesis: ["fontSynthesisWeight", "fontSynthesisStyle", "fontSynthesisSmallCaps"],
+  fontVariant: [
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition"
+  ],
+  gap: ["columnGap", "rowGap"],
+  grid: [
+    "gridTemplateColumns",
+    "gridTemplateRows",
+    "gridTemplateAreas",
+    "gridAutoColumns",
+    "gridAutoRows",
+    "gridAutoFlow"
+  ],
+  gridArea: ["gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"],
+  gridColumn: ["gridColumnStart", "gridColumnEnd"],
+  gridGap: ["gridColumnGap", "gridRowGap"],
+  gridRow: ["gridRowStart", "gridRowEnd"],
+  gridTemplate: ["gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas"],
+  inset: ["top", "right", "bottom", "left"],
+  listStyle: ["listStyleType", "listStylePosition", "listStyleImage"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  mask: ["maskImage", "maskMode", "maskRepeat", "maskPosition", "maskClip", "maskOrigin", "maskSize", "maskComposite"],
+  maskBorder: [
+    "maskBorderSource",
+    "maskBorderMode",
+    "maskBorderSlice",
+    "maskBorderWidth",
+    "maskBorderOutset",
+    "maskBorderRepeat"
+  ],
+  offset: ["offsetPosition", "offsetPath", "offsetDistance", "offsetRotate", "offsetAnchor"],
+  outline: ["outlineWidth", "outlineStyle", "outlineColor"],
+  overflow: ["overflowX", "overflowY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  pause: ["pauseBefore", "pauseAfter"],
+  placeContent: ["alignContent", "justifyContent"],
+  placeItems: ["alignItems", "justifyItems"],
+  placeSelf: ["alignSelf", "justifySelf"],
+  rest: ["restBefore", "restAfter"],
+  scrollMargin: ["scrollMarginTop", "scrollMarginRight", "scrollMarginBottom", "scrollMarginLeft"],
+  scrollPadding: ["scrollPaddingTop", "scrollPaddingRight", "scrollPaddingBottom", "scrollPaddingLeft"],
+  scrollPaddingBlock: ["scrollPaddingBlockStart", "scrollPaddingBlockEnd"],
+  scrollPaddingInline: ["scrollPaddingInlineStart", "scrollPaddingInlineEnd"],
+  scrollSnapMargin: ["scrollSnapMarginTop", "scrollSnapMarginRight", "scrollSnapMarginBottom", "scrollSnapMarginLeft"],
+  scrollSnapMarginBlock: ["scrollSnapMarginBlockStart", "scrollSnapMarginBlockEnd"],
+  scrollSnapMarginInline: ["scrollSnapMarginInlineStart", "scrollSnapMarginInlineEnd"],
+  scrollTimeline: ["scrollTimelineSource", "scrollTimelineOrientation"],
+  textDecoration: ["textDecorationLine", "textDecorationStyle", "textDecorationColor"],
+  textEmphasis: ["textEmphasisStyle", "textEmphasisColor"],
+  transition: ["transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay"]
+};
+var longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
+function getPropertyPriority(property) {
+  return longhands.includes(property) ? 2 : 1;
+}
+
 // src/slot.ts
 var getSlotRecipes = (recipe = {}) => {
   const init = (slot) => ({
@@ -728,23 +847,37 @@ function mapToJson(map) {
 
 // src/traverse.ts
 var isObjectOrArray = (obj) => typeof obj === "object" && obj !== null;
-var defaultOptions = { separator: ".", maxDepth: Infinity };
+var defaultOptions = {
+  separator: ".",
+  maxDepth: Infinity
+};
 function traverse(obj, callback2, options = defaultOptions) {
   const maxDepth = options.maxDepth ?? defaultOptions.maxDepth;
   const separator = options.separator ?? defaultOptions.separator;
-  const stack = [{ value: obj, path: "", depth: -1, parent: null, key: "" }];
+  const stack = [{ value: obj, path: "", paths: [], depth: -1, parent: null, key: "" }];
   while (stack.length > 0) {
     const currentItem = stack.pop();
     if (currentItem.parent !== null) {
       callback2(currentItem);
     }
+    if (options.stop?.(currentItem)) {
+      continue;
+    }
     if (isObjectOrArray(currentItem.value) && currentItem.depth < maxDepth) {
       const keys = Object.keys(currentItem.value);
       for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const value = currentItem.value[key];
         const path = currentItem.path ? currentItem.path + separator + key : key;
-        stack.push({ value, path, depth: currentItem.depth + 1, parent: currentItem.value, key });
+        const paths = currentItem.paths.concat(key);
+        stack.push({
+          value,
+          path,
+          paths,
+          depth: currentItem.depth + 1,
+          parent: currentItem.value,
+          key
+        });
       }
     }
   }
@@ -781,6 +914,7 @@ var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(
   getNegativePath,
   getOrCreateSet,
   getPatternStyles,
+  getPropertyPriority,
   getSlotCompoundVariant,
   getSlotRecipes,
   getUnit,

package/dist/index.mjs

@@ -265,7 +265,8 @@ function createCss(context) {
     }
     return result;
   };
-  return memo((styleObject = {}) => {
+  return memo(({ base, ...styles } = {}) => {
+    const styleObject = Object.assign(styles, base);
     const normalizedObject = normalizeStyleObject(styleObject, context);
     const classNames = /* @__PURE__ */ new Set();
     walkObject(normalizedObject, (value, paths) => {
@@ -534,6 +535,123 @@ var parseJson = (config) => {
   return JSON.parse(config);
 };
 
+// src/shorthand-properties.ts
+var shorthandProperties = {
+  animation: [
+    "animationName",
+    "animationDuration",
+    "animationTimingFunction",
+    "animationDelay",
+    "animationIterationCount",
+    "animationDirection",
+    "animationFillMode",
+    "animationPlayState"
+  ],
+  background: [
+    "backgroundImage",
+    "backgroundPosition",
+    "backgroundSize",
+    "backgroundRepeat",
+    "backgroundAttachment",
+    "backgroundOrigin",
+    "backgroundClip",
+    "backgroundColor"
+  ],
+  backgroundPosition: ["backgroundPositionX", "backgroundPositionY"],
+  border: ["borderWidth", "borderStyle", "borderColor"],
+  borderBlockEnd: ["borderBlockEndWidth", "borderBlockEndStyle", "borderBlockEndColor"],
+  borderBlockStart: ["borderBlockStartWidth", "borderBlockStartStyle", "borderBlockStartColor"],
+  borderBottom: ["borderBottomWidth", "borderBottomStyle", "borderBottomColor"],
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderImage: ["borderImageSource", "borderImageSlice", "borderImageWidth", "borderImageOutset", "borderImageRepeat"],
+  borderInlineEnd: ["borderInlineEndWidth", "borderInlineEndStyle", "borderInlineEndColor"],
+  borderInlineStart: ["borderInlineStartWidth", "borderInlineStartStyle", "borderInlineStartColor"],
+  borderLeft: ["borderLeftWidth", "borderLeftStyle", "borderLeftColor"],
+  borderRadius: ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"],
+  borderRight: ["borderRightWidth", "borderRightStyle", "borderRightColor"],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderTop: ["borderTopWidth", "borderTopStyle", "borderTopColor"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  columnRule: ["columnRuleWidth", "columnRuleStyle", "columnRuleColor"],
+  columns: ["columnWidth", "columnCount"],
+  container: ["contain", "content"],
+  containIntrinsicSize: ["containIntrinsicSizeInline", "containIntrinsicSizeBlock"],
+  cue: ["cueBefore", "cueAfter"],
+  flex: ["flexGrow", "flexShrink", "flexBasis"],
+  flexFlow: ["flexDirection", "flexWrap"],
+  font: [
+    "fontStyle",
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "lineHeight",
+    "fontFamily"
+  ],
+  fontSynthesis: ["fontSynthesisWeight", "fontSynthesisStyle", "fontSynthesisSmallCaps"],
+  fontVariant: [
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition"
+  ],
+  gap: ["columnGap", "rowGap"],
+  grid: [
+    "gridTemplateColumns",
+    "gridTemplateRows",
+    "gridTemplateAreas",
+    "gridAutoColumns",
+    "gridAutoRows",
+    "gridAutoFlow"
+  ],
+  gridArea: ["gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"],
+  gridColumn: ["gridColumnStart", "gridColumnEnd"],
+  gridGap: ["gridColumnGap", "gridRowGap"],
+  gridRow: ["gridRowStart", "gridRowEnd"],
+  gridTemplate: ["gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas"],
+  inset: ["top", "right", "bottom", "left"],
+  listStyle: ["listStyleType", "listStylePosition", "listStyleImage"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  mask: ["maskImage", "maskMode", "maskRepeat", "maskPosition", "maskClip", "maskOrigin", "maskSize", "maskComposite"],
+  maskBorder: [
+    "maskBorderSource",
+    "maskBorderMode",
+    "maskBorderSlice",
+    "maskBorderWidth",
+    "maskBorderOutset",
+    "maskBorderRepeat"
+  ],
+  offset: ["offsetPosition", "offsetPath", "offsetDistance", "offsetRotate", "offsetAnchor"],
+  outline: ["outlineWidth", "outlineStyle", "outlineColor"],
+  overflow: ["overflowX", "overflowY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  pause: ["pauseBefore", "pauseAfter"],
+  placeContent: ["alignContent", "justifyContent"],
+  placeItems: ["alignItems", "justifyItems"],
+  placeSelf: ["alignSelf", "justifySelf"],
+  rest: ["restBefore", "restAfter"],
+  scrollMargin: ["scrollMarginTop", "scrollMarginRight", "scrollMarginBottom", "scrollMarginLeft"],
+  scrollPadding: ["scrollPaddingTop", "scrollPaddingRight", "scrollPaddingBottom", "scrollPaddingLeft"],
+  scrollPaddingBlock: ["scrollPaddingBlockStart", "scrollPaddingBlockEnd"],
+  scrollPaddingInline: ["scrollPaddingInlineStart", "scrollPaddingInlineEnd"],
+  scrollSnapMargin: ["scrollSnapMarginTop", "scrollSnapMarginRight", "scrollSnapMarginBottom", "scrollSnapMarginLeft"],
+  scrollSnapMarginBlock: ["scrollSnapMarginBlockStart", "scrollSnapMarginBlockEnd"],
+  scrollSnapMarginInline: ["scrollSnapMarginInlineStart", "scrollSnapMarginInlineEnd"],
+  scrollTimeline: ["scrollTimelineSource", "scrollTimelineOrientation"],
+  textDecoration: ["textDecorationLine", "textDecorationStyle", "textDecorationColor"],
+  textEmphasis: ["textEmphasisStyle", "textEmphasisColor"],
+  transition: ["transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay"]
+};
+var longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
+function getPropertyPriority(property) {
+  return longhands.includes(property) ? 2 : 1;
+}
+
 // src/slot.ts
 var getSlotRecipes = (recipe = {}) => {
   const init = (slot) => ({
@@ -642,23 +760,37 @@ function mapToJson(map) {
 
 // src/traverse.ts
 var isObjectOrArray = (obj) => typeof obj === "object" && obj !== null;
-var defaultOptions = { separator: ".", maxDepth: Infinity };
+var defaultOptions = {
+  separator: ".",
+  maxDepth: Infinity
+};
 function traverse(obj, callback2, options = defaultOptions) {
   const maxDepth = options.maxDepth ?? defaultOptions.maxDepth;
   const separator = options.separator ?? defaultOptions.separator;
-  const stack = [{ value: obj, path: "", depth: -1, parent: null, key: "" }];
+  const stack = [{ value: obj, path: "", paths: [], depth: -1, parent: null, key: "" }];
   while (stack.length > 0) {
     const currentItem = stack.pop();
     if (currentItem.parent !== null) {
       callback2(currentItem);
     }
+    if (options.stop?.(currentItem)) {
+      continue;
+    }
     if (isObjectOrArray(currentItem.value) && currentItem.depth < maxDepth) {
       const keys = Object.keys(currentItem.value);
       for (let i = keys.length - 1; i >= 0; i--) {
         const key = keys[i];
         const value = currentItem.value[key];
         const path = currentItem.path ? currentItem.path + separator + key : key;
-        stack.push({ value, path, depth: currentItem.depth + 1, parent: currentItem.value, key });
+        const paths = currentItem.paths.concat(key);
+        stack.push({
+          value,
+          path,
+          paths,
+          depth: currentItem.depth + 1,
+          parent: currentItem.value,
+          key
+        });
       }
     }
   }
@@ -694,6 +826,7 @@ export {
   getNegativePath,
   getOrCreateSet,
   getPatternStyles,
+  getPropertyPriority,
   getSlotCompoundVariant,
   getSlotRecipes,
   getUnit,

package/dist/{shared-z3agWt4M.d.mts → shared-4wnn7ulW.d.mts}

@@ -29,7 +29,7 @@ interface CreateCssContext {
         finalize: (paths: string[]) => string[];
     };
 }
-declare function createCss(context: CreateCssContext): (styleObject?: Record<string, any>) => string;
+declare function createCss(context: CreateCssContext): ({ base, ...styles }?: Record<string, any>) => string;
 interface StyleObject {
     [key: string]: any;
 }

package/dist/{shared-z3agWt4M.d.ts → shared-4wnn7ulW.d.ts}

@@ -29,7 +29,7 @@ interface CreateCssContext {
         finalize: (paths: string[]) => string[];
     };
 }
-declare function createCss(context: CreateCssContext): (styleObject?: Record<string, any>) => string;
+declare function createCss(context: CreateCssContext): ({ base, ...styles }?: Record<string, any>) => string;
 interface StyleObject {
     [key: string]: any;
 }

package/dist/shared.d.mts

@@ -1 +1 @@
-export { f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, c as isObject, z as mapObject, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, k as withoutSpace } from './shared-z3agWt4M.mjs';
+export { f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, c as isObject, z as mapObject, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, k as withoutSpace } from './shared-4wnn7ulW.mjs';

package/dist/shared.d.ts

@@ -1 +1 @@
-export { f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, c as isObject, z as mapObject, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, k as withoutSpace } from './shared-z3agWt4M.js';
+export { f as compact, d as createCss, e as createMergeCss, h as filterBaseConditions, q as getPatternStyles, s as getSlotCompoundVariant, r as getSlotRecipes, l as hypenateProperty, g as isBaseCondition, c as isObject, z as mapObject, n as memo, o as mergeProps, p as patternFns, u as splitProps, t as toHash, v as uniq, y as walkObject, k as withoutSpace } from './shared-4wnn7ulW.js';

package/dist/shared.js

@@ -201,7 +201,8 @@ function createCss(context) {
     }
     return result;
   };
-  return memo((styleObject = {}) => {
+  return memo(({ base, ...styles } = {}) => {
+    const styleObject = Object.assign(styles, base);
     const normalizedObject = normalizeStyleObject(styleObject, context);
     const classNames = /* @__PURE__ */ new Set();
     walkObject(normalizedObject, (value, paths) => {

package/dist/shared.mjs

@@ -157,7 +157,8 @@ function createCss(context) {
     }
     return result;
   };
-  return memo((styleObject = {}) => {
+  return memo(({ base, ...styles } = {}) => {
+    const styleObject = Object.assign(styles, base);
     const normalizedObject = normalizeStyleObject(styleObject, context);
     const classNames = /* @__PURE__ */ new Set();
     walkObject(normalizedObject, (value, paths) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/shared",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "Shared utilities for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",