fix(compiler-sfc): scoped style leak when using pseudo classes (fix #8868)

[kleinfreund]

Fix a scoped style leak when using pseudo classes caused by the scoped style attribute (i.e. [data-v-...]) not being attached to the key part of a selector when it contains pseudo class selectors.

Closes #8868.

---

Note that the PR in its current state changes the placement of the scoped style attribute when using pseudo classes from "inject before the pseudo class selector" to "inject after the pseudo class selector" (e.g. [data-v-test]::selection becomes ::selection[data-v-test]). Both should be functionally/semantically equivalent, but they do look a little strange. Especially for functional style pseudo classes, this looks weird: input:not(.error)[data-v-test].

Changing the logic in pluginScoped to inject the scoped style attribute to always be at the start of pseudo class selectors in key position would definitely increase the complexity of the code here. Let me know if the PR’s current behavior is a problem and should be changed.

Just to be clear, I think the position of the scoped style attribute is pretty much just a cosmetic issue as far as I can tell.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	89.4 kB	34 kB	30.7 kB
vue.global.prod.js	146 kB	53.3 kB	47.5 kB

Usages

Name	Size	Gzip	Brotli
createApp	49.8 kB	19.5 kB	17.8 kB
createSSRApp	53.1 kB	20.8 kB	19 kB
defineCustomElement	52 kB	20.2 kB	18.5 kB
overall	63.2 kB	24.4 kB	22.2 kB