feat(core): [styled] support embed css

Author: akinoccc

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

example/App.vue

@@ -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>