vite-plugin-unocss-watcher

A simple Vite plugin to reload UnoCSS config when files changed.

Sometimes you want to reload UnoCSS config when files changed. For example, if you import a file that contains UnoCSS shortcuts, like this:

// my-shortcuts.js
export const shortcuts = {
  btn: 'p-2 bg-blue-500 rounded text-white',
  // ...
}

// unocss.config.js
import { shortcuts } from './my-shortcuts.js'

export default {
  shortcuts,
}

You want to reload UnoCSS config when my-shortcuts.js changed. This plugin will help you to do that.

Installation

npm install vite-plugin-unocss-watcher

Usage

  // vite.config.ts
  import UnoCSS from 'unocss/vite'
+ import { unocssWatcher } from 'vite-plugin-unocss-watcher'
  import { defineConfig } from 'vite'

  export default defineConfig({
    plugins: [
      UnoCSS(),
+     unocssWatcher(['./my-shortcuts.js']),
    ],
  })

You can pass { debug: true } to unocssWatcher to see more logs.

unocssWatcher(['./my-shortcuts.js'], { debug: true })

License

MIT