UnoCSS transformer for @apply
directive
npm i -D @unocss/transformer-directives
// uno.config.js
import { defineConfig } from 'unocss'
import transformerDirective from '@unocss/transformer-directives'
export default defineConfig({
// ...
transformers: [
transformerDirective(),
],
})
.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.
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
})
MIT License © 2022-PRESENT hannoeru