Compile class transformer

Biên dịch nhóm các lớp thành một lớp. Được lấy cảm hứng từ chế độ biên dịch của Windi CSS và issue #948 bởi @UltraCakeBakery.

Cài đặt

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

Preset này được bao gồm trong gói unocss, bạn cũng có thể import nó từ đó:

import { transformerCompileClass } from 'unocss'

Sử dụng

Thêm :uno: vào đầu các chuỗi lớp để đánh dấu chúng để biên dịch.

Ví dụ:

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

Sẽ được biên dịch thành:

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

Tùy chọn

Bạn có thể cấu hình chuỗi kích hoạt và tiền tố cho lớp biên dịch với các tùy chọn. Tham khảo các loại để biết chi tiết.

Công cụ

ESLint

Có một quy tắc eslint để thực thi transformer biên dịch lớp trên toàn bộ dự án: @unocss/enforce-class-compile

Sử dụng:

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

Giấy phép

• MIT License © 2021-PRESENT Anthony Fu