feat(styled): support using StyledComponent as selector

Author: akinoccc

packages/core/src/styled.ts

@@ -70,7 +70,8 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
     }
 
     const componentName = generateComponentName(type)
-    return defineComponent(
+    const commonClassName = generateClassName()
+    const component = defineComponent(
       (props, { slots }) => {
         const internalAttrs = computed<Record<string, any>>(() => {
           if (typeof defaultAttrs === 'function') {
@@ -95,7 +96,7 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
 
         const defaultClassName = generateClassName()
 
-        internalProps.value.class += ` ${defaultClassName}`
+        internalProps.value.class += ` ${defaultClassName} ${commonClassName}`
 
         // Inject the tailwind classes to the class attribute
         watch(
@@ -157,7 +158,12 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
         } as ComponentObjectPropsOptions<{ as?: string; props?: P } & ExtractPropTypes<PropsDefinition<T>>>,
         inheritAttrs: true,
       },
-    )
+    ) as any
+    component.custom = {
+      className: commonClassName,
+    }
+
+    return component
   }
 
   return styledComponent as StyledComponent<T>

packages/core/src/utils/applyExpressions.ts

@@ -1,8 +1,11 @@
+import { isStyledComponent } from '../helper'
+
 export function applyExpressions(chunks: any[], executionContext: Record<string, any>, tailwindClasses: string[]): string[] {
   return chunks.reduce((ruleSet, chunk) => {
     if (chunk === undefined || chunk === null || chunk === false || chunk === '') {
       return ruleSet
     }
+
     if (Array.isArray(chunk)) {
       return [...ruleSet, ...applyExpressions(chunk, executionContext, tailwindClasses)]
     }
@@ -16,6 +19,10 @@ export function applyExpressions(chunks: any[], executionContext: Record<string,
       return ruleSet
     }
 
+    if (isStyledComponent(chunk)) {
+      return ruleSet.concat(`.${chunk.custom.className}`)
+    }
+
     return ruleSet.concat(chunk.toString())
   }, [])
 }

packages/core/src/utils/insertExpressions.ts

@@ -1,10 +1,12 @@
+import { DefineSetupFnComponent } from 'vue'
 import { TailwindObject } from '../helper'
 
 export type ExpressionType<T = Record<string, any>> =
   | ((props: T) => string | number | ExpressionType | ExpressionType[])
   | string
   | number
   | TailwindObject
+  | DefineSetupFnComponent<any>
   | undefined
   | null
 

packages/playground/src/App.vue

@@ -21,6 +21,12 @@ const changeTheme = () => {
     theme.bg = 'blue'
   }
 }
+
+const Container = styled.div`
+  ${Button} {
+    color: #fff;
+  }
+`
 </script>
 
 <template>
@@ -35,6 +41,10 @@ const changeTheme = () => {
     >
       <Button>777</Button>
     </ThemeProvider>
+
+    <Container>
+      <Button>888</Button>
+    </Container>
   </ThemeProvider>
 </template>