Compile class transformer

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

Installation

pnpm

pnpm add -D @unocss/transformer-compile-class

yarn

yarn add -D @unocss/transformer-compile-class

npm

npm install -D @unocss/transformer-compile-class

uno.config.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:

import { transformerCompileClass } from 'unocss'

Usage

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;
  }
}

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:

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

License

• MIT License © 2021-PRESENT Anthony Fu