属性化 JSX 转换器

支持在 JSX/TSX 中使用 无值属性化：@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

uno.config.ts

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

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

::: 提示 该转换器已包含在 unocss 包中，你也可以直接从那里导入：

import { transformerAttributifyJsx } from 'unocss'

:::

注意事项

WARNING

其规则与 属性化预设 几乎相同，但有几点需要注意。

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