refactor: vue, svelte, and lightningcss to plugin

Author: segunadebayo

.changeset/plugin-architecture.md

@@ -0,0 +1,13 @@
+---
+'@pandacss/plugin-vue': minor
+'@pandacss/plugin-svelte': minor
+'@pandacss/plugin-lightningcss': minor
+'@pandacss/core': minor
+'@pandacss/parser': minor
+'@pandacss/node': minor
+'@pandacss/config': minor
+'@pandacss/types': minor
+---
+
+- Extract Vue, Svelte, and LightningCSS support into standalone plugins.
+- Fix double CSS optimization in PostCSS plugin.

packages/config/src/index.ts

@@ -6,5 +6,6 @@ export { getResolvedConfig } from './get-resolved-config'
 export { loadConfig } from './load-config'
 export { resolveConfig } from './resolve-config'
 export { mergeConfigs } from './merge-config'
+export { mergeHooks } from './merge-hooks'
 export { convertTsPathsToRegexes } from './ts-config-paths'
 export type { BundleConfigResult } from './types'

packages/config/src/merge-config.ts

@@ -1,6 +1,7 @@
 import { PANDA_CONFIG_NAME, assign, mergeWith, mergeAndConcat, walkObject } from '@pandacss/shared'
 import type { Config } from '@pandacss/types'
 import { mergeHooks } from './merge-hooks'
+export { mergeHooks }
 import { isValidToken } from './validation/utils'
 
 type Extendable<T> = T & { extend?: T }

packages/config/src/merge-hooks.ts

@@ -126,6 +126,20 @@ const reducers = {
 
     return preset
   }),
+  'css:optimize': createReducer<'css:optimize'>((fns) => (_args) => {
+    const args = Object.assign({}, _args)
+    const original = _args.css
+    let css = args.css
+
+    for (const hookFn of fns) {
+      const result = hookFn(Object.assign(args, { css, original }))
+      if (result !== undefined) {
+        css = result
+      }
+    }
+
+    return css
+  }),
 }
 
 const syncHooks: Array<keyof PandaHooks> = [
@@ -134,6 +148,7 @@ const syncHooks: Array<keyof PandaHooks> = [
   'parser:preprocess',
   'parser:after',
   'cssgen:done',
+  'css:optimize',
 ]
 
 const callAllAsync =

packages/core/package.json

@@ -45,8 +45,6 @@
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",
     "browserslist": "4.28.1",
-    "hookable": "5.5.3",
-    "lightningcss": "1.31.1",
     "lodash.merge": "4.6.2",
     "outdent": "0.8.0",
     "postcss": "8.5.6",

packages/core/src/context.ts

@@ -344,7 +344,6 @@ export class Context {
       hooks: this.hooks,
       isValidProperty: this.isValidProperty,
       browserslist: this.config.browserslist,
-      lightningcss: this.config.lightningcss,
       polyfill: this.config.polyfill,
       cssVarRoot: this.config.cssVarRoot!,
       helpers: patternFns,

packages/core/src/optimize.ts

@@ -1,20 +1,28 @@
+import type { PandaHooks } from '@pandacss/types'
 import postcss, { Root } from 'postcss'
 import nested from 'postcss-nested'
 import { optimizePostCss } from './plugins/optimize-postcss'
 import prettify from './plugins/prettify'
 
 interface OptimizeOptions {
   minify?: boolean
-  lightningcss?: boolean
   browserslist?: string[]
+  hooks?: Partial<PandaHooks>
 }
 
 export function optimizeCss(code: string | Root, options: OptimizeOptions = {}) {
-  const { lightningcss } = options
+  const { hooks } = options
+  const css = typeof code === 'string' ? code : code.toString()
 
-  if (lightningcss) {
-    const light = require('./plugins/optimize-lightningcss') as typeof import('./plugins/optimize-lightningcss')
-    return light.default(code, options)
+  if (hooks?.['css:optimize']) {
+    const result = hooks['css:optimize']({
+      css,
+      minify: options.minify,
+      browserslist: options.browserslist,
+    })
+    if (result !== undefined) {
+      return result
+    }
   }
 
   return optimizePostCss(code, options)

packages/core/src/stylesheet.ts

@@ -129,8 +129,8 @@ export class Stylesheet {
         .join('\n'),
       {
         minify: false,
-        lightningcss: this.context.lightningcss,
         browserslist: this.context.browserslist,
+        hooks: this.context.hooks,
       },
     )
   }
@@ -152,8 +152,8 @@ export class Stylesheet {
 
       return optimizeCss(css, {
         minify,
-        lightningcss: this.context.lightningcss,
         browserslist: this.context.browserslist,
+        hooks: this.context.hooks,
       })
     } catch (error) {
       if (error instanceof CssSyntaxError) {

packages/core/src/types.ts

@@ -42,7 +42,6 @@ export interface StylesheetContext
   layers: Layers
   helpers: PatternHelpers
   hash?: boolean
-  lightningcss?: boolean
   browserslist?: string[]
   polyfill?: boolean
   cssVarRoot: string

packages/node/package.json

@@ -41,6 +41,9 @@
     "@pandacss/config": "workspace:*",
     "@pandacss/core": "workspace:*",
     "@pandacss/generator": "workspace:*",
+    "@pandacss/plugin-lightningcss": "workspace:*",
+    "@pandacss/plugin-svelte": "workspace:*",
+    "@pandacss/plugin-vue": "workspace:*",
     "@pandacss/reporter": "workspace:*",
     "@pandacss/logger": "workspace:*",
     "@pandacss/parser": "workspace:*",