Uno CSS: Warning: Received `true` for a non-boolean attribute `flex`.

UnoCSSの適用で詰まったとこのエラー対処のメモです。
あとで見たら思いっきり公式ドキュメントに書いてありましたが。

環境

Vite
React
TypeScript

経緯

これ見てUnoCSSてなんかいいなと思って軽い気持ちで触ってみようとインストールしました。

UnoCSSをインストール
参考: https://unocss.dev/integrations/vite

yarn add -D unocss

設定

vite.config.ts

+ import UnoCSS from 'unocss/vite'
+ import React from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
+    UnoCSS(),
+    React()
  ],
})

uno.config.ts(新規作成)

+ import { defineConfig } from 'unocss'
+ 
+ export default defineConfig({
+   // ...UnoCSS options
+ })

main.tsxに下記を追加

import 'virtual:uno.css'

動画見てカッコ良さそうだったから
@unocss/preset-attributify　を追加した。

yarn add -D @unocss/preset-uno
yarn add -D @unocss/preset-attributify

参考: https://unocss.dev/presets/attributify

uno.config.ts

import {
  defineConfig,
+  presetAttributify,
+  presetUno,
} from "unocss";

export default defineConfig({
  presets: [
+    presetAttributify(),
+    presetUno()
  ],
})

TypeScriptで属性が解釈できなくてエラー

Typescript errors: Property xxx does not exist on type
的なの

参考: https://github.com/unocss/unocss/issues/742
を見て、

shims.d.ts (新規作成)

+ import type { AttributifyAttributes } from '@unocss/preset-attributify'
+ 
+ declare module 'react' {
+   interface HTMLAttributes<T> extends AttributifyAttributes {}
+ }

tsconfig.json

    (略)
    "include": [
             "src", 
             "images.d.ts", 
+            "shims.d.ts"
         ],

公式にも書いてあった: https://unocss.dev/presets/attributify#react

で、エラー

JSXにflexを追加したら

Warning: Received true for a non-boolean attribute flex.

ちゃんとvite.configでReact()よりUnoCSS()を前に書いてるけどな...🤔
参考: https://unocss.dev/integrations/vite#frameworks

エラー対処

uno.config.ts

import {
  defineConfig,
  presetAttributify,
  presetUno,
+  transformerAttributifyJsx,
} from "unocss";

export default defineConfig({
  presets: [presetAttributify(), presetUno()],
+  transformers: [transformerAttributifyJsx()],
});

したら治った。

思いっきり　https://unocss.dev/presets/attributify#valueless-attributify に書いてあった。