wheatjs/unocss-directives

CSS Directive support for UnoCss

Unocss Directives

Enables CSS directives in Unocss

Install

npm install --save-dev unocss-directives

// vite.config.ts
import Unocss from 'unocss/vite'
import UnocssDirectives from 'unocss/directives'

export default defineConfig({
  plugins: [
    // Unocss({ plugins: [...] }), Replace with UnocssDirectives
    UnocssDirectives({ plugins: [...] }),
  ]
})

Features

Will automatically convert valid Unocss class names to valid css when used with @apply

The following

html {
  @apply p-4;
}

will be converted to

html {
  padding: 1rem;
}

TODO

[ ] Variants

License

MIT License © 2021-PRESENT Jacob Clevenger