feat(utils): [style-management] auto clear style when the component unmounted

Author: akinoccc

core/helper/create-global-style.ts renamed to core/helper/createGlobalStyle.ts

@@ -1,7 +1,7 @@
 import type { ExpressionType } from '@/utils'
 import { defineComponent, DefineSetupFnComponent, h } from 'vue'
 import { generateComponentName, insertExpressions } from '@/utils'
-import { injectStyle } from '@/utils/injectStyle'
+import { injectStyle } from '@/utils'
 
 export const createGlobalStyle = (styles: TemplateStringsArray, ...expressions: ExpressionType[]): DefineSetupFnComponent<any> => {
   return defineComponent(

core/helper/cssClass.ts

@@ -1,5 +1,5 @@
 import { ExpressionType, generateClassName, insertExpressions } from '@/utils'
-import { injectStyle } from '@/utils/injectStyle'
+import { injectStyle } from '@/utils'
 
 export function cssClass(cssStrings: TemplateStringsArray, ...interpolations: (ExpressionType<any> | ExpressionType<any>[])[]): string {
   const className = generateClassName()

core/helper/index.ts

@@ -1,6 +1,6 @@
 export * from './withAttrs'
 export * from './is'
-export * from './create-global-style'
+export * from './createGlobalStyle'
 export * from './keyframes'
 export * from './css'
 export * from './cssClass'

core/helper/keyframes.ts

@@ -1,5 +1,4 @@
-import { injectStyle } from '@/utils/injectStyle'
-import { generateUniqueName } from '@/utils'
+import { generateUniqueName, injectStyle } from '@/utils'
 
 export function keyframes(kfString: TemplateStringsArray): string {
   const keyframeName = `kf-${generateUniqueName()}`

core/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './generateName'
 export * from './insertExpressions'
 export * from './applyExpressions'
+export * from './styleManagement'

core/utils/injectStyle.ts renamed to core/utils/styleManagement.ts

@@ -39,6 +39,17 @@ function insert(className: string, cssString: string) {
   insertedRuleMap[className] = cssTextNode
 }
 
+export function removeStyle(className: string): void {
+  for (const tag of tags) {
+    for (const node of tag.childNodes) {
+      if (node.nodeValue?.includes(className)) {
+        node.remove()
+        break
+      }
+    }
+  }
+}
+
 export function injectStyle<T>(className: string, cssWithExpression: ExpressionType<T>[], context: Record<string, any>): void {
   const appliedCss = applyExpressions(cssWithExpression, context).join('')
   insert(className, appliedCss)

tsconfig.json

@@ -18,7 +18,8 @@
     "isolatedModules": true,
     "lib": [
       "dom",
-      "esnext"
+      "esnext",
+      "dom.iterable"
     ],
     "paths": {
       "@/*": [