Attributify JSX transformer

Hỗ trợ attributify không giá trị trong JSX/TSX: @unocss/transformer-attributify-jsx.

Trình bày

export function Component() {
  return (
    <div text-red text-center text-5xl animate-bounce>
      unocss
    </div>
  )
}

Sẽ được biến đổi thành:

export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}

Không có transformer này, JSX coi các thuộc tính không giá trị là các thuộc tính boolean.

export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}

Cài đặt

pnpm

pnpm add -D @unocss/transformer-attributify-jsx

yarn

yarn add -D @unocss/transformer-attributify-jsx

npm

npm install -D @unocss/transformer-attributify-jsx

bun

bun add -D @unocss/transformer-attributify-jsx

import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'

export default defineConfig({
  // ...
  presets: [
    // ...
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(), // <--
  ],
})

TIP

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

import { transformerAttributifyJsx } from 'unocss'

Lưu ý

WARNING

Quy tắc gần như giống với quy tắc của Attributify preset, nhưng có một số lưu ý.

<div translate-x-100% />
<!-- cannot end with `%` -->

<div translate-x-[100px] />
<!-- cannot contain `[` or `]` -->

Thay vào đó, bạn có thể muốn dùng các thuộc tính có giá trị:

<div translate="x-100%" />

<div translate="x-[100px]" />

Danh sách chặn

Transformer này sẽ chỉ biến đổi các thuộc tính là các tiện ích UnoCSS hợp lệ. Bạn cũng có thể blocklist bỏ qua một số thuộc tính không được biến đổi.

transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})

<div text-red text-center text-5xl animate-bounce>
  unocss
</div>

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

<div text-red text-center text-5xl animate-bounce="">unocss</div>