@pandacss/studio 0.8.0 → 0.10.0

package/styled-system/css/conditions.mjs

@@ -1,126 +1,15 @@
 import { withoutSpace } from '../helpers.mjs'
 
-const conditions = new Set([
-  '_hover',
-  '_focus',
-  '_focusWithin',
-  '_focusVisible',
-  '_disabled',
-  '_active',
-  '_visited',
-  '_target',
-  '_readOnly',
-  '_readWrite',
-  '_empty',
-  '_checked',
-  '_enabled',
-  '_expanded',
-  '_highlighted',
-  '_before',
-  '_after',
-  '_firstLetter',
-  '_firstLine',
-  '_marker',
-  '_selection',
-  '_file',
-  '_backdrop',
-  '_first',
-  '_last',
-  '_only',
-  '_even',
-  '_odd',
-  '_firstOfType',
-  '_lastOfType',
-  '_onlyOfType',
-  '_peerFocus',
-  '_peerHover',
-  '_peerActive',
-  '_peerFocusWithin',
-  '_peerFocusVisible',
-  '_peerDisabled',
-  '_peerChecked',
-  '_peerInvalid',
-  '_peerExpanded',
-  '_peerPlaceholderShown',
-  '_groupFocus',
-  '_groupHover',
-  '_groupActive',
-  '_groupFocusWithin',
-  '_groupFocusVisible',
-  '_groupDisabled',
-  '_groupChecked',
-  '_groupExpanded',
-  '_groupInvalid',
-  '_indeterminate',
-  '_required',
-  '_valid',
-  '_invalid',
-  '_autofill',
-  '_inRange',
-  '_outOfRange',
-  '_placeholder',
-  '_placeholderShown',
-  '_pressed',
-  '_selected',
-  '_default',
-  '_optional',
-  '_open',
-  '_fullscreen',
-  '_loading',
-  '_currentPage',
-  '_currentStep',
-  '_motionReduce',
-  '_motionSafe',
-  '_print',
-  '_landscape',
-  '_portrait',
-  '_dark',
-  '_light',
-  '_osDark',
-  '_osLight',
-  '_highContrast',
-  '_lessContrast',
-  '_moreContrast',
-  '_ltr',
-  '_rtl',
-  '_scrollbar',
-  '_scrollbarThumb',
-  '_scrollbarTrack',
-  '_horizontal',
-  '_vertical',
-  'sm',
-  'smOnly',
-  'smDown',
-  'md',
-  'mdOnly',
-  'mdDown',
-  'lg',
-  'lgOnly',
-  'lgDown',
-  'xl',
-  'xlOnly',
-  'xlDown',
-  '2xl',
-  '2xlOnly',
-  'smToMd',
-  'smToLg',
-  'smToXl',
-  'smTo2xl',
-  'mdToLg',
-  'mdToXl',
-  'mdTo2xl',
-  'lgToXl',
-  'lgTo2xl',
-  'xlTo2xl',
-  'base',
-])
+const conditionsStr =
+  '_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base'
+const conditions = new Set(conditionsStr.split(','))
 
 export function isCondition(value) {
   return conditions.has(value) || /^@|&|&$/.test(value)
 }
 
 const underscoreRegex = /^_/
