[Media queries] Negation is ignored when nested media queries exist

[yivo]

libsass 3.5.0.beta.3-54-gdebb1e32

http://libsass.ocbnet.ch/srcmap/#LmJsb2NrIHsKICBAbWVkaWEgbm90IHByaW50IHsKICAgIEBtZWRpYSAobWluLXdpZHRoOiA2MDBweCkgewogICAgICBjb2xvcjogZ3JlZW47CiAgICB9CiAgfQp9

input.scss

.block {
  @media not print {
    @media (min-width: 600px) {
      color: green;
    }
  }
}

Actual results

@media print and (min-width: 600px) {
  .block {
    color: green; } }

Expected result

@media not print and (min-width: 600px) {
  .block {
    color: green; } }

[yivo]

It works well if @media not print is nested.

.block {
  @media (min-width: 600px) {
    @media not print {
      color: green;
    }
  }
}

[mgreter]

Media queries are not very flexible with the "not" operation, see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Sass should probably error in this situation, although we may be able to convert the logic in certain cases (e.g. inverting the min-width to a max-width statement, to invert the intention, albeit I did not really think hard if that makes sense).

[xzyfer]

@nex3 I've noticed the output between Ruby and Dart Sass is different in this case. Can you please confirm the correct output.

Input

.block {
  @media not print {
    @media (min-width: 600px) {
      color: green;
    }
  }
}

Ruby Sass

Dart Sass

@media not print and (min-width: 600px) {
  .block {
    color: green;
  }
}

[nex3]

This is complicated. I can say for sure that Dart Sass is wrong: @media A {@media B { ... }} should match media for which both A and B are true, and if A = not print, not print and B matches media where A is true and B is false. That's why Ruby Sass produces no output: because there wasn't any way to create a query that means the right thing.

However, the most recent media query spec is more flexible in the syntax it supports for queries. It allows @media (not print) and (min-width: 600px), which does express the correct semantics. But I'm not sure how broad the browser support for this syntax is, or how stable it's going to be going forward, both of which determine whether it's safe to target. Perhaps @tabatkins can provide insight?

[nex3]

I talked to @tabatkins, who says

syntax is stable, but currently unsupported.
(so as usual, take "stable" with a grain of salt until webcompat actually freezes it in, but I don't expect any changes and it's been the same for a while)

I think we should follow Ruby Sass's behavior here and just emit nothing until some browser actually supports more advanced queries.

[tabatkins]

👍

[nex3]

Looking closer at the spec, it looks like it's irrelevant for this specific case anyway—(not print) and (min-width: 600px) isn't actually valid, since the <media-type> production can only appear at the top level of the parse tree.

[nex3]

...although I suppose not print and not (min-width: 600px) would work.