Vue Styled 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 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

$3

`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(),
],
})
`

$3

`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

$3

`tsx
import styled from '@vue-styled-components/core'

interface IconProps {
color?: string
size?: number
}

// Using the new generic syntax
const Icon = styled.span
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 patterns, and transforms them into the styled('tag', Props)` format supported by Vue Styled Components.

License

Alpha-2.0