agent-skills/skills/unocss/references/transformer-attributify-jsx.md

name, description

name	description
transformer-attributify-jsx	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:

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

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:

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

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:

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

// vite.config.ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(), // Must be before React
    React(),
  ],
}

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

import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS(),
    solidPlugin(),
  ],
}

TypeScript Support

Add type declarations:

// shims.d.ts
import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}