`:global` doesn't work with CSS nesting

[GrantGryczan]

Vue version

@d637bd6

Link to minimal reproduction

https://play.vuejs.org/#eNp9UctOwzAQ/BXLJ5BKqgpOIapEUQ9wAAQcfcljSdJuvJYfpVXVf2fjKLSHqJIvnhnvzKyP8smYZBdApjLz0BnMPSyVFiJrFssVVQdR5OW2thR0JVxDAStRgCgwwEx42Ptp3gRrEJJszlOUzuYXo/nq/AFBuJIMVIykNVKR403Bdrfi2Lufh96VhGTT6PjYvxaiWQyiKdlgzEIhTkrzyebRjW3kTHr21D9tnWwcaa4cxyhZUmdaBPtufEvaKZmOBkrmiPT7GjFvufSIlw2U2wl84/Y9puSHBQd2B0r+cz63NfiBXn+98fYuyI6qgKy+Qn6CIwx9xkG24uIc+0IX0750hqxvdf3t1nsP2o2l+qBxM1GvJP/785Xq57j3ycO4UXn6A8QMvRw=

Steps to reproduce

In the minimal reproduction, open the Playground's compiled CSS tab.

What is expected?

body {
  background-color: blue;
h1[data-v-7ba5bd90] {
    background-color: purple;
}
}

What is actually happening?

body {
&[data-v-7ba5bd90] {
  background-color: blue;
}
h1[data-v-7ba5bd90] {
    background-color: purple;
}
}

System Info

No response

Any additional comments?

Remove the nested h1 selector inside :global(body), and then the body's background becomes blue as expected.

[zh-lx]

The behavior of global and deep is not consistent with css nesting is really confusing. It seems a lot of people are confused by this issue: #12405，10403，6587，5420，5167，4533

I created a PR #10436 before to fix this issue but it wasn't accepted. Currently, nest css are supported support built-in, this scene will be used more and more. Maybe we should consider to reopen and accept #10436? @yyx990803 @edison1105

[edison1105]

@zh-lx
I think :global(.foo) .bar should compile to .foo .bar[data-v-xxx] instead of .foo .bar. If you want to get .foo .bar, write :global(.foo .bar). this is the expected behavior of #12404.

#10403 (comment)

[yyx990803]

The repro here and #12404 are indeed both bugs. The expected output described by @GrantGryczan are correct in both cases. I don't think there is ambiguity here.