Skip to content

Simon-He95/transformToUnoCSS

Repository files navigation

to unocss

English | 简体中文

This library is to convert css to unocss. unocss can reuse styles better to reduce the packaging volume, which can be converted as a performance optimization method, and it can also make it easier for old projects to upgrade to unocss. If you use tailwindcss, you can try transformToTailwindcss.

📦 Install

  npm i -g transform-to-unocss

🦄 cli

  ## command: tounocss + directory
  tounocss playground

  ## revoke: tounocss + directory + --revert
  tounocss payground --revert

🌈 Usage

Vite
// vite.config.ts
import { viteTransformToUnocss } from 'transform-to-unocss'
export default defineConfig({
  plugins: [viteTransformToUnocss(/* options */)],
})

Rollup
// rollup.config.js
import { resolve } from 'node:path'
import { rollupTransformToUnocss } from 'transform-to-unocss'
export default {
  plugins: [rollupTransformToUnocss(/* options */)],
}

Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('transform-to-unocss').webpackTransformToUnocss({
      /* options */
    }),
  ],
}

Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('transform-to-unocss').webpackTransformToUnocss({
        /* options */
      }),
    ],
  },
}

Esbuild
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildTransformToUnocss } from 'transform-to-unocss'

build({
  plugins: [esbuildTransformToUnocss(/* options */)],
})

⭐ Feature

  • support css in '.html' | '.tsx' | '.vue' | '.astro' | '.svelte' to unocss
  • support sass less stylus convert
  • support vite | rollup | webpack | vue-cli | esbuild
  • vscode extension To Unocss

🚁 More

Before

before

After

after

buy me a cup of coffee

License

MIT