Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(BREAKING): rm config.eject & automatic import of built-in pr… #2694

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions .changeset/tame-cooks-jam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
'@pandacss/config': minor
'@pandacss/types': minor
'@pandacss/node': minor
'@pandacss/dev': minor
---

- BREAKING: The built-in presets `@pandacss/preset-base` and `@pandacss/preset-panda` are no longer automatically
included, if you are not using `presets` or `eject` in your config you can add them manually as shown below:

```diff
// panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
+ presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
})
```

This allows you to control more explicitely which presets are included in your project.

- BREAKING: The `config.eject` option has been removed. Simply remove it from your config and the result will be the
same.

```diff
// panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
- eject: true,
})
```
1 change: 1 addition & 0 deletions packages/cli/package.json
Original file line number Diff line number Diff line change
@@ -68,6 +68,7 @@
"cac": "6.7.14"
},
"devDependencies": {
"@pandacss/preset-base": "workspace:*",
"@types/update-notifier": "6.0.8",
"kleur": "4.1.5",
"update-notifier": "7.0.0"
5 changes: 1 addition & 4 deletions packages/config/src/bundled-preset.ts
Original file line number Diff line number Diff line change
@@ -9,11 +9,8 @@ const bundledPresets = {

const bundledPresetsNames = Object.keys(bundledPresets)

export const isBundledPreset = (preset: string): preset is keyof typeof bundledPresets =>
bundledPresetsNames.includes(preset)
const isBundledPreset = (preset: string): preset is keyof typeof bundledPresets => bundledPresetsNames.includes(preset)

export const getBundledPreset = (preset: unknown) => {
return typeof preset === 'string' && isBundledPreset(preset) ? bundledPresets[preset] : undefined
}

export { presetBase, presetPanda }
12 changes: 1 addition & 11 deletions packages/config/src/resolve-config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { logger } from '@pandacss/logger'
import { omit, parseJson, stringifyJson, traverse } from '@pandacss/shared'
import type { LoadConfigResult, UserConfig } from '@pandacss/types'
import { getBundledPreset, presetBase, presetPanda } from './bundled-preset'
import { getBundledPreset } from './bundled-preset'
import { getResolvedConfig } from './get-resolved-config'
import type { BundleConfigResult } from './types'
import { validateConfig } from './validate-config'
@@ -13,24 +13,14 @@ const hookUtils = {

/**
* Resolve the final config (including presets)
* @pandacss/preset-base: ALWAYS included if NOT using eject: true
* @pandacss/preset-panda: only included by default if no presets
*/
export async function resolveConfig(result: BundleConfigResult, cwd: string): Promise<LoadConfigResult> {
const presets = new Set<any>()

if (!result.config.eject) {
presets.add(presetBase)
}

if (result.config.presets) {
//
result.config.presets.forEach((preset: any) => {
presets.add(getBundledPreset(preset) ?? preset)
})
//
} else if (!result.config.eject) {
presets.add(presetPanda)
}

result.config.presets = Array.from(presets)
4 changes: 3 additions & 1 deletion packages/fixture/src/create-context.ts
Original file line number Diff line number Diff line change
@@ -39,7 +39,9 @@ export const createGeneratorContext = (userConfig?: Config) => {
return new Generator({ ...fixtureDefaults, config: resolvedConfig })
}

export const createContext = (userConfig?: Config & Pick<Partial<LoadConfigResult>, 'tsconfig'>) => {
export const createContext = (
userConfig?: Config & Pick<Partial<LoadConfigResult>, 'tsconfig'> & { eject?: boolean },
) => {
let resolvedConfig = (
userConfig ? mergeConfigs([userConfig, userConfig.eject ? {} : fixtureDefaults.config]) : fixtureDefaults.config
) as UserConfig
4 changes: 4 additions & 0 deletions packages/node/src/setup-config.ts
Original file line number Diff line number Diff line change
@@ -42,8 +42,12 @@ export async function setupConfig(cwd: string, opts: SetupOptions = {}) {
} else {
const content = outdent`
import { defineConfig } from "@pandacss/dev"
import presetBase from "@pandacss/preset-base"
import presetPanda from "@pandacss/preset-panda"

export default defineConfig({
// The set of reusable and shareable configuration presets.
presets: [presetBase, presetPanda],
// Whether to use css reset
preflight: true,
${outExtension ? `\n // The extension for the emitted JavaScript files\noutExtension: '${outExtension}',` : ''}
2 changes: 1 addition & 1 deletion packages/studio/styled-system/css/conditions.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { withoutSpace } from '../helpers.mjs';

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,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
const conditionsStr = "base"
const conditions = new Set(conditionsStr.split(','))

export function isCondition(value){
25 changes: 6 additions & 19 deletions packages/studio/styled-system/css/css.mjs
Original file line number Diff line number Diff line change
@@ -1,40 +1,27 @@
import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
import { sortConditions, finalizeConditions } from './conditions.mjs';

const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,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/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,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:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/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-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,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,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,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-color/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,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle"
const utilities = ""

const classNameByProp = new Map()
const shorthands = new Map()
utilities.split(',').forEach((utility) => {
const [prop, meta] = utility.split(':')
const [className, ...shorthandList] = meta.split('/')
const [prop, className] = utility.split(':')
classNameByProp.set(prop, className)
if (shorthandList.length) {
shorthandList.forEach((shorthand) => {
shorthands.set(shorthand === '1' ? className : shorthand, prop)
})
}
})

const resolveShorthand = (prop) => shorthands.get(prop) || prop

const context = {

conditions: {
shift: sortConditions,
finalize: finalizeConditions,
breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] }
breakpoints: { keys: ["base"] }
},
utility: {

transform: (prop, value) => {
const key = resolveShorthand(prop)
const propKey = classNameByProp.get(key) || hypenateProperty(key)
return { className: `${propKey}_${withoutSpace(value)}` }
},
hasShorthand: true,
transform: (key, value) => ({ className: `${classNameByProp.get(key) || hypenateProperty(key)}_${withoutSpace(value)}` }),

toHash: (path, hashFn) => hashFn(path.join(":")),
resolveShorthand: resolveShorthand,
resolveShorthand: prop => prop,
}
}

21 changes: 1 addition & 20 deletions packages/studio/styled-system/jsx/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,5 @@
/* eslint-disable */
export * from './factory';
export * from './is-valid-prop';
export * from './box';
export * from './flex';
export * from './stack';
export * from './vstack';
export * from './hstack';
export * from './spacer';
export * from './square';
export * from './circle';
export * from './center';
export * from './link-overlay';
export * from './aspect-ratio';
export * from './grid';
export * from './grid-item';
export * from './wrap';
export * from './container';
export * from './divider';
export * from './float';
export * from './bleed';
export * from './visually-hidden';
export * from './cq';

export type { HTMLPandaProps, PandaComponent } from '../types/jsx';
20 changes: 0 additions & 20 deletions packages/studio/styled-system/jsx/index.mjs
Original file line number Diff line number Diff line change
@@ -1,22 +1,2 @@
export * from './factory.mjs';
export * from './is-valid-prop.mjs';
export * from './box.mjs';
export * from './flex.mjs';
export * from './stack.mjs';
export * from './vstack.mjs';
export * from './hstack.mjs';
export * from './spacer.mjs';
export * from './square.mjs';
export * from './circle.mjs';
export * from './center.mjs';
export * from './link-overlay.mjs';
export * from './aspect-ratio.mjs';
export * from './grid.mjs';
export * from './grid-item.mjs';
export * from './wrap.mjs';
export * from './container.mjs';
export * from './divider.mjs';
export * from './float.mjs';
export * from './bleed.mjs';
export * from './visually-hidden.mjs';
export * from './cq.mjs';
2 changes: 1 addition & 1 deletion packages/studio/styled-system/jsx/is-valid-prop.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { splitProps } from '../helpers.mjs';
import { memo } from '../helpers.mjs';
// src/index.ts
var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_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,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"
var userGeneratedStr = "css,colorPalette"
var userGenerated = userGeneratedStr.split(",");
var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect";
var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
1,792 changes: 4 additions & 1,788 deletions packages/studio/styled-system/tokens/index.mjs

Large diffs are not rendered by default.

55 changes: 5 additions & 50 deletions packages/studio/styled-system/tokens/tokens.d.ts

Large diffs are not rendered by default.

252 changes: 0 additions & 252 deletions packages/studio/styled-system/types/conditions.d.ts
Original file line number Diff line number Diff line change
@@ -2,258 +2,6 @@
import type { AnySelector, Selectors } from './selectors';

export interface Conditions {
/** `&:is(:hover, [data-hover])` */
"_hover": string
/** `&:is(:focus, [data-focus])` */
"_focus": string
/** `&:focus-within` */
"_focusWithin": string
/** `&:is(:focus-visible, [data-focus-visible])` */
"_focusVisible": string
/** `&:is(:disabled, [disabled], [data-disabled])` */
"_disabled": string
/** `&:is(:active, [data-active])` */
"_active": string
/** `&:visited` */
"_visited": string
/** `&:target` */
"_target": string
/** `&:is(:read-only, [data-read-only])` */
"_readOnly": string
/** `&:read-write` */
"_readWrite": string
/** `&:is(:empty, [data-empty])` */
"_empty": string
/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */
"_checked": string
/** `&:enabled` */
"_enabled": string
/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
"_expanded": string
/** `&[data-highlighted]` */
"_highlighted": string
/** `&::before` */
"_before": string
/** `&::after` */
"_after": string
/** `&::first-letter` */
"_firstLetter": string
/** `&::first-line` */
"_firstLine": string
/** `&::marker` */
"_marker": string
/** `&::selection` */
"_selection": string
/** `&::file-selector-button` */
"_file": string
/** `&::backdrop` */
"_backdrop": string
/** `&:first-child` */
"_first": string
/** `&:last-child` */
"_last": string
/** `&:only-child` */
"_only": string
/** `&:nth-child(even)` */
"_even": string
/** `&:nth-child(odd)` */
"_odd": string
/** `&:first-of-type` */
"_firstOfType": string
/** `&:last-of-type` */
"_lastOfType": string
/** `&:only-of-type` */
"_onlyOfType": string
/** `.peer:is(:focus, [data-focus]) ~ &` */
"_peerFocus": string
/** `.peer:is(:hover, [data-hover]) ~ &` */
"_peerHover": string
/** `.peer:is(:active, [data-active]) ~ &` */
"_peerActive": string
/** `.peer:focus-within ~ &` */
"_peerFocusWithin": string
/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
"_peerFocusVisible": string
/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
"_peerDisabled": string
/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
"_peerChecked": string
/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
"_peerInvalid": string
/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
"_peerExpanded": string
/** `.peer:placeholder-shown ~ &` */
"_peerPlaceholderShown": string
/** `.group:is(:focus, [data-focus]) &` */
"_groupFocus": string
/** `.group:is(:hover, [data-hover]) &` */
"_groupHover": string
/** `.group:is(:active, [data-active]) &` */
"_groupActive": string
/** `.group:focus-within &` */
"_groupFocusWithin": string
/** `.group:is(:focus-visible, [data-focus-visible]) &` */
"_groupFocusVisible": string
/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
"_groupDisabled": string
/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
"_groupChecked": string
/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
"_groupExpanded": string
/** `.group:invalid &` */
"_groupInvalid": string
/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
"_indeterminate": string
/** `&:is(:required, [data-required], [aria-required=true])` */
"_required": string
/** `&:is(:valid, [data-valid])` */
"_valid": string
/** `&:is(:invalid, [data-invalid])` */
"_invalid": string
/** `&:autofill` */
"_autofill": string
/** `&:in-range` */
"_inRange": string
/** `&:out-of-range` */
"_outOfRange": string
/** `&::placeholder, &[data-placeholder]` */
"_placeholder": string
/** `&:is(:placeholder-shown, [data-placeholder-shown])` */
"_placeholderShown": string
/** `&:is([aria-pressed=true], [data-pressed])` */
"_pressed": string
/** `&:is([aria-selected=true], [data-selected])` */
"_selected": string
/** `&:default` */
"_default": string
/** `&:optional` */
"_optional": string
/** `&:is([open], [data-open], [data-state="open"])` */
"_open": string
/** `&:is([closed], [data-closed], [data-state="closed"])` */
"_closed": string
/** `&:fullscreen` */
"_fullscreen": string
/** `&:is([data-loading], [aria-busy=true])` */
"_loading": string
/** `&[aria-current=page]` */
"_currentPage": string
/** `&[aria-current=step]` */
"_currentStep": string
/** `@media (prefers-reduced-motion: reduce)` */
"_motionReduce": string
/** `@media (prefers-reduced-motion: no-preference)` */
"_motionSafe": string
/** `@media print` */
"_print": string
/** `@media (orientation: landscape)` */
"_landscape": string
/** `@media (orientation: portrait)` */
"_portrait": string
/** `.dark &` */
"_dark": string
/** `.light &` */
"_light": string
/** `@media (prefers-color-scheme: dark)` */
"_osDark": string
/** `@media (prefers-color-scheme: light)` */
"_osLight": string
/** `@media (forced-colors: active)` */
"_highContrast": string
/** `@media (prefers-contrast: less)` */
"_lessContrast": string
/** `@media (prefers-contrast: more)` */
"_moreContrast": string
/** `[dir=ltr] &` */
"_ltr": string
/** `[dir=rtl] &` */
"_rtl": string
/** `&::-webkit-scrollbar` */
"_scrollbar": string
/** `&::-webkit-scrollbar-thumb` */
"_scrollbarThumb": string
/** `&::-webkit-scrollbar-track` */
"_scrollbarTrack": string
/** `&[data-orientation=horizontal]` */
"_horizontal": string
/** `&[data-orientation=vertical]` */
"_vertical": string
/** `@starting-style` */
"_starting": string
/** `@media screen and (min-width: 40rem)` */
"sm": string
/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
"smOnly": string
/** `@media screen and (max-width: 39.9975rem)` */
"smDown": string
/** `@media screen and (min-width: 48rem)` */
"md": string
/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
"mdOnly": string
/** `@media screen and (max-width: 47.9975rem)` */
"mdDown": string
/** `@media screen and (min-width: 64rem)` */
"lg": string
/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
"lgOnly": string
/** `@media screen and (max-width: 63.9975rem)` */
"lgDown": string
/** `@media screen and (min-width: 80rem)` */
"xl": string
/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
"xlOnly": string
/** `@media screen and (max-width: 79.9975rem)` */
"xlDown": string
/** `@media screen and (min-width: 96rem)` */
"2xl": string
/** `@media screen and (min-width: 96rem)` */
"2xlOnly": string
/** `@media screen and (max-width: 95.9975rem)` */
"2xlDown": string
/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
"smToMd": string
/** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */
"smToLg": string
/** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */
"smToXl": string
/** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */
"smTo2xl": string
/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
"mdToLg": string
/** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */
"mdToXl": string
/** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */
"mdTo2xl": string
/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
"lgToXl": string
/** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */
"lgTo2xl": string
/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
"xlTo2xl": string
/** `@container (min-width: 20rem)` */
"@/xs": string
/** `@container (min-width: 24rem)` */
"@/sm": string
/** `@container (min-width: 28rem)` */
"@/md": string
/** `@container (min-width: 32rem)` */
"@/lg": string
/** `@container (min-width: 36rem)` */
"@/xl": string
/** `@container (min-width: 42rem)` */
"@/2xl": string
/** `@container (min-width: 48rem)` */
"@/3xl": string
/** `@container (min-width: 56rem)` */
"@/4xl": string
/** `@container (min-width: 64rem)` */
"@/5xl": string
/** `@container (min-width: 72rem)` */
"@/6xl": string
/** `@container (min-width: 80rem)` */
"@/7xl": string
/** `@container (min-width: 90rem)` */
"@/8xl": string
/** The base (=no conditions) styles to apply */
"base": string
}
197 changes: 1 addition & 196 deletions packages/studio/styled-system/types/prop-type.d.ts
Original file line number Diff line number Diff line change
@@ -4,202 +4,7 @@ import type { CssProperties } from './system-types';
import type { Tokens } from '../tokens/index';

export interface UtilityValues {
aspectRatio: Tokens["aspectRatios"];
top: Tokens["spacing"];
left: Tokens["spacing"];
insetInline: Tokens["spacing"];
insetBlock: Tokens["spacing"];
inset: "auto" | Tokens["spacing"];
insetBlockEnd: Tokens["spacing"];
insetBlockStart: Tokens["spacing"];
insetInlineEnd: Tokens["spacing"];
insetInlineStart: Tokens["spacing"];
right: Tokens["spacing"];
bottom: Tokens["spacing"];
float: "start" | "end" | CssProperties["float"];
hideFrom: Tokens["breakpoints"];
hideBelow: Tokens["breakpoints"];
flexBasis: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
flex: "1" | "auto" | "initial" | "none";
gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
gridAutoColumns: "min" | "max" | "fr";
gridAutoRows: "min" | "max" | "fr";
gap: Tokens["spacing"];
gridGap: Tokens["spacing"];
gridRowGap: Tokens["spacing"];
gridColumnGap: Tokens["spacing"];
rowGap: Tokens["spacing"];
columnGap: Tokens["spacing"];
padding: Tokens["spacing"];
paddingLeft: Tokens["spacing"];
paddingRight: Tokens["spacing"];
paddingTop: Tokens["spacing"];
paddingBottom: Tokens["spacing"];
paddingBlock: Tokens["spacing"];
paddingBlockEnd: Tokens["spacing"];
paddingBlockStart: Tokens["spacing"];
paddingInline: Tokens["spacing"];
paddingInlineEnd: Tokens["spacing"];
paddingInlineStart: Tokens["spacing"];
marginLeft: "auto" | Tokens["spacing"];
marginRight: "auto" | Tokens["spacing"];
marginTop: "auto" | Tokens["spacing"];
marginBottom: "auto" | Tokens["spacing"];
margin: "auto" | Tokens["spacing"];
marginBlock: "auto" | Tokens["spacing"];
marginBlockEnd: "auto" | Tokens["spacing"];
marginBlockStart: "auto" | Tokens["spacing"];
marginInline: "auto" | Tokens["spacing"];
marginInlineEnd: "auto" | Tokens["spacing"];
marginInlineStart: "auto" | Tokens["spacing"];
spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
outlineColor: Tokens["colors"];
outline: Tokens["borders"];
outlineOffset: Tokens["spacing"];
divideColor: Tokens["colors"];
divideStyle: CssProperties["borderStyle"];
width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
inlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
minWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
minInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
maxWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
maxInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
height: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
blockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
minHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
color: Tokens["colors"];
fontFamily: Tokens["fonts"];
fontSize: Tokens["fontSizes"];
fontWeight: Tokens["fontWeights"];
fontSmoothing: "antialiased" | "subpixel-antialiased";
letterSpacing: Tokens["letterSpacings"];
lineHeight: Tokens["lineHeights"];
textDecorationColor: Tokens["colors"];
textEmphasisColor: Tokens["colors"];
textIndent: Tokens["spacing"];
textShadow: Tokens["shadows"];
textShadowColor: Tokens["colors"];
textWrap: "wrap" | "balance" | "nowrap";
truncate: boolean;
listStyleImage: Tokens["assets"];
background: Tokens["colors"];
backgroundColor: Tokens["colors"];
backgroundImage: Tokens["assets"];
backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
gradientFrom: Tokens["colors"];
gradientTo: Tokens["colors"];
gradientVia: Tokens["colors"];
borderRadius: Tokens["radii"];
borderTopLeftRadius: Tokens["radii"];
borderTopRightRadius: Tokens["radii"];
borderBottomRightRadius: Tokens["radii"];
borderBottomLeftRadius: Tokens["radii"];
borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"];
borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"];
borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"];
borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"];
borderStartStartRadius: Tokens["radii"];
borderStartEndRadius: Tokens["radii"];
borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"];
borderEndStartRadius: Tokens["radii"];
borderEndEndRadius: Tokens["radii"];
borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
border: Tokens["borders"];
borderColor: Tokens["colors"];
borderInline: Tokens["borders"];
borderInlineColor: Tokens["colors"];
borderBlock: Tokens["borders"];
borderBlockColor: Tokens["colors"];
borderLeft: Tokens["borders"];
borderLeftColor: Tokens["colors"];
borderInlineStart: Tokens["borders"];
borderInlineStartColor: Tokens["colors"];
borderRight: Tokens["borders"];
borderRightColor: Tokens["colors"];
borderInlineEnd: Tokens["borders"];
borderInlineEndColor: Tokens["colors"];
borderTop: Tokens["borders"];
borderTopColor: Tokens["colors"];
borderBottom: Tokens["borders"];
borderBottomColor: Tokens["colors"];
borderBlockEnd: Tokens["borders"];
borderBlockEndColor: Tokens["colors"];
borderBlockStart: Tokens["borders"];
borderBlockStartColor: Tokens["colors"];
boxShadow: Tokens["shadows"];
boxShadowColor: Tokens["colors"];
filter: "auto";
blur: Tokens["blurs"];
backdropFilter: "auto";
backdropBlur: Tokens["blurs"];
borderSpacing: Tokens["spacing"] | "auto";
borderSpacingX: Tokens["spacing"];
borderSpacingY: Tokens["spacing"];
transitionTimingFunction: Tokens["easings"];
transitionDelay: Tokens["durations"];
transitionDuration: Tokens["durations"];
transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
animation: Tokens["animations"];
animationName: "spin" | "ping" | "pulse" | "bounce";
animationTimingFunction: Tokens["easings"];
animationDuration: Tokens["durations"];
animationDelay: Tokens["durations"];
rotate: "auto" | "auto-3d" | CssProperties["rotate"];
rotateX: CssProperties["rotate"];
rotateY: CssProperties["rotate"];
rotateZ: CssProperties["rotate"];
scale: "auto" | CssProperties["scale"];
translate: "auto" | "auto-3d" | CssProperties["translate"];
translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
translateZ: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
accentColor: Tokens["colors"];
caretColor: Tokens["colors"];
scrollbar: "visible" | "hidden";
scrollMargin: Tokens["spacing"];
scrollMarginLeft: Tokens["spacing"];
scrollMarginRight: Tokens["spacing"];
scrollMarginTop: Tokens["spacing"];
scrollMarginBottom: Tokens["spacing"];
scrollMarginBlock: Tokens["spacing"];
scrollMarginBlockEnd: Tokens["spacing"];
scrollMarginBlockStart: Tokens["spacing"];
scrollMarginInline: Tokens["spacing"];
scrollMarginInlineEnd: Tokens["spacing"];
scrollMarginInlineStart: Tokens["spacing"];
scrollPadding: Tokens["spacing"];
scrollPaddingBlock: Tokens["spacing"];
scrollPaddingBlockStart: Tokens["spacing"];
scrollPaddingBlockEnd: Tokens["spacing"];
scrollPaddingInline: Tokens["spacing"];
scrollPaddingInlineEnd: Tokens["spacing"];
scrollPaddingInlineStart: Tokens["spacing"];
scrollPaddingLeft: Tokens["spacing"];
scrollPaddingRight: Tokens["spacing"];
scrollPaddingTop: Tokens["spacing"];
scrollPaddingBottom: Tokens["spacing"];
scrollSnapType: "none" | "x" | "y" | "both";
scrollSnapStrictness: "mandatory" | "proximity";
scrollSnapMargin: Tokens["spacing"];
scrollSnapMarginTop: Tokens["spacing"];
scrollSnapMarginBottom: Tokens["spacing"];
scrollSnapMarginLeft: Tokens["spacing"];
scrollSnapMarginRight: Tokens["spacing"];
fill: Tokens["colors"];
stroke: Tokens["colors"];
srOnly: boolean;
debug: boolean;
containerName: CssProperties["containerName"];
colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "neutral" | "text" | "bg" | "card" | "border" | "accent";
textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
colorPalette: "neutral" | "text" | "bg" | "card" | "border" | "accent";
}


1,573 changes: 154 additions & 1,419 deletions packages/studio/styled-system/types/style-props.d.ts

Large diffs are not rendered by default.

5 changes: 0 additions & 5 deletions packages/types/src/config.ts
Original file line number Diff line number Diff line change
@@ -442,11 +442,6 @@ export interface Config
PresetOptions,
HooksOptions,
PluginsOptions {
/**
* Whether to opt-out of the defaults config presets: [`@pandacss/preset-base`, `@pandacss/preset-panda`]
* @default 'false'
*/
eject?: boolean
/**
* The validation strictness to use when validating the config.
* - When set to 'none', no validation will be performed.
9 changes: 0 additions & 9 deletions playground/src/lib/config/resolve-config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import type { Config, Preset } from '@pandacss/types'
import { mergeConfigs } from '@pandacss/config/merge'
import presetBase from '@pandacss/preset-base'
import presetPanda from '@pandacss/preset-panda'
import { validateConfig } from '../../../../packages/config/src/validate-config'
import { logger } from '@pandacss/logger'

@@ -13,17 +11,10 @@ export function resolveConfig(config?: Config) {

const presets = new Set<any>()

if (!config.eject) {
presets.add(presetBase)
}

if (config.presets) {
//
config.presets.forEach((preset: any) => {
presets.add(preset)
})
} else if (!config.eject) {
presets.add(presetPanda)
}

presets.add(playgroundPreset)
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
4 changes: 0 additions & 4 deletions website/pages/docs/concepts/extend.md
Original file line number Diff line number Diff line change
@@ -130,10 +130,6 @@ const { stack, ...pandaBasePresetPatterns } = pandaBasePreset.patterns

export default defineConfig({
presets: ['@pandacss/preset-panda'], // 👈 we still want the tokens, breakpoints and textStyles from this preset

// ⚠️ we need to eject to prevent the `@pandacss/preset-base` from being resolved
// https://panda-css.com/docs/customization/presets#which-panda-presets-will-be-included-
eject: true,
patterns: {
extend: {
...pandaBasePresetPatterns
20 changes: 0 additions & 20 deletions website/pages/docs/customization/presets.md
Original file line number Diff line number Diff line change
@@ -96,26 +96,6 @@ export default defineConfig({
})
```

## Which panda presets will be included ?

![Visual helper](/stately-presets-merging.png)

- `@pandacss/preset-base`:
ALWAYS included if NOT using `eject: true`

- `@pandacss/preset-panda`:
only included by default if you haven't specified the `presets` config option, otherwise you'll have to include that preset by yourself like so:

```ts
import pandaPreset from '@pandacss/preset-panda'
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
// ...
presets: [pandaPreset, myCustomPreset]
})
```

## Minimal setup

If you want to use Panda with the bare minimum, without any of the defaults, you can read more about it [here](/docs/guides/minimal-setup)
2 changes: 0 additions & 2 deletions website/pages/docs/guides/minimal-setup.md
Original file line number Diff line number Diff line change
@@ -83,5 +83,3 @@ export default defineConfig({
presets: ['@pandacss/preset-panda']
})
```

> Note: You don't need to install `@pandacss/preset-base` or `@pandacss/preset-panda`. Panda will automatically resolve them for you.
16 changes: 1 addition & 15 deletions website/pages/docs/references/config.md
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ export default defineConfig({

**Type**: `string[]`

**Default**: `['@pandacss/preset-base', '@pandacss/preset-panda']`
**Default**: `[]`

The set of reusable and shareable configuration presets.

@@ -34,20 +34,6 @@ as a set of overrides and extensions.
}
```

### eject

**Type**: `boolean`

**Default**: `false`

Whether to opt-out of the defaults config presets: [`@pandacss/preset-base`, `@pandacss/preset-panda`]

```json
{
"eject": true
}
```

### preflight

**Type**: `boolean` | `{ scope: string; }`

Unchanged files with check annotations Beta

test('assets svg', () => {
const css = tokenCss({
eject: true,

Check failure on line 729 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
theme: {
tokens: {
assets: {
test('color-mix', () => {
const css = tokenCss({
eject: true,

Check failure on line 755 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
theme: {
tokens: {
colors: {
test('color-mix in semanticTokens conditions', () => {
const css = tokenCss({
eject: true,

Check failure on line 792 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
conditions: {
light: '.light &',
dark: '.dark &',
test('themes - no staticCss', () => {
const css = tokenCss({
eject: true,

Check failure on line 843 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
conditions: {
osDark: '@media (prefers-color-scheme: dark)',
},
test('themes - staticCss with name', () => {
const css = tokenCss({
eject: true,

Check failure on line 905 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
conditions: {
osDark: '@media (prefers-color-scheme: dark)',
},
test('themes - staticCss with *', () => {
const css = tokenCss({
eject: true,

Check failure on line 985 in packages/generator/__tests__/generate-token.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
conditions: {
osDark: '@media (prefers-color-scheme: dark)',
},
}
`
const result = parseAndExtract(code, {
eject: true,

Check failure on line 3553 in packages/parser/__tests__/output.test.ts

GitHub Actions / TypeScript

Object literal may only specify known properties, and 'eject' does not exist in type 'Config'.
theme: {
breakpoints: { sm: '480px' },
slotRecipes: {
test('native CSS prop and value', () => {
const className = css({ display: 'flex' })
expect(className).toMatchInlineSnapshot('"d_flex"')

Check failure on line 8 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > native CSS prop and value

Error: Snapshot `css > native CSS prop and value 1` mismatched - Expected + Received - "d_flex" + "display_flex" ❯ sandbox/codegen/__tests__/css.test.ts:8:23
})
test('token value', () => {
const className = css({ color: 'blue.300' })
expect(className).toMatchInlineSnapshot('"text_blue.300"')

Check failure on line 14 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > token value

Error: Snapshot `css > token value 1` mismatched - Expected + Received - "text_blue.300" + "color_blue.300" ❯ sandbox/codegen/__tests__/css.test.ts:14:23
})
test('utility prop', () => {
const className = css({ srOnly: true })
expect(className).toMatchInlineSnapshot('"sr_true"')

Check failure on line 20 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > utility prop

Error: Snapshot `css > utility prop 1` mismatched - Expected + Received - "sr_true" + "sr-only_true" ❯ sandbox/codegen/__tests__/css.test.ts:20:23
})
test('shorthand prop', () => {
test('object condition prop', () => {
const className = css({ bg: { _hover: 'yellow.100' } })
expect(className).toMatchInlineSnapshot('"hover:bg_yellow.100"')

Check failure on line 32 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > object condition prop

Error: Snapshot `css > object condition prop 1` mismatched - Expected + Received - "hover:bg_yellow.100" + "_hover:bg_yellow.100" ❯ sandbox/codegen/__tests__/css.test.ts:32:23
})
test('condition prop', () => {
const className = css({ _hover: { bg: 'yellow.200' } })
expect(className).toMatchInlineSnapshot('"hover:bg_yellow.200"')

Check failure on line 38 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > condition prop

Error: Snapshot `css > condition prop 1` mismatched - Expected + Received - "hover:bg_yellow.200" + "bg:_hover_yellow.200" ❯ sandbox/codegen/__tests__/css.test.ts:38:23
})
test('nested condition prop', () => {
const className = css({ _hover: { _dark: { bg: 'pink' } } })
expect(className).toMatchInlineSnapshot('"hover:dark:bg_pink"')

Check failure on line 44 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > nested condition prop

Error: Snapshot `css > nested condition prop 1` mismatched - Expected + Received - "hover:dark:bg_pink" + "_dark:bg:_hover_pink" ❯ sandbox/codegen/__tests__/css.test.ts:44:23
})
test('arbitrary value', () => {
const className = css({ color: '#fff' })
expect(className).toMatchInlineSnapshot('"text_#fff"')

Check failure on line 50 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > arbitrary value

Error: Snapshot `css > arbitrary value 1` mismatched - Expected + Received - "text_#fff" + "color_#fff" ❯ sandbox/codegen/__tests__/css.test.ts:50:23
})
test('arbitrary selector', () => {
const className = css({ ['&:data-panda']: { display: 'flex' } })
expect(className).toMatchInlineSnapshot('"[&:data-panda]:d_flex"')

Check failure on line 56 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > arbitrary selector

Error: Snapshot `css > arbitrary selector 1` mismatched - Expected + Received - "[&:data-panda]:d_flex" + "[&:data-panda]:display_flex" ❯ sandbox/codegen/__tests__/css.test.ts:56:23
})
test('responsive condition', () => {
test('nested condition prop with array syntax', () => {
const className = css({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } })
expect(className).toMatchInlineSnapshot('"hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200"')

Check failure on line 86 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > nested condition prop with array syntax

Error: Snapshot `css > nested condition prop with array syntax 1` mismatched - Expected + Received - "hover:dark:bg_pink.100 hover:dark:sm:bg_pink.200" + "_dark:bg:_hover_pink.100 _dark:bg:sm:_hover_pink.200" ❯ sandbox/codegen/__tests__/css.test.ts:86:23
})
test('same prop', () => {
const className = css({ bgColor: 'red.100', backgroundColor: 'red.200' })
expect(className).toMatchInlineSnapshot('"bg_red.200"')

Check failure on line 92 in sandbox/codegen/__tests__/css.test.ts

GitHub Actions / Unit Tests

sandbox/codegen/__tests__/css.test.ts > css > same prop

Error: Snapshot `css > same prop 1` mismatched - Expected + Received - "bg_red.200" + "bg-color_red.100 background-color_red.200" ❯ sandbox/codegen/__tests__/css.test.ts:92:23
const className2 = css({ backgroundColor: 'red.300', bgColor: 'red.400' })