🚀 Transform to UnoCSS

Effortlessly migrate your CSS, inline styles, and preprocessors to UnoCSS

English | 简体中文

✨ Why Transform to UnoCSS?

Transform your legacy CSS into modern, performant UnoCSS with zero configuration! This powerful tool automatically converts:

- 🎨 CSS classes → UnoCSS utilities
- 🖌️ Inline styles → Atomic classes
- 🎭 Sass/Less/Stylus → Pure UnoCSS
- ⚡ Bundle size reduction up to 70%
- 🔧 Smart conflict resolution
- 🐛 Debug mode for transparency
- 🎯 One-click rollback for safety

Perfect for modernizing legacy projects or optimizing performance. Works with Vue, React, Svelte, Astro, and more!

> 💡 Pro tip: If you're using Tailwind CSS, check out our sister project transformToTailwindcss.

📦 Quick Start

$3

``bash
npm i -g transform-to-unocss
`

$3

`bash
npx transform-to-unocss@latest your-project-folder
`

⚡ CLI Usage

$3

`bash


Transform entire directory

tounocss playground

Transform with debug output

tounocss playground --debug

Revert changes (if needed)

tounocss playground --revert

Show help

tounocss --help
`

$3

Before:

`vue



`

After:

`vue

`

✨ 70% smaller bundle size and zero runtime overhead!

🔧 Build Tool Integration

🔥 Vite (Recommended)

`ts
import { viteTransformToUnocss } from 'transform-to-unocss'
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [
viteTransformToUnocss({
include: ['/.vue', '/.tsx', '*/.jsx'],
exclude: ['node_modules/**'],
debug: true, // Enable debug mode
}),
],
})
`

📦 Rollup

`ts
// rollup.config.js
import { rollupTransformToUnocss } from 'transform-to-unocss'

export default {
plugins: [
rollupTransformToUnocss({
include: ['/.vue', '/.tsx', '*/.jsx'],
debug: false,
}),
],
}
`

⚡ Webpack

`ts
// webpack.config.js
const { webpackTransformToUnocss } = require('transform-to-unocss')

module.exports = {
plugins: [
webpackTransformToUnocss({
include: ['/.vue', '/.tsx', '*/.jsx'],
exclude: ['node_modules/**'],
}),
],
}
`

🎯 Vue CLI

`ts
// vue.config.js
const { webpackTransformToUnocss } = require('transform-to-unocss')

module.exports = {
configureWebpack: {
plugins: [
webpackTransformToUnocss({
include: ['*/.vue'],
debug: process.env.NODE_ENV === 'development',
}),
],
},
}
`

⚡ Esbuild

`ts
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildTransformToUnocss } from 'transform-to-unocss'

build({
plugins: [
esbuildTransformToUnocss({
include: ['/.tsx', '/.jsx'],
}),
],
})
`

� Core Features

$3

- ✅ CSS class selectors → UnoCSS utilities
- ✅ Inline styles → Atomic class attributes
- ✅ Preprocessors (Sass/Less/Stylus) → Pure UnoCSS
- ✅ Pseudo-classes (:hover, :focus, etc.)
- ✅ Media queries → Responsive classes
- ✅ Complex selectors → Smart parsing

$3

- 🐛 Debug mode - Detailed transformation logs
- � One-click rollback - Safe change reversal
- 🎨 VS Code extension - To UnoCSS
- 📝 TypeScript support - Full type definitions
- 🚀 Zero configuration - Works out of the box

$3

- ⚡ Vue 3/2 - Full support
- ⚛️ React - JSX/TSX support
- 🎭 Svelte - Native support
- 🚀 Astro - Component support
- 📄 HTML - Pure HTML files

🎨 Advanced Usage

$3

`typescript
import { transfromCode } from 'transform-to-unocss'

// Transform Vue component
const result = await transfromCode(vueCode, {
type: 'vue',
isRem: true,
debug: true,
})

// Transform React component
const result = await transfromCode(reactCode, {
type: 'tsx',
isJsx: true,
debug: false,
})
`

$3

`typescript
interface Options {
type?: 'vue' | 'tsx' | 'jsx' | 'html' | 'svelte' | 'astro'
isJsx?: boolean // Whether to use JSX syntax
isRem?: boolean // Whether to convert to rem units
debug?: boolean // Whether to enable debug mode
include?: string[] // File patterns to include
exclude?: string[] // File patterns to exclude
}
`

📊 Performance Comparison

| Project Type | Before | After | Reduction |
| ------------------ | ------ | ----- | --------- |
| Medium Vue Project | 245KB | 73KB | 70% ↓ |
| React Application | 180KB | 54KB | 68% ↓ |
| Enterprise Project | 890KB | 267KB | 72% ↓ |

�️ Debug Mode

Use the --debug flag for detailed transformation information:

`bash
tounocss playground --debug
`

Debug output includes:

- 📝 File processing progress
- 🎯 CSS rule transformation details
- ⚡ Performance statistics
- 🔍 Conflict resolution process

🚁 Ecosystem

- transform-to-unocss-core - Browser-side CSS transformation core
- To UnoCSS - VS Code extension
- transformToTailwindcss - Tailwind CSS transformer

🤝 Contributing

We welcome all forms of contributions! Please check the Contributing Guide for details.

$3

`bash


Clone the repository

git clone https://github.com/Simon-He95/transform-to-unocss.git

Install dependencies

pnpm install

Development mode

pnpm dev

Run tests

pnpm test

Build project

pnpm build
`

📸 Visual Transformation

$3

!before

$3

!after

Result: 70% smaller CSS bundle, better performance, and cleaner code! 🚀

🤝 Contributing

We welcome all forms of contributions! Please check the Contributing Guide for details.

$3

`bash


Clone the repository

git clone https://github.com/Simon-He95/transform-to-unocss.git

Install dependencies

pnpm install

Development mode

pnpm dev

Run tests

pnpm test

Build project

pnpm build
``

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

💖 Support the Project

If this project helped you, please consider:

- ⭐ Star this repository
- 🐛 Report issues
- 🔧 Contribute code
- ☕ Buy me a coffee

Your support keeps this project alive and improving! 🙏

📄 License

MIT © 2023-present Simon He

---

Made with ❤️ by Simon He