refactor: rm legacy config.optimize (always enable it) (#2695)

* refactor: rm legacy `config.optimize` (always enable it) * docs: changeset --------- Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
chakra-ui · Jun 25, 2024 · 17a1932 · 17a1932
1 parent ff676d2
commit 17a1932
Show file tree

Hide file tree

Showing 20 changed files with 31 additions and 47 deletions.
diff --git a/.changeset/tender-emus-divide.md b/.changeset/tender-emus-divide.md
@@ -0,0 +1,12 @@
+---
+"@pandacss/dev": patch
+"@pandacss/core": patch
+"@pandacss/fixture": patch
+"@pandacss/generator": patch
+"@pandacss/node": patch
+"@pandacss/types": patch
+"playground": patch
+"website": patch
+---
+
+[BREAKING] Removed the legacy `config.optimize` option because it was redundant. Now, we always optimize the generated CSS where possible.
diff --git a/packages/cli/src/cli-main.ts b/packages/cli/src/cli-main.ts
@@ -211,7 +211,6 @@ export async function main() {
       }
 
       const overrideConfig = {
-        optimize: true,
         ...rest,
         ...(glob ? { include: [glob] } : undefined),
       }

diff --git a/packages/core/__tests__/global-css.test.ts b/packages/core/__tests__/global-css.test.ts
@@ -6,7 +6,7 @@ function globalCss(values: Dict) {
   const ctx = createGeneratorContext()
   const sheet = ctx.createSheet()
   sheet.processGlobalCss(values)
-  return sheet.toCss({ optimize: true })
+  return sheet.toCss()
 }
 
 describe('Global css', () => {

diff --git a/packages/core/__tests__/global-vars.test.ts b/packages/core/__tests__/global-vars.test.ts
@@ -8,7 +8,7 @@ function globalVars(vars?: GlobalVarsDefinition) {
   })
   const sheet = ctx.createSheet()
   sheet.processGlobalCss({})
-  return sheet.toCss({ optimize: true })
+  return sheet.toCss()
 }
 
 describe('Global vars', () => {

diff --git a/packages/core/__tests__/sort-style-rules.test.ts b/packages/core/__tests__/sort-style-rules.test.ts
@@ -72,7 +72,7 @@ describe('sort style rules', () => {
     const sheet = ctx.createSheet()
     sheet.processDecoder(ctx.decoder)
 
-    expect(sheet.toCss({ optimize: true })).toMatchInlineSnapshot(`
+    expect(sheet.toCss()).toMatchInlineSnapshot(`
       "@layer utilities {
         .fs_1 {
           font-size: 1px;
@@ -125,7 +125,7 @@ describe('sort style rules', () => {
     const sheet2 = ctx.createSheet()
     sheet2.processDecoder(ctx.decoder)
 
-    expect(sheet2.toCss({ optimize: true })).toMatchInlineSnapshot(`
+    expect(sheet2.toCss()).toMatchInlineSnapshot(`
       "@layer utilities {
         .fs_1 {
           font-size: 1px;
@@ -189,7 +189,7 @@ describe('sort style rules', () => {
     const sheet = ctx.createSheet()
     sheet.processDecoder(ctx.decoder)
 
-    expect(sheet.toCss({ optimize: true })).toMatchInlineSnapshot(`
+    expect(sheet.toCss()).toMatchInlineSnapshot(`
       "@layer recipes {
         @layer _base {
           .btn {
@@ -237,7 +237,7 @@ describe('sort style rules', () => {
     const sheet2 = ctx.createSheet()
     sheet2.processDecoder(ctx.decoder)
 
-    expect(sheet2.toCss({ optimize: true })).toMatchInlineSnapshot(`
+    expect(sheet2.toCss()).toMatchInlineSnapshot(`
       "@layer recipes {
         @layer _base {
           .btn {

diff --git a/packages/core/__tests__/static-css.test.ts b/packages/core/__tests__/static-css.test.ts
@@ -36,7 +36,7 @@ describe('static-css', () => {
   const ctx = new Context(conf)
   const getStaticCss = (options: StaticCssOptions) => {
     const engine = ctx.staticCss.clone().process(options)
-    return { results: engine.results, css: engine.sheet.toCss({ optimize: true }) }
+    return { results: engine.results, css: engine.sheet.toCss() }
   }
 
   test('works', () => {
@@ -2093,7 +2093,7 @@ describe('static-css', () => {
     })
     const getStaticCss = (options: StaticCssOptions) => {
       const engine = ctx.staticCss.clone().process(options)
-      return { results: engine.results, css: engine.sheet.toCss({ optimize: true }) }
+      return { results: engine.results, css: engine.sheet.toCss() }
     }
 
     expect(

diff --git a/packages/core/src/rule-processor.ts b/packages/core/src/rule-processor.ts
@@ -48,7 +48,7 @@ export class RuleProcessor {
     const { decoder, sheet } = this.getParamsOrThrow()
 
     sheet.processDecoder(decoder)
-    return sheet.toCss({ optimize: true, ...options })
+    return sheet.toCss(options)
   }
 
   css(styles: SystemStyleObject): AtomicRule {

diff --git a/packages/core/src/stylesheet.ts b/packages/core/src/stylesheet.ts
@@ -107,7 +107,7 @@ export class Stylesheet {
     )
   }
 
-  toCss = ({ optimize = false, minify }: CssOptions = {}) => {
+  toCss = ({ minify }: CssOptions = {}) => {
     try {
       const breakpoints = this.context.conditions.breakpoints
       const root = this.context.layers.insert()
@@ -121,7 +121,6 @@ export class Stylesheet {
 
       const result = postcss(plugins).process(root)
       const css = result.toString()
-      if (!optimize) return css
 
       return optimizeCss(css, {
         minify,

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -85,7 +85,7 @@ export interface RecipeNode {
   props: string[]
 }
 
-export interface CssOptions extends Pick<UserConfig, 'optimize' | 'minify'> {}
+export interface CssOptions extends Pick<UserConfig, 'minify'> {}
 
 export interface ProcessOptions {
   styles: Dict

diff --git a/packages/fixture/src/create-context.ts b/packages/fixture/src/create-context.ts
@@ -12,7 +12,6 @@ const hookUtils = {
 }
 
 const defaults: UserConfig = {
-  optimize: true,
   cwd: '',
   outdir: 'styled-system',
   include: [],

diff --git a/packages/generator/__tests__/generate-keyframes.test.ts b/packages/generator/__tests__/generate-keyframes.test.ts
@@ -6,7 +6,7 @@ const keyframes = (obj?: Dict) => {
   const ctx = createGeneratorContext(obj ? { theme: { keyframes: obj } } : undefined)
   const sheet = ctx.createSheet()
   ctx.appendCssOfType('keyframes', sheet)
-  return sheet.toCss({ optimize: true })
+  return sheet.toCss()
 }
 
 describe('keyframes', () => {

diff --git a/packages/generator/__tests__/generate-reset.test.ts b/packages/generator/__tests__/generate-reset.test.ts
@@ -6,7 +6,7 @@ const resetCss = (config?: Config) => {
   const ctx = createContext(config)
   const sheet = ctx.createSheet()
   ctx.appendCssOfType('preflight', sheet)
-  return sheet.toCss({ optimize: true })
+  return sheet.toCss()
 }
 
 describe('generate reset', () => {

diff --git a/packages/generator/__tests__/generate-token.test.ts b/packages/generator/__tests__/generate-token.test.ts
@@ -6,7 +6,7 @@ const tokenCss = (config?: Config) => {
   const ctx = createContext(config)
   const sheet = ctx.createSheet()
   ctx.appendCssOfType('tokens', sheet)
-  return sheet.toCss({ optimize: true })
+  return sheet.toCss()
 }
 
 describe('generator', () => {

diff --git a/packages/generator/src/artifacts/css/parser-css.ts b/packages/generator/src/artifacts/css/parser-css.ts
@@ -6,12 +6,12 @@ export const generateParserCss = (ctx: Context, decoder: StyleDecoder) => {
   if (!decoder) return ''
 
   const sheet = ctx.createSheet()
-  const { minify, optimize } = ctx.config
+  const { minify } = ctx.config
 
   sheet.processDecoder(decoder)
 
   try {
-    const css = sheet.toCss({ minify, optimize })
+    const css = sheet.toCss({ minify })
     return css
   } catch (err) {
     logger.error('serializer:css', 'Failed to serialize CSS: ' + err)

diff --git a/packages/generator/src/artifacts/css/static-css.ts b/packages/generator/src/artifacts/css/static-css.ts
@@ -6,8 +6,8 @@ export const generateStaticCss = (ctx: Context, sheet?: Stylesheet) => {
   const engine = staticCss.process(ctx.config.staticCss ?? {}, sheet)
 
   if (!sheet) {
-    const { optimize = true, minify } = config
-    let css = engine.sheet.toCss({ optimize, minify })
+    const { minify } = config
+    let css = engine.sheet.toCss({ minify })
 
     if (ctx.hooks['cssgen:done']) {
       css = ctx.hooks['cssgen:done']({ artifact: 'static', content: css }) ?? css

diff --git a/packages/generator/src/generator.ts b/packages/generator/src/generator.ts
@@ -53,10 +53,7 @@ export class Generator extends Context {
 
   getCss = (stylesheet?: Stylesheet) => {
     const sheet = stylesheet ?? this.createSheet()
-    let css = sheet.toCss({
-      optimize: true,
-      minify: this.config.minify,
-    })
+    let css = sheet.toCss({ minify: this.config.minify })
 
     if (this.hooks['cssgen:done']) {
       css = this.hooks['cssgen:done']({ artifact: 'styles.css', content: css }) ?? css

diff --git a/packages/node/src/debug.ts b/packages/node/src/debug.ts
@@ -14,7 +14,6 @@ export async function debug(ctx: PandaContext, options: DebugOptions) {
 
   // easier to debug
   ctx.config.minify = false
-  ctx.config.optimize = true
 
   const { fs, path } = ctx.runtime
   const outdir = options.outdir

diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -311,11 +311,6 @@ interface CssgenOptions {
    * @default '_'
    */
   separator?: '_' | '=' | '-'
-  /**
-   * Whether to optimize the generated css.
-   * @default true
-   */
-  optimize?: boolean
   /**
    * Whether to minify the generated css.
    * @default false

diff --git a/playground/src/hooks/usePandaContext.ts b/playground/src/hooks/usePandaContext.ts
@@ -9,7 +9,6 @@ const defaultConfig = resolveConfig({
   include: [],
   outdir: 'styled-system',
   preflight: true,
-  optimize: true,
   staticCss: { recipes: { playgroundError: ['*'] } as StaticCssOptions['recipes'] },
   jsxFramework: undefined,
 })!
@@ -36,7 +35,6 @@ export const usePandaContext = (userConfig: Config | null): Generator & { error?
       include: [],
       outdir: 'styled-system',
       preflight: true,
-      optimize: true,
       ...userConfig,
       staticCss: merge(userConfig?.staticCss, {
         recipes: { playgroundError: ['*'] } as StaticCssOptions['recipes'],

diff --git a/website/pages/docs/references/config.md b/website/pages/docs/references/config.md
@@ -224,20 +224,6 @@ would result in:
 }
 ```
 
-### optimize
-
-**Type**: `boolean`
-
-**Default**: `true`
-
-Whether to optimize the generated css. This can be set to `false` to boost build times during development.
-
-```json
-{
-  "optimize": true
-}
-```
-
 ### minify
 
 **Type**: `boolean`