docs/transformers/compile-class.md
Compile group of classes into one class. Inspired by the compilation mode of Windi CSS and issue #948 by @UltraCakeBakery.
::: code-group
pnpm add -D @unocss/transformer-compile-class
yarn add -D @unocss/transformer-compile-class
npm install -D @unocss/transformer-compile-class
bun add -D @unocss/transformer-compile-class
:::
import transformerCompileClass from '@unocss/transformer-compile-class'
import { defineConfig } from 'unocss'
export default defineConfig({
// ...
transformers: [
transformerCompileClass(),
],
})
::: tip
This preset is included in the unocss package, you can also import it from there:
import { transformerCompileClass } from 'unocss'
:::
Add :uno: at the beginning of the class strings to mark them for compilation.
For example:
<div class=":uno: text-center sm:text-left">
<div class=":uno: text-sm font-bold hover:text-red" />
</div>
Will be compiled to:
<div class="uno-qlmcrp">
<div class="uno-0qw2gr" />
</div>
.uno-qlmcrp {
text-align: center;
}
.uno-0qw2gr {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
}
.uno-0qw2gr:hover {
--un-text-opacity: 1;
color: rgb(248 113 113 / var(--un-text-opacity));
}
@media (min-width: 640px) {
.uno-qlmcrp {
text-align: left;
}
}
You can config the trigger string and prefix for compile class with the options. Refer to the types for details.
There is an eslint rule for enforcing the class compile transformer across the whole project: @unocss/enforce-class-compile
Usage:
{
"plugins": ["@unocss"],
"rules": {
"@unocss/enforce-class-compile": "warn"
}
}