https://github.com/Simon-He95/transformToUnoCSS
transform css to UnoCSS | 将 css 转换成 UnoCss 的语法
https://github.com/Simon-He95/transformToUnoCSS
cli css esbuild rollup transform-to-unocss transform-to-unocss-core unocss vite vue-cli webpack
Last synced: 5 months ago
JSON representation
transform css to UnoCSS | 将 css 转换成 UnoCss 的语法
- Host: GitHub
- URL: https://github.com/Simon-He95/transformToUnoCSS
- Owner: Simon-He95
- License: mit
- Created: 2023-02-22T09:38:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-20T14:28:00.000Z (over 1 year ago)
- Last Synced: 2024-11-23T23:59:32.107Z (about 1 year ago)
- Topics: cli, css, esbuild, rollup, transform-to-unocss, transform-to-unocss-core, unocss, vite, vue-cli, webpack
- Language: TypeScript
- Homepage: https://to-unocss.netlify.app/
- Size: 27.6 MB
- Stars: 130
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: license
Awesome Lists containing this project
- awesome-unocss - CSS to UnoCss - He95/transformToUnoCSS) - Transform CSS to Unocss by [@Simon-He95](https://github.com/Simon-He95). (Community / Transformers)
README
🚀 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](https://github.com/Simon-He95/transformToTailwindcss).
## 📦 Quick Start
### Global Installation
```bash
npm i -g transform-to-unocss
```
### One-time Usage (Recommended)
```bash
npx transform-to-unocss@latest your-project-folder
```
## ⚡ CLI Usage
### Transform your project
```bash
# Transform entire directory
tounocss playground
# Transform with debug output
tounocss playground --debug
# Revert changes (if needed)
tounocss playground --revert
# Show help
tounocss --help
```
### 🎯 Quick Example
**Before:**
```vue
Hello World
This is a paragraph
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
.title {
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
}
```
**After:**
```vue
Hello World
This is a paragraph
```
✨ **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
### 🎯 Smart Transformation
- ✅ **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
### 🔧 Developer Experience
- 🐛 **Debug mode** - Detailed transformation logs
- � **One-click rollback** - Safe change reversal
- 🎨 **VS Code extension** - [To UnoCSS](https://github.com/Simon-He95/unot)
- 📝 **TypeScript support** - Full type definitions
- 🚀 **Zero configuration** - Works out of the box
### 🏗️ Framework Support
- ⚡ **Vue 3/2** - Full support
- ⚛️ **React** - JSX/TSX support
- 🎭 **Svelte** - Native support
- 🚀 **Astro** - Component support
- 📄 **HTML** - Pure HTML files
## 🎨 Advanced Usage
### Programmatic API
```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,
})
```
### Configuration Options
```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](https://github.com/Simon-He95/transform-to-unocss-core) - Browser-side CSS transformation core
- [To UnoCSS](https://github.com/Simon-He95/unot) - VS Code extension
- [transformToTailwindcss](https://github.com/Simon-He95/transformToTailwindcss) - Tailwind CSS transformer
## 🤝 Contributing
We welcome all forms of contributions! Please check the [Contributing Guide](./CONTRIBUTING.md) for details.
### Development Setup
```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
### Before Transformation
### After Transformation
**Result**: 70% smaller CSS bundle, better performance, and cleaner code! 🚀
## 🤝 Contributing
We welcome all forms of contributions! Please check the [Contributing Guide](./CONTRIBUTING.md) for details.
### Development Setup
```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](https://github.com/Simon-He95/sponsor)**
Your support keeps this project alive and improving! 🙏
## 📄 License
[MIT](./LICENSE) © 2023-present [Simon He](https://github.com/Simon-He95)
---
Made with ❤️ by Simon He