Attributify JSX 변환기

JSX/TSX에서 값이 없는 attributify 지원: @unocss/transformer-attributify-jsx.

소개

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

다음과 같이 변환됩니다:

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

이 변환기 없이는 JSX가 값이 없는 속성을 불린 속성으로 취급합니다.

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

설치

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

이 프리셋은 unocss 패키지에 포함되어 있으며, 다음과 같이 가져올 수도 있습니다:

import { transformerAttributifyJsx } from 'unocss'

주의사항

WARNING

규칙은 Attributify 프리셋과 거의 동일하지만 몇 가지 주의사항이 있습니다.

<div translate-x-100% />
<!-- `%`로 끝날 수 없습니다 -->

<div translate-x-[100px] />
<!-- `[` 또는 `]`를 포함할 수 없습니다 -->

대신 값이 있는 속성을 사용하는 것이 좋습니다:

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

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

차단 목록

이 변환기는 유효한 UnoCSS 유틸리티인 속성만 변환합니다. blocklist를 사용하여 일부 속성이 변환되지 않도록 우회할 수도 있습니다.

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

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

다음과 같이 컴파일됩니다:

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