@ queries in scoped nested CSS lack nesting selector

[0xAlunara]

Vue version

3.5.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9UtFqwjAU/ZWQpw20CjoYXSebw8H2sI1tj4ER22utpklI0loR/303qXUyxLebc849PffQHX3UOqoroDFNHJRacAcTJglJsqImqeDW3jO6UIrRABPyjPN/fs4N8lNukgHC7f5hSgYntvi0biuA2FRpyIIwQnOya73nPF3nRlUy66dKKBMTA9md3/PsQwlZwYmSYosGBkASLjNyVfKmvykyt4zJ7XCom+vO7pxh7vfQ0rP7zjnCA8jOvwOYDELKCe1Rh0nlosijlVUSSwrOjKaq1IUA865doaRlNO6+ySgXQm1eA+ZMBb0OT5eQrs/gK9t4jNEPAxZMDYweOcdNDq6lZ19v0OB8JEuVVQLVF8hPsEpUPmMrm2ITGPtEF9K+lFoZV8j8284aB9J2R/mgoZSgZxT/lKcLp//FHUXjQ5l7bPGnBuM9scBRdBON6f4XxuPM7A==

Steps to reproduce

1. Create a div with class foo and an inner div with class bar.
2. Create a scoped CSS style where you assign foo a background-color and any inner selector for .bar, this can be empty.
3. Create a media query for foo where you want to change background-color if it's smaller than 800px.

You'll notice that the @media query doesn't work as it loses out to the original root background-color set, because Vue has wrapped it in a nesting & selector.

What is expected?

.foo {
  &[data-v-7ba5bd90] {
    background-color: red;
  }

  @media only screen and (max-width: 800px) {
    &[data-v-7ba5bd90] {
      background-color: green;
    }
  }
}

What is actually happening?

.foo {
  &[data-v-7ba5bd90] {
    background-color: red;
  }

  @media only screen and (max-width: 800px) {
    background-color: green;
  }
}

System Info

No response

Any additional comments?

1. This was introduced possibly as a regression in 3.5.4 by CSS nesting inserts attribute selector at every level #10567
2. This happens only to scoped styles.
3. This happens only to native CSS styles (so no Sass).
4. It doesn't happen if you remove the (empty) nested .bar selector, presumably because the original background-color: red doesn't get wrapped in a nesting & selector.
5. The bug happens not only for @media tags but also @container tags and potentially any other @ selector?

Workaround
You can work around this issue by wrapping the content of your @media inside its own nesting & selector. This gets quite tedious, however, and feels silly.

So if you have

@media only screen and (max-width: 800px) {
  background-color: green;
}

You have to manually change it to

@media only screen and (max-width: 800px) {
  & {
    background-color: green;
  }
}

You wouldn't have to do this if the style wasn't scoped.