feat(plugin): supports custom plugin(#33)

Author: akinoccc

packages/core/index.ts

@@ -3,6 +3,7 @@ import styled from './src/styled'
 export * from './src/providers/theme'
 export * from './src/helper'
 export * from './src/hooks'
+export * from './src/plugins'
 
 export * from './src/styled'
 

packages/core/src/plugins/index.ts

@@ -0,0 +1 @@
+export * from './plugin'

packages/core/src/plugins/plugin.ts

@@ -0,0 +1,50 @@
+import { Element } from 'stylis'
+
+type beforeBuildCallback = (element: Element, index: number, children: Element[]) => string | void
+type afterBuildCallback = (compiledCss: string) => string | void
+
+interface PluginHooks {
+  beforeBuild?: beforeBuildCallback | beforeBuildCallback[]
+  afterBuild?: afterBuildCallback | afterBuildCallback[]
+}
+
+class Plugin {
+  private beforeBuildHooks: beforeBuildCallback[] = []
+  private afterBuildHooks: afterBuildCallback[] = []
+
+  register(plugin: PluginHooks) {
+    if (plugin.beforeBuild) {
+      if (Array.isArray(plugin.beforeBuild)) {
+        this.beforeBuildHooks.push(...plugin.beforeBuild)
+      } else {
+        this.beforeBuildHooks.push(plugin.beforeBuild)
+      }
+    }
+    if (plugin.afterBuild) {
+      if (Array.isArray(plugin.afterBuild)) {
+        this.afterBuildHooks.push(...plugin.afterBuild)
+      } else {
+        this.afterBuildHooks.push(plugin.afterBuild)
+      }
+    }
+  }
+
+  runBeforeBuild(element: Element, index: number, children: Element[]) {
+    for (const hook of this.beforeBuildHooks) {
+      hook(element, index, children)
+    }
+  }
+
+  runAfterBuild(compiledCss: string) {
+    for (const hook of this.afterBuildHooks) {
+      const result = hook(compiledCss)
+      if (result) {
+        compiledCss = result
+      }
+    }
+    return compiledCss
+  }
+}
+
+export type { Element }
+export const plugin = new Plugin()

packages/core/src/utils/styleManagement.ts

@@ -1,5 +1,6 @@
 import { applyExpressions, ExpressionType } from '@/src/utils/index'
-import { compile, middleware, prefixer, serialize, stringify } from 'stylis'
+import { compile, Element, middleware, prefixer, serialize, stringify } from 'stylis'
+import { plugin } from '../plugins'
 
 const MAX_SIZE = 65536
 
@@ -54,7 +55,17 @@ export function injectStyle<T>(className: string, cssWithExpression: ExpressionT
   if (className !== '') {
     cssString = `.${className}{${appliedCss}}`
   }
-  const compiledCss = serialize(compile(cssString), middleware([prefixer, stringify]))
+  let compiledCss = serialize(
+    compile(cssString),
+    middleware([
+      (element: Element, index: number, children: Element[]) => {
+        return plugin.runBeforeBuild(element, index, children)
+      },
+      prefixer,
+      stringify,
+    ]),
+  )
+  compiledCss = plugin.runAfterBuild(compiledCss)
   insert(className, compiledCss)
 
   return tailwindClasses