Nested media queries using the "not" keyword should not be merged

[jaydenseric]

Edited by @nex3

Specs: sass/sass-spec#1267

• Preserve nested media queries when they can't be merged dart-sass#410
• Emit nested media queries when they can't be merged libsass#2694

---

Nested media queries using the not keyword should not be merged. According to the spec, not flips the result for the entire query and does not apply to specific chunks.

For example:

@media (min-width: 500px) {
  @media not all and (min-width: 800px) {
    background: red;
  }
 }

Should compile to the same:

@media (min-width: 500px) {
  @media not all and (min-width: 800px) {
    background: red;
  }
 }

At 400px the background is expectedly not red.

Instead it compiles to:

@media not all and (min-width: 500px) and (min-width: 800px) {
  background: red;
}

At 400px the background is unexpectedly red.

[chriseppstein]

I had the thought "Since CSS allows nested media queries now, I wonder whether it's better to just remove the media merging feature from Sass." Then I discovered IE11 still doesn't support nested media queries. (IE9-11 is 8% of global users)

Noting that here in case someone else thinks it.

[jaydenseric]

Wow! Didn't know that about IE11 either.

[andrew-skybound]

Since browser support for nested @media queries is not ubiquitous, how about requiring the "not" keyword to appear on either all media queries in a rule (if the parent has it) or on none of them (if the parent does not). That would make the intent explicit, and future-proof the style sheet for the day when manually nesting @media rules is no longer necessary.

Not nesting media queries sometimes does not seem like a good idea. At the very least it will lead to unexpected failures on IE.

So the example above would be an error. This would be required:

@media not all and (min-width: 500px) {
  @media not all and (min-width: 800px) {
    background: red;
  }
}

[nex3]

Note that this question came up again in sass/libsass#2425. The current cross-implementation behavior is to omit nested queries, but as more browsers natively support nested media queries this becomes a CSS compatibility question. I think going forward we should probably move to leaving nested queries as-is when they can't be successfully merged.

[nex3]

This is a straightforward enough change that I don't think it needs a full proposal. @xzyfer agreed?

[xzyfer]

Agreed

…

On Fri., 13 Jul. 2018, 12:18 pm Natalie Weizenbaum, < ***@***.***> wrote: This is a straightforward enough change that I don't think it needs a full proposal. @xzyfer <https://github.com/xzyfer> agreed? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1831 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWKPyQLAzjnDwXC8YsAF6jk0pPTdsks5uGANkgaJpZM4F6BPS> .

[nex3]

Closing this out since LibSass is deprecated.