@unocss/transformer-directives

UnoCSS transformer for @apply directive

Install

npm i -D @unocss/transformer-directives

import Unocss from 'unocss/vite'
import transformerDirective from '@unocss/transformer-directives'

Unocss({
  transformers: [
    transformerDirective(),
  ],
})

Usage

.custom-div {
  @apply text-center my-0 font-medium;
}

Will be transformed to:

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

Currently only @apply is supported.

CSS Variable Style

To be compatible with vanilla CSS, you can use CSS Variables to replace the @apply directive.

.custom-div {
  --at-apply: text-center my-0 font-medium;
}

To use rules with :, you will need to quote the value

.custom-div {
  --at-apply: "hover:text-red";
}

This feature is enabled by default (with prefix --at-), can you configure it or disable it via:

transformerDirective({
  varStyle: '--my-at-',
  // or disable with:
  // varStyle: false
})

License

MIT License © 2022-PRESENT hannoeru