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

@@ -55,13 +55,18 @@
     "*.d.ts",
     "postcss.js"
   ],
+  "bundleDependencies": [
+    "@pandacss/preset-base",
+    "@pandacss/preset-panda"
+  ],
   "dependencies": {
     "@clack/prompts": "0.7.0",
     "@pandacss/config": "workspace:*",
     "@pandacss/logger": "workspace:*",
     "@pandacss/node": "workspace:*",
-    "@pandacss/postcss": "workspace:*",
+    "@pandacss/preset-base": "workspace:*",
     "@pandacss/preset-panda": "workspace:*",
+    "@pandacss/postcss": "workspace:*",
     "@pandacss/shared": "workspace:*",
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",

packages/config/__tests__/bundle-config.test.ts

@@ -24,7 +24,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -62,7 +63,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -103,7 +105,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
             {
               "name": "ts-import-preset",
               "theme": {
@@ -192,7 +195,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -233,7 +237,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -274,7 +279,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -315,7 +321,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {
@@ -356,7 +363,8 @@ describe('bundle config', () => {
           "name": "__panda.config__",
           "preflight": true,
           "presets": [
-            "@pandacss/dev/presets",
+            "@pandacss/preset-base",
+            "@pandacss/preset-panda",
           ],
           "theme": {
             "extend": {

packages/config/__tests__/samples/cjs/panda.config.cjs

@@ -3,7 +3,7 @@ const { tokens } = require('../common/tokens')
 
 module.exports = defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/cts/panda.config.cts

@@ -3,7 +3,7 @@ import { tokens } from '../common/tokens'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/js/panda.config.js

@@ -3,7 +3,7 @@ import { tokens } from '../common/tokens'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/mts/panda.config.mts

@@ -3,7 +3,7 @@ import { tokens } from '../common/tokens'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/nested-files/panda.config.ts

@@ -3,7 +3,7 @@ import { themeTokens } from './src'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/ts-import-map-one-source/panda.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   preflight: false,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./ts-import-map.js'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/ts-import-map/panda.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   preflight: false,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./ts-import-map.js'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/ts/panda.config.ts

@@ -3,7 +3,7 @@ import { tokens } from '../common/tokens'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/with-preset/panda.config.ts

@@ -3,7 +3,7 @@ import { tsImportPreset } from './src/ts-import-preset'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets', tsImportPreset, require('./src/required-preset')],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda', tsImportPreset, require('./src/required-preset')],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

packages/config/__tests__/samples/with-tsconfig-paths/panda.config.ts

@@ -3,7 +3,7 @@ import { themeTokens } from '@/theme/tokens'
 
 export default defineConfig({
   preflight: true,
-  presets: ['@pandacss/dev/presets'],
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   include: ['./src/**/*.{ts,tsx,jsx}'],
   exclude: [],
   hash: false,

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 { PANDA_CONFIG_NAME, 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/core/__tests__/breakpoints.test.ts

@@ -1,9 +1,9 @@
-import { fixturePreset } from '@pandacss/fixture'
+import { builtInPresets } from '@pandacss/fixture'
 import postcss from 'postcss'
 import { describe, expect, test } from 'vitest'
 import { Breakpoints } from '../src/breakpoints'
 
-const breakpoints = fixturePreset.theme.breakpoints!
+const breakpoints = builtInPresets.panda.theme.breakpoints!
 const parse = (value: string) => {
   const root = postcss.parse(value)
   const bp = new Breakpoints(breakpoints)

packages/core/__tests__/classname.test.ts

@@ -28,13 +28,13 @@ describe('generate classnames', () => {
       css({
         top: { sm: { _rtl: '20px', _hover: '50px' }, lg: '120px' },
       }),
-    ).toMatchInlineSnapshot('"sm:rtl:top_20px sm:hover:top_50px lg:top_120px"')
+    ).toMatchInlineSnapshot(`"sm:rtl:top_20px sm:hover:top_50px lg:top_120px"`)
 
     expect(
       css({
         left: { base: '20px', md: '40px' },
       }),
-    ).toMatchInlineSnapshot('"left_20px md:left_40px"')
+    ).toMatchInlineSnapshot(`"left_20px md:left_40px"`)
   })
 
   test('should expand shorthand before processing', () => {
@@ -59,7 +59,7 @@ describe('generate classnames', () => {
       css({
         _hover: { width: '40px', w: '90px' },
       }),
-    ).toMatchInlineSnapshot('"hover:w_90px"')
+    ).toMatchInlineSnapshot(`"hover:w_90px"`)
   })
 
   test('should respect important', () => {

packages/core/__tests__/color-mix.test.ts

@@ -117,10 +117,10 @@ describe('color-mix', () => {
     expect(css({ gradientFrom: 'red/33' })).toMatchInlineSnapshot(`
       {
         "className": [
-          "from_red\\/33",
+          "grad-from_red\\/33",
         ],
         "css": "@layer utilities {
-        .from_red\\/33 {
+        .grad-from_red\\/33 {
           --mix---gradient-from: color-mix(in srgb, red 33%, transparent);
           --gradient-from: var(--mix---gradient-from, red);
       }

packages/core/__tests__/conditions.test.ts

@@ -1,11 +1,14 @@
-import { fixturePreset } from '@pandacss/fixture'
+import { builtInPresets } from '@pandacss/fixture'
 import { describe, expect, test } from 'vitest'
 import { Conditions } from '../src/conditions'
 import { compareAtRuleOrMixed as _compareAtRuleOrMixed } from '../src/sort-style-rules'
 
 describe('Conditions', () => {
   test('condition transformation', () => {
-    const css = new Conditions({ conditions: fixturePreset.conditions!, breakpoints: fixturePreset.theme.breakpoints })
+    const css = new Conditions({
+      conditions: builtInPresets.base.conditions!,
+      breakpoints: builtInPresets.panda.theme.breakpoints,
+    })
     expect(css.normalize('@media (min-width: 768px)')).toMatchInlineSnapshot(`
       {
         "name": "media",
@@ -76,7 +79,10 @@ describe('Conditions', () => {
   })
 
   test('conditions sorting', () => {
-    const css = new Conditions({ conditions: fixturePreset.conditions!, breakpoints: fixturePreset.theme.breakpoints })
+    const css = new Conditions({
+      conditions: builtInPresets.base.conditions!,
+      breakpoints: builtInPresets.panda.theme.breakpoints,
+    })
     const conditions = ['sm', 'md', 'lg', '_hover', '_focus', '_focus-visible', '_focus-within', '_active']
     expect(css.sort(conditions).map((c) => c.raw)).toMatchInlineSnapshot(`
       [

packages/core/__tests__/static-css.test.ts

@@ -1,4 +1,4 @@
-import { fixtureDefaults } from '@pandacss/fixture'
+import { fixtureDefaults, fixtureMergedConfig } from '@pandacss/fixture'
 import { type StaticCssOptions } from '@pandacss/types'
 import { describe, expect, test } from 'vitest'
 import { Context } from '../src/context'
@@ -11,7 +11,8 @@ describe('static-css', () => {
     ...defaults,
     config: {
       ...defaults.config,
-      theme: JSON.parse(JSON.stringify(defaults.config.theme)),
+      ...fixtureMergedConfig,
+      theme: JSON.parse(JSON.stringify(fixtureMergedConfig.theme)),
     },
   } as typeof fixtureDefaults
 

packages/core/__tests__/utility.test.ts

@@ -1,9 +1,9 @@
-import { fixturePreset } from '@pandacss/fixture'
+import { fixtureMergedConfig } from '@pandacss/fixture'
 import { TokenDictionary } from '@pandacss/token-dictionary'
 import { describe, expect, test } from 'vitest'
 import { Utility } from '../src/utility'
 
-const { tokens, semanticTokens } = fixturePreset.theme
+const { tokens, semanticTokens } = fixtureMergedConfig.theme!
 
 describe('Utility', () => {
   test('should resolve hideFrom and hideBelow', () => {

packages/core/package.json

@@ -43,7 +43,7 @@
     "@pandacss/shared": "workspace:*",
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",
-    "browserslist": "4.23.3",
+    "browserslist": "4.23.0",
     "hookable": "5.5.3",
     "lightningcss": "1.25.1",
     "lodash.merge": "4.6.2",