feat(attributify-jsx): new transformer transformer-attributify-jsx

[SnowingFox]

provide a transoformer transformer-attributify-jsx to fix #1238,

for example

<div text-5xl animate-bounce>
  unocss
</div>

Will be compiled to:

<div text-5xl="" animate-bounce="">
    unocss
</div>

fix #1333

[netlify]

❌ Deploy Preview for unocss failed.

Name	Link
🔨 Latest commit	35c45fc
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/62e3e55a9f71d50008a6f1b0

[SnowingFox]

@antfu Sorry to bother you, i fix these problems a few days ago, but after that, there was no response, is still has other problems?

[antfu]

Test fails

[SnowingFox]

I only find two test errors, first is the cli.test.ts throw an timeout error, so i reset the testTimeout value and test it again, but it still throw an error

I don't know how it could happen. But i notice that

and after insert await it work well.

[antfu]

....WAIT, have you tried this?

unocss/packages/preset-attributify/src/types.ts

Line 47 in 184b7d8

trueToNonValued?: boolean

[SnowingFox]

....WAIT, have you tried this?

unocss/packages/preset-attributify/src/types.ts

Line 47 in 184b7d8

trueToNonValued?: boolean

I tried this, it can't work in react, but can work in solidjs even without this property

react-demo
solidjs-demo

I think this is limit of react

[SnowingFox]

Actually, i tried hover:2xl in solidjs, it can work well, but cannot work with the other two
https://stackblitz.com/edit/vitejs-vite-mespfk?file=src%2Fmain.jsx,src%2FApp.jsx

hover:2xl may just only cannot work with react