@unocss/transformer-compile-class

Compile group of classes into one class. Inspired by WindiCSS's compilation mode and #948 by @UltraCakeBakery.

Install

1npm i -D @unocss/transformer-compile-class

1import transformerCompileClass from '@unocss/transformer-compile-class'
2// uno.config.ts
3import { defineConfig } from 'unocss'
4
5export default defineConfig({
6  // ...
7  transformers: [
8    transformerCompileClass(),
9  ],
10})

Usage

At the begin of your class strings, add :uno: at the begin of the strings to mark them for compilation. For example:

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

Will be compiled to:

1<div class="uno-qlmcrp">
2  <div class="uno-0qw2gr" />
3</div>

1.uno-qlmcrp {
2  text-align: center;
3}
4.uno-0qw2gr {
5  font-size: 0.875rem;
6  line-height: 1.25rem;
7  font-weight: 700;
8}
9.uno-0qw2gr:hover {
10  --un-text-opacity: 1;
11  color: rgb(248 113 113 / var(--un-text-opacity));
12}
13@media (min-width: 640px) {
14  .uno-qlmcrp {
15    text-align: left;
16  }
17}

Options

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

License

MIT License © 2021-PRESENT Anthony Fu