Transform to UnoCSS

🚀 Transform to UnoCSS

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

NPM version NPM Downloads GitHub stars License

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 ``` **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 ### đŸŽ¯ 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 ![before](/assets/before.png) ### After Transformation ![after](/assets/after.png) **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