Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.4 KiB

Raw Blame History

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

2.4 KiB Raw Blame History