{"id":22489013,"url":"https://github.com/Simon-He95/transformToUnoCSS","last_synced_at":"2025-08-02T21:32:10.529Z","repository":{"id":78328950,"uuid":"605027381","full_name":"Simon-He95/transformToUnoCSS","owner":"Simon-He95","description":"transform css to UnoCSS | 将 css 转换成 UnoCss 的语法","archived":false,"fork":false,"pushed_at":"2024-08-20T14:28:00.000Z","size":28975,"stargazers_count":130,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-23T23:59:32.107Z","etag":null,"topics":["cli","css","esbuild","rollup","transform-to-unocss","transform-to-unocss-core","unocss","vite","vue-cli","webpack"],"latest_commit_sha":null,"homepage":"https://to-unocss.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Simon-He95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Simon-He95","custom":["https://github.com/Simon-He95/sponsor"]}},"created_at":"2023-02-22T09:38:29.000Z","updated_at":"2024-11-23T12:05:40.000Z","dependencies_parsed_at":"2024-03-07T11:46:06.827Z","dependency_job_id":"3eb6e40c-4393-43bf-92fb-6ad4b4ccc83e","html_url":"https://github.com/Simon-He95/transformToUnoCSS","commit_stats":{"total_commits":320,"total_committers":2,"mean_commits":160.0,"dds":0.353125,"last_synced_commit":"5a8187e2bda9d66514e0f15f6b94745071a18ba3"},"previous_names":[],"tags_count":86,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToUnoCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToUnoCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToUnoCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simon-He95%2FtransformToUnoCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simon-He95","download_url":"https://codeload.github.com/Simon-He95/transformToUnoCSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","css","esbuild","rollup","transform-to-unocss","transform-to-unocss-core","unocss","vite","vue-cli","webpack"],"created_at":"2024-12-06T17:19:05.164Z","updated_at":"2025-08-02T21:32:10.485Z","avatar_url":"https://github.com/Simon-He95.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Simon-He95","https://github.com/Simon-He95/sponsor"],"categories":["Vue","Community"],"sub_categories":["Transformers"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg height=\"200\" src=\"./assets/kv.png\" alt=\"Transform to UnoCSS\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e🚀 Transform to UnoCSS\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eEffortlessly migrate your CSS, inline styles, and preprocessors to UnoCSS\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/transform-to-unocss\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/transform-to-unocss?color=c95f8b\u0026amp;label=\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/transform-to-unocss\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/transform-to-unocss?color=727cf5\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Simon-He95/transform-to-unocss\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Simon-He95/transform-to-unocss?color=yellow\" alt=\"GitHub stars\"\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e English | \u003ca href=\"./README_zh.md\"\u003e简体中文\u003c/a\u003e\u003c/p\u003e\n\n## ✨ Why Transform to UnoCSS?\n\nTransform your legacy CSS into modern, performant UnoCSS with zero configuration! This powerful tool automatically converts:\n\n- 🎨 **CSS classes** → UnoCSS utilities\n- 🖌️ **Inline styles** → Atomic classes\n- 🎭 **Sass/Less/Stylus** → Pure UnoCSS\n- ⚡ **Bundle size reduction** up to 70%\n- 🔧 **Smart conflict resolution**\n- 🐛 **Debug mode** for transparency\n- 🎯 **One-click rollback** for safety\n\nPerfect for modernizing legacy projects or optimizing performance. Works with Vue, React, Svelte, Astro, and more!\n\n\u003e 💡 **Pro tip**: If you're using Tailwind CSS, check out our sister project [transformToTailwindcss](https://github.com/Simon-He95/transformToTailwindcss).\n\n## 📦 Quick Start\n\n### Global Installation\n\n```bash\nnpm i -g transform-to-unocss\n```\n\n### One-time Usage (Recommended)\n\n```bash\nnpx transform-to-unocss@latest your-project-folder\n```\n\n## ⚡ CLI Usage\n\n### Transform your project\n\n```bash\n# Transform entire directory\ntounocss playground\n\n# Transform with debug output\ntounocss playground --debug\n\n# Revert changes (if needed)\ntounocss playground --revert\n\n# Show help\ntounocss --help\n```\n\n### 🎯 Quick Example\n\n**Before:**\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003ch1 class=\"title\"\u003eHello World\u003c/h1\u003e\n    \u003cp style=\"color: red; font-size: 16px;\"\u003eThis is a paragraph\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n  background: linear-gradient(to right, #ff6b6b, #4ecdc4);\n}\n.title {\n  font-size: 24px;\n  font-weight: bold;\n  color: #333;\n  text-align: center;\n}\n\u003c/style\u003e\n```\n\n**After:**\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"max-w-6xl mx-auto p-5 bg-gradient-to-r from-red-400 to-teal-400\"\u003e\n    \u003ch1 class=\"text-6 font-bold text-gray-8 text-center\"\u003eHello World\u003c/h1\u003e\n    \u003cp class=\"text-red text-4\"\u003eThis is a paragraph\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n✨ **70% smaller bundle size** and **zero runtime overhead**!\n\n## 🔧 Build Tool Integration\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e🔥 Vite (Recommended)\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\nimport { viteTransformToUnocss } from 'transform-to-unocss'\n// vite.config.ts\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    viteTransformToUnocss({\n      include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],\n      exclude: ['node_modules/**'],\n      debug: true, // Enable debug mode\n    }),\n  ],\n})\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e📦 Rollup\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\n// rollup.config.js\nimport { rollupTransformToUnocss } from 'transform-to-unocss'\n\nexport default {\n  plugins: [\n    rollupTransformToUnocss({\n      include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],\n      debug: false,\n    }),\n  ],\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e⚡ Webpack\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\n// webpack.config.js\nconst { webpackTransformToUnocss } = require('transform-to-unocss')\n\nmodule.exports = {\n  plugins: [\n    webpackTransformToUnocss({\n      include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],\n      exclude: ['node_modules/**'],\n    }),\n  ],\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e🎯 Vue CLI\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\n// vue.config.js\nconst { webpackTransformToUnocss } = require('transform-to-unocss')\n\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      webpackTransformToUnocss({\n        include: ['**/*.vue'],\n        debug: process.env.NODE_ENV === 'development',\n      }),\n    ],\n  },\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e⚡ Esbuild\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport { esbuildTransformToUnocss } from 'transform-to-unocss'\n\nbuild({\n  plugins: [\n    esbuildTransformToUnocss({\n      include: ['**/*.tsx', '**/*.jsx'],\n    }),\n  ],\n})\n```\n\n\u003c/details\u003e\n\n## � Core Features\n\n### 🎯 Smart Transformation\n\n- ✅ **CSS class selectors** → UnoCSS utilities\n- ✅ **Inline styles** → Atomic class attributes\n- ✅ **Preprocessors** (Sass/Less/Stylus) → Pure UnoCSS\n- ✅ **Pseudo-classes** (`:hover`, `:focus`, etc.)\n- ✅ **Media queries** → Responsive classes\n- ✅ **Complex selectors** → Smart parsing\n\n### 🔧 Developer Experience\n\n- 🐛 **Debug mode** - Detailed transformation logs\n- � **One-click rollback** - Safe change reversal\n- 🎨 **VS Code extension** - [To UnoCSS](https://github.com/Simon-He95/unot)\n- 📝 **TypeScript support** - Full type definitions\n- 🚀 **Zero configuration** - Works out of the box\n\n### 🏗️ Framework Support\n\n- ⚡ **Vue 3/2** - Full support\n- ⚛️ **React** - JSX/TSX support\n- 🎭 **Svelte** - Native support\n- 🚀 **Astro** - Component support\n- 📄 **HTML** - Pure HTML files\n\n## 🎨 Advanced Usage\n\n### Programmatic API\n\n```typescript\nimport { transfromCode } from 'transform-to-unocss'\n\n// Transform Vue component\nconst result = await transfromCode(vueCode, {\n  type: 'vue',\n  isRem: true,\n  debug: true,\n})\n\n// Transform React component\nconst result = await transfromCode(reactCode, {\n  type: 'tsx',\n  isJsx: true,\n  debug: false,\n})\n```\n\n### Configuration Options\n\n```typescript\ninterface Options {\n  type?: 'vue' | 'tsx' | 'jsx' | 'html' | 'svelte' | 'astro'\n  isJsx?: boolean // Whether to use JSX syntax\n  isRem?: boolean // Whether to convert to rem units\n  debug?: boolean // Whether to enable debug mode\n  include?: string[] // File patterns to include\n  exclude?: string[] // File patterns to exclude\n}\n```\n\n## 📊 Performance Comparison\n\n| Project Type       | Before | After | Reduction |\n| ------------------ | ------ | ----- | --------- |\n| Medium Vue Project | 245KB  | 73KB  | 70% ↓     |\n| React Application  | 180KB  | 54KB  | 68% ↓     |\n| Enterprise Project | 890KB  | 267KB | 72% ↓     |\n\n## �️ Debug Mode\n\nUse the `--debug` flag for detailed transformation information:\n\n```bash\ntounocss playground --debug\n```\n\nDebug output includes:\n\n- 📝 File processing progress\n- 🎯 CSS rule transformation details\n- ⚡ Performance statistics\n- 🔍 Conflict resolution process\n\n## 🚁 Ecosystem\n\n- [transform-to-unocss-core](https://github.com/Simon-He95/transform-to-unocss-core) - Browser-side CSS transformation core\n- [To UnoCSS](https://github.com/Simon-He95/unot) - VS Code extension\n- [transformToTailwindcss](https://github.com/Simon-He95/transformToTailwindcss) - Tailwind CSS transformer\n\n## 🤝 Contributing\n\nWe welcome all forms of contributions! Please check the [Contributing Guide](./CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/Simon-He95/transform-to-unocss.git\n\n# Install dependencies\npnpm install\n\n# Development mode\npnpm dev\n\n# Run tests\npnpm test\n\n# Build project\npnpm build\n```\n\n## 📸 Visual Transformation\n\n### Before Transformation\n\n![before](/assets/before.png)\n\n### After Transformation\n\n![after](/assets/after.png)\n\n**Result**: 70% smaller CSS bundle, better performance, and cleaner code! 🚀\n\n## 🤝 Contributing\n\nWe welcome all forms of contributions! Please check the [Contributing Guide](./CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/Simon-He95/transform-to-unocss.git\n\n# Install dependencies\npnpm install\n\n# Development mode\npnpm dev\n\n# Run tests\npnpm test\n\n# Build project\npnpm build\n```\n\nWe 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.\n\n## 💖 Support the Project\n\nIf this project helped you, please consider:\n\n- ⭐ **Star this repository**\n- 🐛 **Report issues**\n- 🔧 **Contribute code**\n- ☕ **[Buy me a coffee](https://github.com/Simon-He95/sponsor)**\n\nYour support keeps this project alive and improving! 🙏\n\n## 📄 License\n\n[MIT](./LICENSE) © 2023-present [Simon He](https://github.com/Simon-He95)\n\n---\n\n\u003cp align=\"center\"\u003e\nMade with ❤️ by \u003ca href=\"https://github.com/Simon-He95\"\u003eSimon He\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimon-He95%2FtransformToUnoCSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimon-He95%2FtransformToUnoCSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimon-He95%2FtransformToUnoCSS/lists"}