feat: support generic props

Author: akinoccc

eslint.config.mjs

@@ -1,6 +1,27 @@
 import antfu from '@antfu/eslint-config'
 
-export default antfu({
-  markdown: false,
-  ignores: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/coverage/**'],
-})
+export default antfu(
+  {
+    markdown: false,
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/build/**',
+      '**/coverage/**',
+    ],
+  },
+  {
+    files: ['packages/plugins/typescript-syntax/**/*.ts'],
+    rules: {
+      'no-unused-vars': 'off',
+      'no-cond-assign': 'warn',
+      'no-console': 'warn',
+      'unused-imports/no-unused-vars': 'warn',
+      'regexp/no-unused-capturing-group': 'warn',
+      'style/max-statements-per-line': 'warn',
+      'regexp/no-super-linear-backtracking': 'warn',
+      'unicorn/prefer-number-properties': 'warn',
+      'style/no-mixed-operators': 'warn',
+    },
+  },
+)

packages/core/src/styled.ts

@@ -34,14 +34,17 @@ interface StyledComponent<T extends object> {
   <P>(
     styles: TemplateStringsArray,
     ...expressions: (
-      | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>
-      | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>[]
+      | ExpressionType<BaseContext<P & T>>
+      | ExpressionType<BaseContext<P & T>>[]
     )[]
-  ): DefineSetupFnComponent<{ as?: string, props?: P } & ExtractPropTypes<PropsDefinition<T>> & HTMLAttributes>
+  ): DefineSetupFnComponent<{ as?: string, props?: P } & ExtractPropTypes<PropsDefinition<T & P>> & HTMLAttributes>
 
   attrs: <A = object>(
-    attrs: A | ((props: ExtractPropTypes<PropsDefinition<T>>) => A),
+    attrs: object | ((props: PropsDefinition<T> & A) => object),
   ) => StyledComponent<A & ExtractPropTypes<PropsDefinition<T>>>
+
+  // 支持泛型参数的类型定义
+  <P extends object>(props: PropsDefinition<P>): StyledComponent<P & T>
 }
 
 function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>): StyledComponent<T> {
@@ -50,17 +53,25 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
   }
   let defaultAttrs: unknown
   function styledComponent<P>(
-    styles: TemplateStringsArray,
+    stylesOrProps: TemplateStringsArray | PropsDefinition<P>,
     ...expressions: (
       | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>
       | ExpressionType<BaseContext<P & ExtractPropTypes<PropsDefinition<T>>>>[]
     )[]
   ) {
-    const cssStringsWithExpression = insertExpressions(styles, expressions)
+    // 处理泛型参数的情况，如 styled.div<Props>
+    if (!Array.isArray(stylesOrProps)) {
+      return baseStyled(target, { ...propsDefinition, ...stylesOrProps } as PropsDefinition<T & P>) as StyledComponent<T & P>
+    }
+
+    // 正常的样式模板字符串处理
+    const cssStringsWithExpression = insertExpressions(stylesOrProps as TemplateStringsArray, expressions)
     return createStyledComponent<P>(cssStringsWithExpression)
   }
 
-  styledComponent.attrs = function <A extends object>(attrs: A) {
+  styledComponent.attrs = function <A = object>(
+    attrs: object | ((props: ExtractPropTypes<PropsDefinition<T>> & A) => object),
+  ) {
     defaultAttrs = attrs
     return styledComponent
   }
@@ -174,11 +185,14 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
   return styledComponent as StyledComponent<T>
 }
 
-/** Append all the supported HTML elements to the styled properties */
-const styled = baseStyled as typeof baseStyled & {
-  [E in SupportedHTMLElements]: ReturnType<typeof baseStyled>
+// 为styled添加attrs方法的类型定义
+type StyledInterface = typeof baseStyled & {
+  [E in SupportedHTMLElements]: StyledComponent<object>
 }
 
+/** Append all the supported HTML elements to the styled properties */
+const styled = baseStyled as StyledInterface
+
 domElements.forEach((domElement: SupportedHTMLElements) => {
   styled[domElement] = baseStyled(domElement)
 })

packages/playground/src/App.vue

@@ -27,6 +27,37 @@ const Container = styled.div`
     color: #fff;
   }
 `
+
+const StyledDiv = styled.div<{
+  color: string
+}>`
+  color: ${(props) => props.color || 'white'};
+`
+
+type StyledDivProps = {
+  color: string
+}
+
+const StyledDiv2 = styled.div<StyledDivProps>`
+  color: ${(props) => props.color || 'white'};
+`
+
+type StyledDiv3Props = {
+  size: number
+} & StyledDivProps
+
+const StyledDiv3 = styled.div<StyledDiv3Props>`
+  color: ${(props) => props.color || 'white'};
+  font-size: ${(props) => props.size}px;
+`
+
+const StyledInput = styled.input.attrs<{color: string, inputType: string}>((props) => ({
+  type: props.inputType,
+}))`
+  background: ${(props) => props.color};
+  color: blue;
+`
+
 </script>
 
 <template>
@@ -45,6 +76,11 @@ const Container = styled.div`
     <Container>
       <Button>888</Button>
     </Container>
+
+    <StyledDiv color="red">999</StyledDiv>
+    <StyledDiv2 color="red">999</StyledDiv2>
+    <StyledDiv3 color="red" :size="100">999</StyledDiv3>
+    <StyledInput color="red" input-type="password" />
   </ThemeProvider>
 </template>
 

packages/playground/vite.config.ts

@@ -1,6 +1,7 @@
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vite'
+import p from '../plugins/typescript-syntax/index'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,6 +10,7 @@ export default defineConfig({
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.less'],
   },
   plugins: [
+    p(),
     vue({
       script: {
         defineModel: true,