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

.changeset/tame-cooks-jam.md

@@ -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,
+})
+```

packages/cli/package.json

@@ -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"

packages/config/src/bundled-preset.ts

@@ -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 }

packages/config/src/resolve-config.ts

@@ -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)

packages/fixture/src/create-context.ts

@@ -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

packages/node/src/setup-config.ts

@@ -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}',` : ''}

packages/studio/styled-system/css/conditions.mjs

@@ -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){

packages/studio/styled-system/css/css.mjs

@@ -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,
   }
 }
 

packages/studio/styled-system/jsx/index.d.ts

@@ -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';

packages/studio/styled-system/jsx/index.mjs

@@ -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';