Merge pull request #43 from vue-styled-components/feat/plugins

Feat/plugins

Author: akinoccc

.vscode/settings.json

@@ -1,3 +1,37 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "@stylistic", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

README.zh_CN.md

@@ -25,10 +25,6 @@
   [Changelog](./CHANGELOG.md) · [English](./README.md) · 中文
 </div>
 
-> [!IMPORTANT]
-> 这个库已经迁移到新的npm组织 [@vue-styled-components/core](https://npmjs.org/package/@vue-styled-components/core)
-> 旧的npm组织 已经废弃，不再发布新版本
-
 ## ✨特性
 
 ✅ 样式化 Vue 组件或原生组件

eslint.config.mjs

@@ -1,6 +1,13 @@
 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/**',
+    ],
+  },
+)

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/docs/guide/basic/passing-props.md

@@ -49,6 +49,14 @@ fallthrough attributes.(see [Props Declaration](https://vuejs.org/guide/componen
 
 :::
 
+**So we provide a vite plugin to support the generic type props same as `styled-components`. You can install the plugin [`@vue-styled-components/plugin`](https://github.com/vue-styled-components/plugin) to allow the following usage:**
+
+```ts
+const StyledDiv = styled.div<color: string>`
+  color: ${props => props.color}
+`
+```
+
 ## Use `attributes`
 
 :::demo

packages/docs/guide/basic/quick-start.md

@@ -6,6 +6,8 @@ outline: deep
 
 ## Installation
 
+### Core
+
 Npm
 
 ```shell
@@ -24,6 +26,42 @@ Pnpm
 pnpm i @vue-styled-components/core
 ```
 
+### Vite Plugin
+
+Npm
+
+```shell
+npm i @vue-styled-components/plugin
+```
+
+Yarn
+
+```shell
+yarn add @vue-styled-components/plugin
+```
+
+Pnpm
+
+```shell
+pnpm i @vue-styled-components/plugin
+```
+
+Vite Config
+
+```ts
+import vueStyledPlugin from "@vue-styled-components/plugin"
+// ...
+
+export default defineConfig({
+  // ...
+  plugins: [
+    vueStyledPlugin()
+    // ...
+  ]
+})
+```
+
+
 ## Getting Started
 
 :::demo