fix(core): [styled] as does not take effect

Author: akinoccc

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "none",
   "tabWidth": 2,

core/helper/is.ts

@@ -5,7 +5,7 @@ export function isTag(target: any) {
 }
 
 export function isStyledComponent(target: any) {
-  return typeof target === 'object' && 'styled' in target
+  return typeof target === 'object' && target?.name?.includes('styled')
 }
 
 export function isVueComponent(target: any) {

core/styled.ts

@@ -1,16 +1,4 @@
-import {
-  defineComponent,
-  DefineSetupFnComponent,
-  h,
-  inject,
-  onMounted,
-  PropType,
-  PublicProps,
-  reactive,
-  SlotsType,
-  useSlots,
-  watchEffect
-} from 'vue'
+import { defineComponent, DefineSetupFnComponent, h, inject, onMounted, PropType, PublicProps, reactive, SlotsType, watchEffect } from 'vue'
 import domElements, { type SupportedHTMLElements } from '@/constants/domElements'
 import { type ExpressionsType, generateClassName, generateComponentName, insertExpressions } from '@/utils'
 import { injectStyle } from '@/utils/injectStyle'
@@ -68,14 +56,13 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
     styledClassNameMap[componentName] = className
 
     return defineComponent(
-      (props) => {
+      (props, { slots }) => {
         const myAttrs = { ...attributes }
         const theme = reactive(inject<Record<string, string | number>>('$theme', {}))
         let context = {
           theme,
           ...props
         }
-
         myAttrs.class = className
 
         watchEffect(() => {
@@ -92,9 +79,8 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
 
         // Return the render function
         return () => {
-          const slots = useSlots()
           return h(
-            isVueComponent(target) ? target : props?.as || target,
+            isVueComponent(target) ? h(target, { as: props.as }) : props.as ?? target,
             {
               ...myAttrs
             },
@@ -110,9 +96,8 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
           },
           ...propsDefinition
         },
-        inheritAttrs: true,
-        styled: true
-      } as any
+        inheritAttrs: true
+      }
     )
   }
 

example/App.vue

@@ -52,6 +52,20 @@ const mixin = css`
 const StyledComp7 = styled('button', { color: String })`
   ${mixin}
 `
+const BlueButton = styled.button`
+  width: 120px;
+  height: 40px;
+  margin-right: 8px;
+  padding: 4px 8px;
+  border-radius: 9999px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  background-color: skyblue;
+  font-weight: bold;
+  color: #fff;
+`
+const LinkButton = styled(BlueButton)`
+  border: none;
+`
 </script>
 
 <template>
@@ -61,6 +75,7 @@ const StyledComp7 = styled('button', { color: String })`
     <StyledComp5>12345</StyledComp5>
     <WithAttrsComp color="red">123</WithAttrsComp>
     <StyledComp7 color="blue">123</StyledComp7>
+    <LinkButton as="a" href="#">Link Button</LinkButton>
   </ThemeProvider>
 </template>