Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@ queries in scoped nested CSS lack nesting selector #11896

Closed
0xAlunara opened this issue Sep 11, 2024 · 0 comments · Fixed by #11899
Closed

@ queries in scoped nested CSS lack nesting selector #11896

0xAlunara opened this issue Sep 11, 2024 · 0 comments · Fixed by #11899
Labels

Comments

@0xAlunara
Copy link

0xAlunara commented Sep 11, 2024

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants