Transformer kompilacji klas

Kompiluj grupę klas w jedną klasę. Zainspirowany przez tryb kompilacji Windi CSS i issue #948 przez @UltraCakeBakery.

Instalacja

pnpm

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

yarn

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

npm

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

bun

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

import transformerCompileClass from '@unocss/transformer-compile-class'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

TIP

Ten preset jest zawarty w pakiecie unocss, możesz go również stamtąd zaimportować:

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