Skip to content

Compile class transformer

Compile group of classes into one class. Inspired by the compilation mode of Windi CSS and issue #948 by @UltraCakeBakery.

Installation

bash
pnpm add -D @unocss/transformer-compile-class
bash
yarn add -D @unocss/transformer-compile-class
bash
npm install -D @unocss/transformer-compile-class
uno.config.ts
ts
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:

ts
import { transformerCompileClass } from 'unocss'

Usage

Add :uno: at the beginning of the class strings to mark them for compilation.

For example:

html
<div class=":uno: text-center sm:text-left">
  <div class=":uno: text-sm font-bold hover:text-red"/>
</div>

Will be compiled to:

html
<div class="uno-qlmcrp">
  <div class="uno-0qw2gr"/>
</div>
css
.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;
  }
}

Options

You can config the trigger string and prefix for compile class with the options. Refer to the types for details.

Tooling

ESLint

There is an eslint rule for enforcing the class compile transformer across the whole project: @unocss/enforce-class-compile

Usage:

json
{
  "plugins": ["@unocss"],
  "rules": {
    "@unocss/enforce-class-compile": "warn"
  }
}

License

Released under the MIT License.