Setting the file. One moment.
Subchapter 10.20
references/transformer-attributify-jsx.mdMarkdown2 KBView on GitHub
Fixes valueless attributify mode in JSX where <div foo> becomes <div foo={true}>.
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.
import {
defineConfig,
presetAttributify,
transformerAttributifyJsx
} from 'unocss'
export default defineConfig({
presets: [
presetAttributify(),
],
transformers: [
transformerAttributifyJsx(),
],
})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.
transformerAttributifyJsx({
// Only transform specific attributes
// Default: transforms all that match attributify patterns
blocklist: ['text', 'font'],
})Required when using:
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" />// 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(),
],
})Same as React, use @preact/preset-vite or @prefresh/vite.
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'
export default {
plugins: [
UnoCSS(),
solidPlugin(),
],
}Add type declarations:
// shims.d.ts
import type { AttributifyAttributes } from '@unocss/preset-attributify'
declare module 'react' {
interface HTMLAttributes<T> extends AttributifyAttributes {}
}