PluginStatstransform-to-unocss weekly downloads statistics
By Simon-He95 (2 listings) · npm · Webpack plugins
🚀 Effortlessly transform CSS, inline styles, and preprocessors (Sass/Less/Stylus) to UnoCSS with smart conflict resolution and debug support
transform-to-unocss has 10 recorded weekly downloads on npm, a decrease of 94.2% over the past 30 days.
It ranks #1918 of 2,251 tracked npm listings by weekly downloads.
Over 90 days, weekly downloads changed by +42.9%.
PluginStats has 543 daily observations since Apr 23, 2025; the latest is from Oct 17, 2026.
About transform-to-unocss
🚀 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
Global Installation
One-time Usage (Recommended)
⚡ CLI Usage
Transform your project
🎯 Quick Example
Before:
After:
✨ 70% smaller bundle size and zero runtime overhead!
🔧 Build Tool Integration
🔥 Vite (Recommended)
📦 Rollup
⚡ Webpack
🎯 Vue CLI
⚡ Esbuild
� 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 • 📝 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
Configuration Options
📊 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:
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.
Development Setup
📸 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 for details.
Development Setup
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
Description from the npm listing.
- transform-to-unocss
- unocss
- css-migration
- css-to-unocss
- tailwindcss
- atomic-css
- css-transform
- build-tool
- vite-plugin
- webpack-plugin
- rollup-plugin
- vue
- react
- svelte
- astro
- sass
- less
- stylus
- performance-optimization
- cli-tool
Where transform-to-unocss sits in the listing
Each band is one page of 20. Weekly downloads on a log scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Recent observations
Full history (543)Similar npm Webpack plugins plugins
Data source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/transform-to-unocss. First seen Oct 16, 2026; last successful collection Oct 18, 2026. See the methodology.