[css-cascade-4] Conditional @import: supports interaction with media queries

[svgeesus]

from https://lists.w3.org/Archives/Public/www-style/2015Sep/0073.html by Tom Potts

There's no example of an @import with both supports and media queries. The
syntax specification states that the supports must go before the media
query, but this is not specifically called out. Which of the following are
valid?

1. @import url("xxx.css") supports(display: flex) print;
2. @import url("xxx.css") print supports(display: flex);
3. @import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
4. @import url("narrow.css") supports(display: flex) (handheld and (max-width: 400px));
5. @import url("narrow.css") supports(display: flex) and handheld and (max-width: 400px);
6. @import url("xxx.css") supports((display: flex) and (display: block));
7. @import url("xxx.css") supports(display: flex) and supports(display: block);

My reading of the spec is that 1, 3 and 6 are valid, 2, 5 and 7 are
invalid, and I'm not sure about 4. An example or two would help make this
clearer.

[svgeesus]

from https://lists.w3.org/Archives/Public/www-style/2015Dec/0081.html by @fantasai

On 09/11/2015 04:16 AM, Tom Potts wrote:

If that's all as I read it, then it's not unclear. :-) An example like
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
would be welcome because it demonstrates to CSS authors where the
conjunctions and parentheses go in more complex situations

Thanks for suggesting the example! I've added it to the editor's
draft. :)
https://drafts.csswg.org/css-cascade-4/#at-import

Let me know if you have any further suggestions for improvement.