Support full media query conditions

[nex3]

• Proposal

Deprecation

• Tests (Add specs for Media Queries Level 4 support sass-spec#1807)
• Dart Sass (Add partial support for Media Queries Level 4 dart-sass#1749)
• Documentation (Document support for Media Queries Level 4 sass-site#656)
• Update canonical spec ([Media Logic] Apply changes to the spec #3365)

Final

• Tests (Update specs for full support for Media Queries 4 sass-spec#1833)
• Dart Sass (Add full support for Media Queries 4 dart-sass#1822)
• Documentation (Update the Media 4 deprecation page sass-site#685)

---

The Media Queries Level 4 spec defines syntax for full boolean algebra among media features. At time of writing, I believe no browsers support this syntax, but once one does Sass should add support as well.

In addition to parsing additional forms, this will affect Sass's media query merging logic. For example, merging not print and (min-width: 600px) should produce not print and not (min-width: 600px) rather than failing entirely.

[stof]

For reference, this is supported in Firefox 63+.
And looking at the Chromium issue tracker, they have some in-progress work done (probably related to their implementation of container queries, as they rely on that range syntax too)

[stof]

Those are announced to be shipping in Chrome 104, which should make the awaited browser support being there as Firefox already shipped them.
https://caniuse.com/mdn-css_at-rules_media_range_syntax

[nex3]

I have a PR out for a proposal: #3344

[nex3]

The proposal has landed. Since it's relatively straightforward and unlikely to change, I'll give it two weeks for public comment.

[nex3]

The initial deprecation phase has landed. We'll wait at least three months to give users a chance to migrate away from the deprecated syntax, then land full support.