UnoCSS version

65.4.0

Describe the bug

When using UnoCSS with Attributify mode, certain variant states containing custom properties do not generate the expected CSS. In this example:

<div class="hover:[--a:pink]" bg="hover:[--b:pink]">
  Hello World
</div>

the second hover rule (coming from bg="hover:[--b:pink]") is missing the generated class. Only the .hover\:\[--a\:pink\]:hover { --a: pink; } rule is produced.

I am also expecting something like (not sure if the CSS is correct, but I hope you get the idea):

[bg~="[--b\:pink\"]:hover{--b:pink;}

Reproduction

https://unocss.dev/play/#html=DwEwlgbgBAxgNgQwM5ILwCIAWB7CBTAJwC4BtAWjISIAcwA7AawF10oAjAcwx32PLLY16zdAD4AUAAk8cONigB1bATghxwAPTgIooA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAKq4IlAL5wsUCCDgByLpIDGdOsqRIMAD0ix02AIZcANvEw58REsFIAKZMNoMYdAFxwA2lTdRGAkIJwBKIVRqd0YWNk4ePn5wyIBdGTCkIA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA&version=65.4.0

System Info

WSL ubuntu
node 22.6.0
Vue 3

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.