feat: vue styled plugin

Author: akinoccc

.github/workflows/release.yml

@@ -0,0 +1,49 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+      - rc
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    permissions:
+      contents: write
+      id-token: write
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Using pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10.6.2
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check
+        run: pnpm test & pnpm lint
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: pnpm release

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.releaserc

@@ -0,0 +1,38 @@
+{
+  "branches": [
+    "+([0-9])?(.{+([0-9]),x}).x",
+    "main",
+    {
+      "name": "rc",
+      "prerelease": true
+    }
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": true
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): v${nextRelease.version} \n\n${nextRelease.notes}"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "addReleases": "top",
+        "successComment": ":tada: This issue has been resolved in version ${nextRelease.version} :tada:\n\nThe release is available on [GitHub release](<github_release_url>)"
+      }
+    ]
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,37 @@
+{
+  "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.md

@@ -0,0 +1,102 @@
+# Vue Styled Components TypeScript Syntax Plugin
+
+A Vite plugin that provides TypeScript generic syntax support for Vue Styled Components, similar to React styled-components.
+
+> [!IMPORTANT]
+> The current plugin is not fully mature and may not completely support complex TypeScript types.
+
+## Features
+
+- Allows using the `styled.tag<Props>` syntax instead of the original required `styled('tag', { props })` syntax
+- Automatically transforms at compile time with no runtime performance impact
+
+## Installation
+
+```bash
+# npm
+npm install @vue-styled-components/plugin --save-dev
+
+# yarn
+yarn add @vue-styled-components/plugin --dev
+
+# pnpm
+pnpm add @vue-styled-components/plugin -D
+```
+
+## Usage
+
+### Add the plugin to your Vite config
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueStyled from '@vue-styled-components/plugin'
+
+export default defineConfig({
+  plugins: [
+    // Make sure to use it before vue and vueJsx plugins
+    vueStyled(),
+    vue(),
+    vueJsx(),
+  ],
+})
+```
+
+### Configuration Options
+
+```ts
+vueStyled({
+  // Included file extensions, default is ['.vue', '.tsx', '.jsx', '.ts', '.js']
+  include: ['.vue', '.tsx', '.jsx', '.ts', '.js'],
+  
+  // Excluded file paths, default is ['node_modules']
+  exclude: ['node_modules'],
+  
+  // Enable debug mode
+  debug: false,
+  
+  // Log level: 'error' | 'warn' | 'info' | 'debug' | 'none'
+  logLevel: 'error',
+  
+  // Enable type caching for better performance
+  enableCache: true,
+})
+```
+
+## Examples
+
+### Using Generic Syntax
+
+```tsx
+import styled from '@vue-styled-components/core'
+
+interface IconProps {
+  color?: string
+  size?: number
+}
+
+// Using the new generic syntax
+const Icon = styled.span<IconProps>`
+  color: ${props => props.color || 'currentColor'};
+  font-size: ${props => `${props.size || 16}px`};
+`
+
+// Equivalent to the original syntax
+const IconOriginal = styled('span', {
+  color: String,
+  size: Number,
+})`
+  color: ${props => props.color || 'currentColor'};
+  font-size: ${props => `${props.size || 16}px`};
+`
+```
+
+## How It Works
+
+The plugin intercepts source code during the compilation phase, uses an AST parser to analyze the code, searches for `styled.tag<Props>` patterns, and transforms them into the `styled('tag', Props)` format supported by Vue Styled Components.
+
+## License
+
+Alpha-2.0

__tests__/basic.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+import { transformStyledSyntax } from '../src/ts-transformer'
+import { extractPropsFromCode } from './normalize'
+
+describe('基本语法转换', () => {
+  it('应该转换简单的 styled.tag<Props> 为 styled("tag", { primary: { type: Boolean, required: false } })', () => {
+    const code = `
+      import styled from '@vue-styled-components/core'
+      
+      interface ButtonProps {
+        primary?: boolean
+      }
+      
+      const Button = styled.button<ButtonProps>\`
+        background-color: \${props => props.primary ? 'blue' : 'white'};
+      \`
+    `
+
+    const result = transformStyledSyntax(code, 'test.tsx')
+
+    expect(result).not.toBeNull()
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(props).toHaveProperty('primary')
+    expect(props.primary.type).toBe('Boolean')
+    expect(props.primary.required).toBe(false)
+  })
+
+  it('应该转换行内泛型定义', () => {
+    const code = `
+      import styled from '@vue-styled-components/core'
+      
+      const Link = styled.a<{ active: boolean; disabled?: boolean }>\`
+        color: \${props => props.active ? 'red' : 'blue'};
+        opacity: \${props => props.disabled ? 0.5 : 1};
+      \`
+    `
+
+    const result = transformStyledSyntax(code, 'test.tsx')
+
+    expect(result).not.toBeNull()
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Link')
+    expect(props).toHaveProperty('active')
+    expect(props).toHaveProperty('disabled')
+    expect(props.active.type).toBe('Boolean')
+    expect(props.active.required).toBe(true)
+    expect(props.disabled.type).toBe('Boolean')
+    expect(props.disabled.required).toBe(false)
+  })
+
+  it('不应该转换没有泛型的样式组件', () => {
+    const code = `
+      import styled from '@vue-styled-components/core'
+      
+      const Button = styled.button\`
+        background-color: blue;
+      \`
+    `
+
+    const result = transformStyledSyntax(code, 'test.tsx')
+
+    expect(result).toBeNull()
+  })
+
+  it('不应该转换原始的函数调用语法', () => {
+    const code = `
+      import styled from '@vue-styled-components/core'
+      
+      const Button = styled('button', {
+        primary: Boolean,
+      })\`
+        background-color: \${props => props.primary ? 'blue' : 'white'};
+      \`
+    `
+
+    const result = transformStyledSyntax(code, 'test.tsx')
+
+    expect(result).toBeNull()
+  })
+
+  it('应该处理同一文件中的多个样式组件', () => {
+    const code = `
+      import styled from '@vue-styled-components/core'
+      
+      interface ButtonProps {
+        primary?: boolean
+      }
+      
+      interface IconProps {
+        size?: number
+      }
+      
+      const Button = styled.button<ButtonProps>\`
+        background-color: \${props => props.primary ? 'blue' : 'white'};
+      \`
+      
+      const Icon = styled.span<IconProps>\`
+        font-size: \${props => \`\${props.size || 16}px\`};
+      \`
+    `
+
+    const result = transformStyledSyntax(code, 'test.tsx')
+
+    expect(result).not.toBeNull()
+
+    // 检查第一个组件
+    const buttonProps = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(buttonProps).toHaveProperty('primary')
+    expect(buttonProps.primary.type).toBe('Boolean')
+    expect(buttonProps.primary.required).toBe(false)
+
+    // 检查第二个组件
+    const iconProps = extractPropsFromCode(result?.props?.[1], 'Icon')
+    expect(iconProps).toHaveProperty('size')
+    expect(iconProps.size.type).toBe('Number')
+    expect(iconProps.size.required).toBe(false)
+  })
+})