React如果children中直接跟随文本的情况下会出现 Warning: Received true for a non-boolean attribute

[cqiang1993]

UnoCSS version

0.59.4

Describe the bug

环境

vite: 5.2.0
react: 18.2.0
unocss: 0.59.4
typescript: 5.2.2

配置

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import UnoCSS from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react(), UnoCSS()],
});

uno.config.ts

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

export default defineConfig({
	theme: {},
	shortcuts: {
		// 这里可以放全局公共样式
		"h-btn": "h-48px w-100% bg-#5C33BE b-none text-white rounded-8px",
		"wh-full": "w-full h-full",
	},
	safelist: [],
	presets: [
		presetUno(),
		presetAttributify(),
		presetIcons({
			extraProperties: {
				display: "inline-block",
				"vertical-align": "middle",
			},
		}),
		presetTypography(),
	],
	transformers: [transformerAttributifyJsx()],
});

shimi.d.ts

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as React from "react";

declare module "react" {
	interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
		flex?: boolean;
		relative?: boolean;
		text?: string;
		grid?: boolean;
		before?: string;
		after?: string;
		shadow?: boolean;
		w?: string;
		h?: string;
		bg?: string;
		rounded?: string;
		fixed?: boolean;
		b?: string;
		z?: string;
		block?: boolean;
		"focus:shadow"?: boolean;
	}
	interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
		w?: string;
		h?: string;
	}
}

页面代码

main.tsx

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import 'virtual:uno.css'
import React from 'react'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>   
)

index.css

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#root {
  width: 100%;
  height: 100%;
}

App.tsx

 const App: React.FC = () => {
  return (
    <div wh-full bg-gray-300>
      123
    </div>
  )
}
export default App

现象

当前的这个代码，导致的结果是没有样式并且浏览器提示警告
react-dom_client.js?v=05878dec:519 Warning: Received true for a non-boolean attribute wh-full.
react-dom_client.js?v=05878dec:519 Warning: Received true for a non-boolean attribute bg-gray-300.

但是如果我将App.tsx的代码改成

 const App: React.FC = () => {
  return (
    <div wh-full bg-gray-300 
    >
      {/* 这里写你的代码 
        <div></div>
      */}
      123
    </div>
  )
}
export default App

或者

 const App: React.FC = () => {
  return (
    <div wh-full bg-gray-300 
    >
      <div></div>
    </div>
  )
}
export default App

样式是正常且浏览器不报错

但是如果将App.tsx的代码改为

 const App: React.FC = () => {
  return (
    <div wh-full bg-gray-300 
    >
      <div>123</div>
    </div>
  )
}
export default App

之后又会提示异常

Reproduction

代码已经在上面提供了
通过pnpm create vite创建的React的基础脚手架

System Info

环境

vite: 5.2.0
react: 18.2.0
unocss: 0.59.4
typescript: 5.2.2

pnpm create vite 选则React

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cqiang1993]

标题描述上可能还是有误，应该是说，如果某个标签的第一个子标签存在纯文本就会导致样式丢失
例如：

<div bg-gray-300>
123
</div>

or 

<div bg-gray-300>
 <div>
  123
 </div>
</div>

or

<div bg-gray-300>
 <div>
  <div>
   123
  </div>
 </div>
</div>
....

以此类推的，bg-gray-300的样式都会失效

但是如果是

<div bg-gray-300>
<div></div>
</div>

or

<div bg-gray-300>
  <div></div>
  <div>123</div>
</div>
....

保留了第一个空白的div之后，bg-gray-300的样式就能正常使用了

[Simon-He95]

Can you directly provide a reproducible demo?

[cqiang1993]

能直接提供一个可复现的demo吗？

demo.tar.gz

[Simon-He95]

The current regularization capabilities are limited. In order to better achieve the expected results, I think it may be necessary to have certain writing specifications, such as 1. We should try to avoid users writing template as an attribute, and instead propose to introduce it from outside. 2. If When writing, try to let users write unocss attributes in advance. Even if < is matched, the previous attributes can be parsed.
<div label={ <b w10>1</b> }
Because regular expressions cannot achieve such detailed matching, we need to make some restrictions to reduce encountering more boundary conditions and irregular writing.
Do you have any ideas? @antfu