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

• transform-to-unocss-core - Provides the ability to convert css to unocss on the browser side

Before

After

☕

buy me a cup of coffee

License

MIT