docs: update usage

Author: akinoccc

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

@@ -10,19 +10,4 @@ export default antfu(
       '**/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',
-      'no-case-declarations': 'warn',
-    },
-  },
 )

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

packages/docs/zh/guide/basic/passing-props.md

@@ -45,6 +45,13 @@ const blur = () => (borderColor.value = 'darkred')
 
 :::
 
+**所以我们提供了一个插件使得定义 props 与 `styled-components` 一样. 你可以安装插件 [`@vue-styled-components/plugin`](https://github.com/vue-styled-components/plugin) 以支持一下写法:**
+
+```ts
+const StyledDiv = styled.div<color: string>`
+  color: ${props => props.color}
+`
+
 ## 使用 `attributes`
 
 :::demo

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

@@ -6,6 +6,8 @@ outline: deep
 
 ## 安装
 
+### 核心库
+
 Npm
 
 ```shell
@@ -24,6 +26,43 @@ Pnpm
 pnpm i @vue-styled-components/core
 ```
 
+### Vite 插件
+
+
+
+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 配置
+
+```ts
+import vueStyledPlugin from "@vue-styled-components/plugin"
+// ...
+
+export default defineConfig({
+  // ...
+  plugins: [
+    vueStyledPlugin()
+    // ...
+  ]
+})
+```
+
 ## 开始使用
 
 :::demo
@@ -32,7 +71,7 @@ pnpm i @vue-styled-components/core
 <script setup lang="ts">
   import { styled } from '@vue-styled-components/core'
 
-  const StyledDiv = styled.div`
+  const StyledDiv = styled.div<{ color?: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -41,7 +80,7 @@ pnpm i @vue-styled-components/core
   background-color: #4c5a6d;
   font-size: 20px;
   font-weight: bold;
-  color: #fff;
+  color: ${props => props.color || '#fff'};
 `
 </script>
 

packages/playground/vite.config.ts

@@ -1,7 +1,6 @@
 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({
@@ -10,7 +9,6 @@ export default defineConfig({
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.less'],
   },
   plugins: [
-    p() as any,
     vue({
       script: {
         defineModel: true,