vue 3.4.21 :where() style result is not as expected

[Jerd0]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNp9ktFLwzAQxv+VcE8Koz7oU50DlT3og4r6GJAuPbtsaRKSSzcZ+9+9tGyWISuFXL7vd8d3pTu4977oEkIJ06iC9iQiUvIzaadXg8AlXwhbbyrCbNS6E8pUMd5J4FoCi3wOb27kox8wauJrpB+DIirnsWalyGN20i4qtW6CS7YuRcD6Vtp9xrNdbpYY8KJcug7D5Sm8MAnH9FelSHd4ijUB0Q4cr5QzzGACxDnst26KVXSWt+cmISQo13ptMLx60s5GCWUeJ/iRUBnjNs+9RiHh5KCrJar1P/oqbrMm4S1gxNChhKNHVWiQBnv+8YJbro9m6+pkmD5jvmN0JuWMA/bAq3LsEdenfWq9C6Rt8xnnW0IbD0vloJnc97wE/gUez6z+F/e6uOn7+HvC/hedHsU4

Steps to reproduce

visit link https://play.vuejs.org/#eNp9ktFLwzAQxv+VcE8Koz7oU50DlT3og4r6GJAuPbtsaRKSSzcZ+9+9tGyWISuFXL7vd8d3pTu4977oEkIJ06iC9iQiUvIzaadXg8AlXwhbbyrCbNS6E8pUMd5J4FoCi3wOb27kox8wauJrpB+DIirnsWalyGN20i4qtW6CS7YuRcD6Vtp9xrNdbpYY8KJcug7D5Sm8MAnH9FelSHd4ijUB0Q4cr5QzzGACxDnst26KVXSWt+cmISQo13ptMLx60s5GCWUeJ/iRUBnjNs+9RiHh5KCrJar1P/oqbrMm4S1gxNChhKNHVWiQBnv+8YJbro9m6+pkmD5jvmN0JuWMA/bAq3LsEdenfWq9C6Rt8xnnW0IbD0vloJnc97wE/gUez6z+F/e6uOn7+HvC/hedHsU4

1. hover div block,
2. the hover effect is not applied because between 3.3.4 and 3.4.21 -> vue changed the approach, and because of scoped the specificity of this style is downgraded instead of upgraded.

What is expected?

hover works properly

What is actually happening?

hover is not working

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 50.53 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 7.26.3 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.3.1

Any additional comments?

No response

[Jerd0]

https://github.com/vuejs/core/issues/9992 mb this link will be helpful

also, looks like this issue has been added in version 3.3.9

[edison1105]

a workaround

[Jerd0]

a workaround

also in pcss, we can past & after :where(), like

.div {
  background: red
  :where(:hover)& {
    background: blue
  }
}

but, in my opinion, the vue-compiler has a bug right now