UnoCSS transformer for @apply
、@screen
and theme()
directive
npm i -D @unocss/transformer-directives
import transformerDirectives from '@unocss/transformer-directives'
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...
transformers: [
transformerDirectives(),
],
})
.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;
}
To be compatible with vanilla CSS, you can use CSS custom properties 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 a few alias, you can configure or disable it via:
transformerDirectives({
// the defaults
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
// or disable with:
// applyVariable: false
})
The @screen
directive allows you to create media queries that reference your breakpoints by name comes from theme.breakpoints
.
.grid {
--uno: grid grid-cols-2;
}
@screen xs {
.grid {
--uno: grid-cols-1;
}
}
@screen sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
...
Will be transformed to:
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ... */
@screen
also supports lt
、at
variants
.grid {
--uno: grid grid-cols-2;
}
@screen lt-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen lt-sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
Will be transformed to:
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (max-width: 639.9px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ... */
.grid {
--uno: grid grid-cols-2;
}
@screen at-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen at-xl {
.grid {
--uno: grid-cols-3;
}
}
@screen at-xxl {
.grid {
--uno: grid-cols-4;
}
}
/* ... */
Will be transformed to:
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
.grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ... */
Use the theme()
function to access your theme config values using dot notation.
.btn-blue {
background-color: theme('colors.blue.500');
}
Will be compiled to:
.btn-blue {
background-color: #3b82f6;
}
MIT License © 2022-PRESENT hannoeru