Merge pull request #27 from vue-styled-components/alpha

fix(core): not export `styled` and duplicated class adding

Author: akinoccc

packages/core/index.ts

@@ -1,5 +1,9 @@
+import styled from './src/styled'
+
 export * from './src/providers/theme'
 export * from './src/helper'
 // export * from './hooks'
 
 export * from './src/styled'
+
+export default styled

packages/core/package.json

@@ -15,7 +15,7 @@
   },
   "types": "./dist/index.d.ts",
   "repository": {
-    "url": "https://github.com/vue-styled-components/core.git"
+    "url": "git+https://github.com/vue-styled-components/core.git"
   },
   "author": {
     "name": "akinoccc",

packages/core/src/styled.ts

@@ -1,6 +1,7 @@
 import {
-  ComponentObjectPropsOptions,
-  ExtractPropTypes,
+  type ComponentObjectPropsOptions,
+  type ExtractPropTypes,
+  type DefineSetupFnComponent,
   defineComponent,
   h,
   inject,
@@ -13,15 +14,30 @@ import {
 import domElements, { type SupportedHTMLElements } from '@/src/constants/domElements'
 import { type ExpressionType, generateClassName, generateComponentName, insertExpressions, injectStyle, removeStyle } from '@/src/utils'
 import { isStyledComponent, isValidElementType, isVueComponent } from '@/src/helper'
-import { DefaultTheme } from './providers/theme'
+import type { DefaultTheme } from './providers/theme'
 
 type Attrs = Record<string, any>
 
-type BaseContext<T> = T & { theme: DefaultTheme }
-type PropsDefinition<T> = {
+export type BaseContext<T> = T & { theme: DefaultTheme }
+
+export type PropsDefinition<T> = {
   [K in keyof T]: T[K]
 }
-function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>) {
+
+// 定义 styledComponent 类型
+interface StyledComponent<T extends object> {
+  <P>(
+    styles: TemplateStringsArray,
+    ...expressions: (
+      | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>
+      | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>[]
+    )[]
+  ): DefineSetupFnComponent<{ as?: string; props?: P } & ExtractPropTypes<PropsDefinition<T>>>
+
+  attrs<A extends Attrs = Record<string, any>>(attrs: A): StyledComponent<T>
+}
+
+function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>): StyledComponent<T> {
   if (!isValidElementType(target)) {
     throw Error('The element is invalid.')
   }
@@ -71,7 +87,7 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
         watch(
           tailwindClasses,
           (classNames) => {
-            myAttrs.value.class += ` ${defaultClassName} ${classNames.join(' ')}`
+            myAttrs.value.class += ` ${classNames.join(' ')}`
           },
           { deep: true },
         )
@@ -141,4 +157,4 @@ domElements.forEach((domElement: SupportedHTMLElements) => {
   styled[domElement] = baseStyled(domElement)
 })
 
-export { styled }
+export { styled, styled as default }

packages/core/vite.config.ts

@@ -13,6 +13,12 @@ export default defineConfig({
       formats: ['es', 'umd'],
     },
     rollupOptions: {
+      output: {
+        exports: 'named',
+        globals: {
+          vue: 'Vue',
+        },
+      },
       external: ['vue'],
     },
   },

packages/playground/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { styled } from '@/index'
+import { styled } from '@vue-styled-components/core'
 
 const TestProps = styled.div<{
   color: string