[sfc] css in scoped pseudo-element is not handled

[zyyv]

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9Us1OwzAMfhUTDgU0rUJwGgUJEBJwAMRAXHKpWncrS+MoTmGo6rvjZOLnMO0Wfz/OZ8uDunRu+tGjmqmCK9+6AIyhdxfatp0jH2AAjw2M0HjqIBNppq22FVkO0PECziN/kN2iMQRv5E29lx1qW+SbdtJIioCdM2VAqQCK5TFUpmQ+16oh0upiGFKrcSzy5bFoivyfQUoOXwaBK3JYC5Ifwaul6/kcgi8tN9RhPYGakG0W4JP8CuAo13a/dA5mLR9M5ZvDIf5dkSE/k8j1mbZjbC7NJPUKmtZicgmQjNG0xZM0Ml2MJFnURAUJZpt2MX1nsrLIZNKqos61Bv2jC61sS6sZJCZypSzr8z5hwfc4+cGrJVarLfg7ryOm1ZNHRv+BWv1yofQLDBv6Zv6Aa3n/kh3VvRH1DvIZmUwfM25kV72tJfY/XUp7l86htYsXvlkHtPwzVAwalWPSayUncr1j9L+4J9PT5JOlqvEbS9HXeQ==

Steps to reproduce

• Open playground, see not work
• And toggle another css block, see work fine

What is expected?

Expected output

#app :is(.foo[data-v-xxx]){
  color: red;
}

or

#app[data-v-app] :is(.foo){
  color: red;
}

What is actually happening?

When vue style scoped is used with UnoCSS, and

presetUno({
  important: '#app',
}) 

is enabled, the unocss transformer will add a default prefix of #app to the css. Since #app is a special keyword, vue does not handle it specially. In style scoped mode, the elements in the pseudo-element are not hashed.

There is a minimal reproduction with UnoCSS https://stackblitz.com/edit/vitejs-vite-yzjmbw?file=src%2FApp.vue

System Info

No response

Any additional comments?

No response

[edison1105]

a workaround

:is(.foo){
  color: red;
}