Arbitrary variant selector syntax not working

Hi, thank you for your work on UnoCSS. I am working with Solid and I am trying to use UnoCSS’s arbitrary selector feature which works in the playground.

Given the following code:

function App() {
  return <>
    <div class="[color:red]">Hello, world!</div>
    <div class="[&>*]:[color:red]">
      <div>Hello, world!</div>
      <div>Hello, world!</div>
      <div>Hello, world!</div>
      <div>Hello, world!</div>
    </div>
  </>
}

I expected all lines to be red but I’m only seeing the first line render as red.

Here’s a MVP repro: https://github.com/zaydek/solid-unocss-arbitrary-variant-bug.

Here is the playground version using the same code and config (I originally copied the config from the playground): https://uno.antfu.me/play/?html=DwEwlgbgBAxgNgQwM5ILwCIDaMD2ccBOAXAQKYgC66AfABKlz4A0UA7oXCAITAD04EagChQkWIhQZMAMmoAqCkWx5CJclWFQoowfUY4W7Apx79Im7QLoNmbDtz5WhWndf2H7ppy6t7bRk0dzETNBIA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAqrhJQL5xZQQhwDkAV1YBjOnX5IkGAB6RY6bAENBAG3iYc%2BIiWCkAFMlQ16jOgC44AbSrHaDZq30BKSqgC6Sds6RA&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g.

Is there something I’m doing wrong? Thank you.

[zaydek]

Alright I’m gonna close this issue since this is working. If future Solid users run into this, you can simply use:

import { defineConfig } from "vite"
import solid from "vite-plugin-solid"
import unocss from "unocss/vite"

export default defineConfig({
  plugins: [
    unocss(),
    solid(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
})

Thanks @chris-zhu!

[zaydek]

@chris-zhu It looks like it’s the order of the plugins. By calling { ...solidPlugin(), enforce: "post" } it works. I did try to repro the repo you linked but I got the same results until I used enforce. I also tried pre on UnoCSS but got the error linked here: https://github.com/solidjs/solid/issues/1169#issuecomment-1221322246.

export default defineConfig({
  plugins: [
    {
      ...solidPlugin(),
      enforce: "post",
    },
    // ...
  ],
  // ...
})

Is there any foreseeable problem using enforce to get plugins to work together? Thank you.