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,

core/utils/insertExpressions.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)

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

@@ -49,8 +49,6 @@ const StyledComp6 = styled('button', { color: String })<{
 
 const WithAttrsComp = withAttrs(StyledComp6, { disabled: true })
 
-// console.log(useStyledClassName().getStyledClassName(StyledComp6))
-
 const mixin = css<{
   color: string
 }>`
@@ -97,6 +95,29 @@ const commonClass = cssClass`
   color: #fff;
   background-color: red;
 `
+
+const testEmbedCss1 = css`
+  margin: 40px;
+  background: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+`
+const testEmbedCss2 = css`
+  margin: 40px;
+  background: blue;
+  padding: 10px 20px;
+  border-radius: 8px;
+  color: white;
+`
+
+const show = ref(true)
+const TestEmbedComponent = styled('div', { show: Boolean })`
+  ${(props) => {
+    return props.show ? testEmbedCss1 : testEmbedCss2
+  }}
+`
+
+// console.log(testEmbedCss1, testEmbedCss2)
 </script>
 
 <template>
@@ -109,6 +130,9 @@ const commonClass = cssClass`
     <LinkButton as="a" href="#">Link Button</LinkButton>
     <StyledBlueLink :color="color" href="#" @click="update">Styled Link</StyledBlueLink>
     <div :class="commonClass">test common class</div>
+
+    <TestEmbedComponent :show="show"> White </TestEmbedComponent>
+    <TestEmbedComponent :show="!show" @click="show = !show"> Blue </TestEmbedComponent>
   </ThemeProvider>
 </template>
 

example/App.vue

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