GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing unocss.dev — Compile class transformer

Compile class transformer

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

Installation

pnpmyarnnpmbun

bash

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

bash

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

bash

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

bash

bun add -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:

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

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

Compile class transformer ​

Installation ​

Usage ​

Options ​

Tooling ​

ESLint ​

License ​

Compile class transformer

Installation

Usage

Options

Tooling

ESLint

License