Merge pull request #14 from v-vibe/feat/embed-style

feat: support embed css, auto clear style and remove `useStyleClassName` hook

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/hooks/index.ts

@@ -1 +1 @@
-export * from './useStyledClassName'
+// export * from './useStyledClassName'

core/hooks/useStyledClassName.ts

@@ -1,5 +1,5 @@
 export * from './providers'
 export * from './helper'
-export * from './hooks'
+// export * from './hooks'
 
 export * from './styled'

core/index.ts

@@ -1,9 +1,19 @@
-import { defineComponent, DefineSetupFnComponent, h, inject, onMounted, PropType, PublicProps, reactive, SlotsType, watch } from 'vue'
+import {
+  defineComponent,
+  DefineSetupFnComponent,
+  h,
+  inject,
+  onMounted,
+  onUnmounted,
+  PropType,
+  PublicProps,
+  reactive,
+  SlotsType,
+  watch,
+} from 'vue'
 import domElements, { type SupportedHTMLElements } from '@/constants/domElements'
-import { type ExpressionType, generateClassName, generateComponentName, insertExpressions } from '@/utils'
-import { injectStyle } from '@/utils/injectStyle'
+import { type ExpressionType, generateClassName, generateComponentName, insertExpressions, injectStyle, removeStyle } from '@/utils'
 import { isStyledComponent, isValidElementType, isVueComponent } from '@/helper'
-import { useStyledClassName } from '@/hooks'
 
 interface IProps {
   as?: SupportedHTMLElements
@@ -51,13 +61,7 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
       type = 'styled-component'
     }
 
-    // Generate a unique class name
-    const className = generateClassName()
     const componentName = generateComponentName(type)
-
-    const { styledClassNameMap } = useStyledClassName()
-    styledClassNameMap[componentName] = className
-
     return defineComponent(
       (props, { slots }) => {
         const myAttrs = { ...attributes }
@@ -66,18 +70,23 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
           theme,
           ...props,
         }
-        myAttrs.class = className
+
+        myAttrs.class = generateClassName()
 
         watch([theme, props], () => {
           context = {
             theme,
             ...props,
           }
-          injectStyle<T>(className, cssWithExpression, context)
+          injectStyle<T>(myAttrs.class, cssWithExpression, context)
         })
 
         onMounted(() => {
-          injectStyle<T>(className, cssWithExpression, context)
+          injectStyle<T>(myAttrs.class, cssWithExpression, context)
+        })
+
+        onUnmounted(() => {
+          removeStyle(myAttrs.class)
         })
 
         // Return the render function

core/styled.ts

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

core/utils/index.ts

@@ -1,4 +1,4 @@
-export type ExpressionType<T = Record<string, any>> = ((props: T) => string | number) | string
+export type ExpressionType<T = Record<string, any>> = ((props: T) => string | number | ExpressionType | ExpressionType[]) | string
 
 export function insertExpressions<T>(
   strings: TemplateStringsArray,