157 lines
2.5 KiB
Markdown
157 lines
2.5 KiB
Markdown
---
|
|
name: transformer-attributify-jsx
|
|
description: Support valueless attributify in JSX/TSX
|
|
---
|
|
|
|
# Transformer Attributify JSX
|
|
|
|
Fixes valueless attributify mode in JSX where `<div foo>` becomes `<div foo={true}>`.
|
|
|
|
## The Problem
|
|
|
|
In JSX, valueless attributes are transformed:
|
|
|
|
```jsx
|
|
// You write
|
|
<div m-2 rounded text-teal-400 />
|
|
|
|
// JSX compiles to
|
|
<div m-2={true} rounded={true} text-teal-400={true} />
|
|
```
|
|
|
|
The `={true}` breaks UnoCSS attributify detection.
|
|
|
|
## Installation
|
|
|
|
```ts
|
|
import {
|
|
defineConfig,
|
|
presetAttributify,
|
|
transformerAttributifyJsx
|
|
} from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetAttributify(),
|
|
],
|
|
transformers: [
|
|
transformerAttributifyJsx(),
|
|
],
|
|
})
|
|
```
|
|
|
|
## How It Works
|
|
|
|
The transformer converts JSX boolean attributes back to strings:
|
|
|
|
```jsx
|
|
// Input (after JSX compilation)
|
|
<div m-2={true} rounded={true} />
|
|
|
|
// Output (transformed)
|
|
<div m-2="" rounded="" />
|
|
```
|
|
|
|
Now UnoCSS can properly extract the attributify classes.
|
|
|
|
## Options
|
|
|
|
```ts
|
|
transformerAttributifyJsx({
|
|
// Only transform specific attributes
|
|
// Default: transforms all that match attributify patterns
|
|
blocklist: ['text', 'font'],
|
|
})
|
|
```
|
|
|
|
## When to Use
|
|
|
|
Required when using:
|
|
- React
|
|
- Preact
|
|
- Solid
|
|
- Any JSX-based framework
|
|
|
|
With valueless attributify syntax:
|
|
|
|
```jsx
|
|
// This needs the transformer
|
|
<div flex items-center gap-4 />
|
|
|
|
// This works without transformer (has values)
|
|
<div flex="~" items="center" gap="4" />
|
|
```
|
|
|
|
## Framework Setup
|
|
|
|
### React
|
|
|
|
```ts
|
|
// vite.config.ts
|
|
import React from '@vitejs/plugin-react'
|
|
import UnoCSS from 'unocss/vite'
|
|
|
|
export default {
|
|
plugins: [
|
|
UnoCSS(), // Must be before React
|
|
React(),
|
|
],
|
|
}
|
|
```
|
|
|
|
```ts
|
|
// uno.config.ts
|
|
import {
|
|
defineConfig,
|
|
presetAttributify,
|
|
presetWind3,
|
|
transformerAttributifyJsx
|
|
} from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetWind3(),
|
|
presetAttributify(),
|
|
],
|
|
transformers: [
|
|
transformerAttributifyJsx(),
|
|
],
|
|
})
|
|
```
|
|
|
|
### Preact
|
|
|
|
Same as React, use `@preact/preset-vite` or `@prefresh/vite`.
|
|
|
|
### Solid
|
|
|
|
```ts
|
|
import UnoCSS from 'unocss/vite'
|
|
import solidPlugin from 'vite-plugin-solid'
|
|
|
|
export default {
|
|
plugins: [
|
|
UnoCSS(),
|
|
solidPlugin(),
|
|
],
|
|
}
|
|
```
|
|
|
|
## TypeScript Support
|
|
|
|
Add type declarations:
|
|
|
|
```ts
|
|
// shims.d.ts
|
|
import type { AttributifyAttributes } from '@unocss/preset-attributify'
|
|
|
|
declare module 'react' {
|
|
interface HTMLAttributes<T> extends AttributifyAttributes {}
|
|
}
|
|
```
|
|
|
|
<!--
|
|
Source references:
|
|
- https://unocss.dev/transformers/attributify-jsx
|
|
-->
|