English | 简体中文
这个库可以把 _css_、_inline-style_ 转成 UnoCSS 的。 [UnoCSS](https://github.com/unocss/unocss) 可以更好的复用样式减少打包体积，可以转化为一种性能优化的方式，也可以让老项目更容易升级到 UnoCSS。如果你是 [tailwindcss](https://tailwindcss.com/) 的使用者，可以尝试一下 transformToTailwindcss.
## 📦 Install
```
npm i -g transform-to-unocss
```
## 🦄 cli
```
## command: tounocss + directory
tounocss playground
## revoke: tounocss + directory + --revert
tounocss payground --revert
```
## 🌈 Usage
Vite
```ts
// vite.config.ts
import { viteTransformToUnocss } from 'transform-to-unocss'
export default defineConfig({
plugins: [viteTransformToUnocss(/* options */)],
})
```
Rollup
```ts
// rollup.config.js
import { resolve } from 'node:path'
import { rollupTransformToUnocss } from 'transform-to-unocss'
export default {
plugins: [rollupTransformToUnocss(/* options */)],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('transform-to-unocss').webpackTransformToUnocss({
/* options */
}),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('transform-to-unocss').webpackTransformToUnocss({
/* options */
}),
],
},
}
```
Esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildTransformToUnocss } from 'transform-to-unocss'
build({
plugins: [esbuildTransformToUnocss(/* options */)],
})
```
## ⭐ Feature
- 支持 css 在 '.html' | '.tsx' | '.vue' | '.astro' | '.svelte' 转换到 unocss
- 支持 sass less stylus 类型的转换
- 支持 vite | rollup | webpack | vue-cli | esbuild 作为插件使用
- vscode 扩展 [To Unocss](https://github.com/Simon-He95/unot)
## 🚁 More
- [transform-to-unocss-core](https://github.com/Simon-He95/transform-to-unocss-core) - 提供浏览器端转换 css 为 unocss 的能力
## 编译前
## 编译后
## :coffee:
[请我喝一杯咖啡](https://github.com/Simon-He95/sponsor)
## License
[MIT](./license)