-const selectorRegex = /&|@/
+const conditionsSelectorRegex = /&|@/
 
 export function finalizeConditions(paths) {
   return paths.map((path) => {
@@ -128,7 +17,7 @@ export function finalizeConditions(paths) {
       return path.replace(underscoreRegex, '')
     }
 
-    if (selectorRegex.test(path)) {
+    if (conditionsSelectorRegex.test(path)) {
       return `[${withoutSpace(path.trim())}]`
     }
 

package/styled-system/css/css.mjs

@@ -1,394 +1,34 @@
 import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'
 import { sortConditions, finalizeConditions } from './conditions.mjs'
 
-const classNameMap = {
-  aspectRatio: 'aspect',
-  boxDecorationBreak: 'decoration',
-  zIndex: 'z',
-  boxSizing: 'box',
-  objectPosition: 'object',
-  objectFit: 'object',
-  overscrollBehavior: 'overscroll',
-  overscrollBehaviorX: 'overscroll-x',
-  overscrollBehaviorY: 'overscroll-y',
-  position: 'pos',
-  top: 'top',
-  left: 'left',
-  insetInline: 'inset-x',
-  insetBlock: 'inset-y',
-  inset: 'inset',
-  insetBlockEnd: 'inset-b',
-  insetBlockStart: 'inset-t',
-  insetInlineEnd: 'end',
-  insetInlineStart: 'start',
-  right: 'right',
-  bottom: 'bottom',
-  insetX: 'inset-x',
-  insetY: 'inset-y',
-  float: 'float',
-  visibility: 'vis',
-  display: 'd',
-  hideFrom: 'hide',
-  hideBelow: 'show',
-  flexBasis: 'basis',
-  flex: 'flex',
-  flexDirection: 'flex',
-  flexGrow: 'grow',
-  flexShrink: 'shrink',
-  gridTemplateColumns: 'grid-cols',
-  gridTemplateRows: 'grid-rows',
-  gridColumn: 'col-span',
-  gridRow: 'row-span',
-  gridColumnStart: 'col-start',
-  gridColumnEnd: 'col-end',
-  gridAutoFlow: 'grid-flow',
-  gridAutoColumns: 'auto-cols',
-  gridAutoRows: 'auto-rows',
-  gap: 'gap',
-  gridGap: 'gap',
-  gridRowGap: 'gap-x',
-  gridColumnGap: 'gap-y',
-  rowGap: 'gap-x',
-  columnGap: 'gap-y',
-  justifyContent: 'justify',
-  alignContent: 'content',
-  alignItems: 'items',
-  alignSelf: 'self',
-  padding: 'p',
-  paddingLeft: 'pl',
-  paddingRight: 'pr',
-  paddingTop: 'pt',
-  paddingBottom: 'pb',
-  paddingBlock: 'py',
-  paddingBlockEnd: 'pb',
-  paddingBlockStart: 'pt',
-  paddingInline: 'px',
-  paddingInlineEnd: 'pe',
-  paddingInlineStart: 'ps',
-  marginLeft: 'ml',
-  marginRight: 'mr',
-  marginTop: 'mt',
-  marginBottom: 'mb',
-  margin: 'm',
-  marginBlock: 'my',
-  marginBlockEnd: 'mb',
-  marginBlockStart: 'mt',
-  marginInline: 'mx',
-  marginInlineEnd: 'me',
-  marginInlineStart: 'ms',
-  outlineWidth: 'ring',
-  outlineColor: 'ring',
-  outline: 'ring',
-  outlineOffset: 'ring',
-  divideX: 'divide-x',
-  divideY: 'divide-y',
-  divideColor: 'divide',
-  divideStyle: 'divide',
-  width: 'w',
-  inlineSize: 'w',
-  minWidth: 'min-w',
-  minInlineSize: 'min-w',
-  maxWidth: 'max-w',
-  maxInlineSize: 'max-w',
-  height: 'h',
-  blockSize: 'h',
-  minHeight: 'min-h',
-  minBlockSize: 'min-h',
-  maxHeight: 'max-h',
-  maxBlockSize: 'max-b',
-  color: 'text',
-  fontFamily: 'font',
-  fontSize: 'fs',
-  fontWeight: 'font',
-  fontSmoothing: 'smoothing',
-  fontVariantNumeric: 'numeric',
-  letterSpacing: 'tracking',
-  lineHeight: 'leading',
-  textAlign: 'text',
-  textDecoration: 'text-decor',
-  textDecorationColor: 'text-decor',
-  textEmphasisColor: 'text-emphasis',
-  textDecorationStyle: 'decoration',
-  textDecorationThickness: 'decoration',
-  textUnderlineOffset: 'underline-offset',
-  textTransform: 'text',
-  textIndent: 'indent',
-  textShadow: 'text-shadow',
-  textOverflow: 'text',
-  verticalAlign: 'align',
-  wordBreak: 'break',
-  textWrap: 'text',
-  truncate: 'truncate',
-  lineClamp: 'clamp',
-  listStyleType: 'list',
-  listStylePosition: 'list',
-  listStyleImage: 'list-img',
-  backgroundPosition: 'bg',
-  backgroundPositionX: 'bg-x',
-  backgroundPositionY: 'bg-y',
-  backgroundAttachment: 'bg',
-  backgroundClip: 'bg-clip',
-  background: 'bg',
-  backgroundColor: 'bg',
-  backgroundOrigin: 'bg-origin',
-  backgroundImage: 'bg-img',
-  backgroundRepeat: 'bg-repeat',
-  backgroundBlendMode: 'bg-blend',
-  backgroundSize: 'bg',
-  backgroundGradient: 'bg-gradient',
-  textGradient: 'text-gradient',
-  gradientFrom: 'from',
-  gradientTo: 'to',
-  gradientVia: 'via',
-  borderRadius: 'rounded',
-  borderTopLeftRadius: 'rounded-tl',
-  borderTopRightRadius: 'rounded-tr',
-  borderBottomRightRadius: 'rounded-br',
-  borderBottomLeftRadius: 'rounded-bl',
-  borderTopRadius: 'rounded-t',
-  borderRightRadius: 'rounded-r',
-  borderBottomRadius: 'rounded-b',
-  borderLeftRadius: 'rounded-l',
-  borderStartStartRadius: 'rounded-ss',
-  borderStartEndRadius: 'rounded-se',
-  borderStartRadius: 'rounded-s',
-  borderEndStartRadius: 'rounded-es',
-  borderEndEndRadius: 'rounded-ee',
-  borderEndRadius: 'rounded-e',
-  border: 'border',
-  borderColor: 'border',
-  borderInline: 'border-x',
-  borderInlineWidth: 'border-x',
-  borderInlineColor: 'border-x',
-  borderBlock: 'border-y',
-  borderBlockWidth: 'border-y',
-  borderBlockColor: 'border-y',
-  borderLeft: 'border-l',
-  borderLeftColor: 'border-l',
-  borderInlineStart: 'border-s',
-  borderInlineStartColor: 'border-s',
-  borderRight: 'border-r',
-  borderRightColor: 'border-r',
-  borderInlineEnd: 'border-e',
-  borderInlineEndColor: 'border-e',
-  borderTop: 'border-t',
-  borderTopColor: 'border-t',
-  borderBottom: 'border-b',
-  borderBottomColor: 'border-b',
-  borderBlockEnd: 'border-be',
-  borderBlockEndColor: 'border-be',
-  borderBlockStart: 'border-bs',
-  borderBlockStartColor: 'border-bs',
-  boxShadow: 'shadow',
-  boxShadowColor: 'shadow',
-  mixBlendMode: 'mix-blend',
-  filter: 'filter',
-  brightness: 'brightness',
-  contrast: 'contrast',
-  grayscale: 'grayscale',
-  hueRotate: 'hue-rotate',
-  invert: 'invert',
-  saturate: 'saturate',
-  sepia: 'sepia',
-  dropShadow: 'drop-shadow',
-  blur: 'blur',
-  backdropFilter: 'backdrop',
-  backdropBlur: 'backdrop-blur',
-  backdropBrightness: 'backdrop-brightness',
-  backdropContrast: 'backdrop-contrast',
-  backdropGrayscale: 'backdrop-grayscale',
-  backdropHueRotate: 'backdrop-hue-rotate',
-  backdropInvert: 'backdrop-invert',
-  backdropOpacity: 'backdrop-opacity',
-  backdropSaturate: 'backdrop-saturate',
-  backdropSepia: 'backdrop-sepia',
-  borderCollapse: 'border',
-  borderSpacing: 'border-spacing',
-  borderSpacingX: 'border-spacing-x',
-  borderSpacingY: 'border-spacing-y',
-  tableLayout: 'table',
-  transitionTimingFunction: 'ease',
-  transitionDelay: 'delay',
-  transitionDuration: 'duration',
-  transitionProperty: 'transition-prop',
-  transition: 'transition',
-  animation: 'animation',
-  animationDelay: 'animation-delay',
-  transformOrigin: 'origin',
-  scale: 'scale',
-  scaleX: 'scale-x',
-  scaleY: 'scale-y',
-  translate: 'translate',
-  translateX: 'translate-x',
-  translateY: 'translate-y',
-  accentColor: 'accent',
-  caretColor: 'caret',
-  scrollBehavior: 'scroll',
-  scrollbar: 'scrollbar',
-  scrollMargin: 'scroll-m',
-  scrollMarginX: 'scroll-mx',
-  scrollMarginY: 'scroll-my',
-  scrollMarginLeft: 'scroll-ml',
-  scrollMarginRight: 'scroll-mr',
-  scrollMarginTop: 'scroll-mt',
-  scrollMarginBottom: 'scroll-mb',
-  scrollMarginBlock: 'scroll-my',
-  scrollMarginBlockEnd: 'scroll-mb',
-  scrollMarginBlockStart: 'scroll-mt',
-  scrollMarginInline: 'scroll-mx',
-  scrollMarginInlineEnd: 'scroll-me',
-  scrollMarginInlineStart: 'scroll-ms',
-  scrollPadding: 'scroll-p',
-  scrollPaddingBlock: 'scroll-pb',
-  scrollPaddingBlockStart: 'scroll-pt',
-  scrollPaddingBlockEnd: 'scroll-pb',
-  scrollPaddingInline: 'scroll-px',
-  scrollPaddingInlineEnd: 'scroll-pe',
-  scrollPaddingInlineStart: 'scroll-ps',
-  scrollPaddingX: 'scroll-px',
-  scrollPaddingY: 'scroll-py',
-  scrollPaddingLeft: 'scroll-pl',
-  scrollPaddingRight: 'scroll-pr',
-  scrollPaddingTop: 'scroll-pt',
-  scrollPaddingBottom: 'scroll-pb',
-  scrollSnapAlign: 'snap',
-  scrollSnapStop: 'snap',
-  scrollSnapType: 'snap',
-  scrollSnapStrictness: 'strictness',
-  scrollSnapMargin: 'snap-m',
-  scrollSnapMarginTop: 'snap-mt',
-  scrollSnapMarginBottom: 'snap-mb',
-  scrollSnapMarginLeft: 'snap-ml',
-  scrollSnapMarginRight: 'snap-mr',
-  touchAction: 'touch',
-  userSelect: 'select',
-  fill: 'fill',
-  stroke: 'stroke',
-  srOnly: 'sr',
-  debug: 'debug',
-  appearance: 'appearance',
-  backfaceVisibility: 'backface',
-  clipPath: 'clip-path',
-  hyphens: 'hyphens',
-  mask: 'mask',
-  maskImage: 'mask-image',
-  maskSize: 'mask-size',
-  textSizeAdjust: 'text-size-adjust',
-  textStyle: 'textStyle',
-}
-
-const shorthands = {
-  pos: 'position',
-  insetEnd: 'insetInlineEnd',
-  end: 'insetInlineEnd',
-  insetStart: 'insetInlineStart',
-  start: 'insetInlineStart',
-  flexDir: 'flexDirection',
-  p: 'padding',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  pt: 'paddingTop',
-  pb: 'paddingBottom',
-  py: 'paddingBlock',
-  paddingY: 'paddingBlock',
-  paddingX: 'paddingInline',
-  px: 'paddingInline',
-  pe: 'paddingInlineEnd',
-  paddingEnd: 'paddingInlineEnd',
-  ps: 'paddingInlineStart',
-  paddingStart: 'paddingInlineStart',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mt: 'marginTop',
-  mb: 'marginBottom',
-  m: 'margin',
-  my: 'marginBlock',
-  marginY: 'marginBlock',
-  mx: 'marginInline',
-  marginX: 'marginInline',
-  me: 'marginInlineEnd',
-  marginEnd: 'marginInlineEnd',
-  ms: 'marginInlineStart',
-  marginStart: 'marginInlineStart',
-  ringWidth: 'outlineWidth',
-  ringColor: 'outlineColor',
-  ring: 'outline',
-  ringOffset: 'outlineOffset',
-  w: 'width',
-  minW: 'minWidth',
-  maxW: 'maxWidth',
-  h: 'height',
-  minH: 'minHeight',
-  maxH: 'maxHeight',
-  bgPosition: 'backgroundPosition',
-  bgPositionX: 'backgroundPositionX',
-  bgPositionY: 'backgroundPositionY',
-  bgAttachment: 'backgroundAttachment',
-  bgClip: 'backgroundClip',
-  bg: 'background',
-  bgColor: 'backgroundColor',
-  bgOrigin: 'backgroundOrigin',
-  bgImage: 'backgroundImage',
-  bgRepeat: 'backgroundRepeat',
-  bgBlendMode: 'backgroundBlendMode',
-  bgSize: 'backgroundSize',
-  bgGradient: 'backgroundGradient',
-  rounded: 'borderRadius',
-  roundedTopLeft: 'borderTopLeftRadius',
-  roundedTopRight: 'borderTopRightRadius',
-  roundedBottomRight: 'borderBottomRightRadius',
-  roundedBottomLeft: 'borderBottomLeftRadius',
-  roundedTop: 'borderTopRadius',
-  roundedRight: 'borderRightRadius',
-  roundedBottom: 'borderBottomRadius',
-  roundedLeft: 'borderLeftRadius',
-  roundedStartStart: 'borderStartStartRadius',
-  roundedStartEnd: 'borderStartEndRadius',
-  roundedStart: 'borderStartRadius',
-  roundedEndStart: 'borderEndStartRadius',
-  roundedEndEnd: 'borderEndEndRadius',
-  roundedEnd: 'borderEndRadius',
-  borderX: 'borderInline',
-  borderXWidth: 'borderInlineWidth',
-  borderXColor: 'borderInlineColor',
-  borderY: 'borderBlock',
-  borderYWidth: 'borderBlockWidth',
-  borderYColor: 'borderBlockColor',
-  borderStart: 'borderInlineStart',
-  borderStartColor: 'borderInlineStartColor',
-  borderEnd: 'borderInlineEnd',
-  borderEndColor: 'borderInlineEndColor',
-  shadow: 'boxShadow',
-  shadowColor: 'boxShadowColor',
-  x: 'translateX',
-  y: 'translateY',
-}
-
-const breakpointKeys = ['base', 'sm', 'md', 'lg', 'xl', '2xl']
-
-const hasShorthand = true
+const utilities =
+  'aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/1,insetInlineStart:start/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/1,paddingInlineEnd:pe/paddingEnd,paddingInlineStart:ps/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/marginX,marginInlineEnd:me/marginEnd,marginInlineStart:ms/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,textStyle:textStyle'
+
+const classMap = {}
+const shorthands = {}
+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 resolveShorthand = (prop) => shorthands[prop] || prop
 
-function transform(prop, value) {
-  const key = resolveShorthand(prop)
-  const propKey = classNameMap[key] || hypenateProperty(key)
-  const className = `${propKey}_${withoutSpace(value)}`
-  return { className }
-}
-
 const context = {
-  hash: false,
   conditions: {
     shift: sortConditions,
     finalize: finalizeConditions,
-    breakpoints: { keys: breakpointKeys },
+    breakpoints: { keys: ['base', 'sm', 'md', 'lg', 'xl', '2xl'] },
   },
   utility: {
-    prefix: undefined,
-    transform,
-    hasShorthand,
-    resolveShorthand,
+    transform: (prop, value) => {
+      const key = resolveShorthand(prop)
+      const propKey = classMap[key] || hypenateProperty(key)
+      return { className: `${propKey}_${withoutSpace(value)}` }
+    },
+    hasShorthand: true,
+    resolveShorthand: resolveShorthand,
   },
 }
 

package/styled-system/css/index.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
 export * from './css'
 export * from './cx'
-export * from './cva'
+export * from './cva'
+export * from './sva'

package/styled-system/css/index.mjs

@@ -1,3 +1,4 @@
 export * from './css.mjs'
 export * from './cx.mjs'
 export * from './cva.mjs'
+export * from './sva.mjs'

package/styled-system/css/sva.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe'
+
+export declare const sva: SlotRecipeCreatorFn

package/styled-system/css/sva.mjs

@@ -0,0 +1,20 @@
+import { getSlotRecipes } from '../helpers.mjs'
+import { cva } from './cva.mjs'
+
+export function sva(config) {
+  const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+
+  function svaFn(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+    return Object.fromEntries(result)
+  }
+
+  const [, firstCva] = slots[0]
+
+  return Object.assign(svaFn, {
+    __cva__: false,
+    variantMap: firstCva.variantMap,
+    variantKeys: firstCva.variantKeys,
+    splitVariantProps: firstCva.splitVariantProps,
+  })
+}