https://github.com/simon-he95/transformtounocss

transform css to UnoCSS | 将 css 转换成 UnoCss 的语法
https://github.com/simon-he95/transformtounocss

cli css esbuild rollup transform-to-unocss transform-to-unocss-core unocss vite vue-cli webpack

Last synced: 10 days ago
JSON representation

transform css to UnoCSS | 将 css 转换成 UnoCss 的语法

• Host: GitHub
• URL: https://github.com/simon-he95/transformtounocss
• Owner: Simon-He95
• License: mit
• Created: 2023-02-22T09:38:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-20T14:28:00.000Z (3 months ago)
• Last Synced: 2024-09-21T09:52:41.412Z (about 2 months ago)
• Topics: cli, css, esbuild, rollup, transform-to-unocss, transform-to-unocss-core, unocss, vite, vue-cli, webpack
• Language: TypeScript
• Homepage: https://to-unocss.netlify.app/
• Size: 27.6 MB
• Stars: 123
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        






 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

```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

- 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](https://github.com/Simon-He95/unot)

## 🚁 More

- [transform-to-unocss-core](https://github.com/Simon-He95/transform-to-unocss-core) - Provides the ability to convert css to unocss on the browser side

## Before

![before](/assets/before.png)

## After

![after](/assets/after.png)

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)