UnoCSS 中文网

主题

属性 JSX 转换器 ​

🌐 Attributify JSX transformer

在 JSX/TSX 中支持 无值属性化：@unocss/transformer-attributify-jsx。

🌐 Support valueless attributify in JSX/TSX: @unocss/transformer-attributify-jsx.

介绍 ​

🌐 Presentation

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

将转变为：

🌐 Will be transformed to:

jsx
export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}
如果没有这个转换器，JSX 会将无值属性视为布尔属性。
jsx
export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}

安装 ​

🌐 Installation

bash
pnpm add -D @unocss/transformer-attributify-jsx
bash
yarn add -D @unocss/transformer-attributify-jsx
bash
npm install -D @unocss/transformer-attributify-jsx
bash
bun add -D @unocss/transformer-attributify-jsx
uno.config.ts
ts
import { defineConfig, presetAttributify } from 'unocss'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'

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

TIP

此预设包含在 unocss 包中，你也可以从那里导入它：

ts
import { transformerAttributifyJsx } from 'unocss'

注意事项 ​

🌐 Caveats

WARNING

规则几乎和Attributify preset的一样，但有几个注意事项。

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

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

相反，你可能想使用有值的属性：

🌐 Instead, you may want to use valued attributes instead:

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

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

黑名单 ​

🌐 Blocklist

这个转换器只会转换有效的 UnoCSS 工具类属性。你也可以使用 blocklist 来跳过某些属性的转换。

🌐 This transformer will only transform attributes that are valid UnoCSS utilities. You can also blocklist bypass some attributes from been transformed.

js
transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})
jsx
<div text-red text-center text-5xl animate-bounce>
  unocss
</div>

将被编译为：

🌐 Will be compiled to:

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