[css-cascade-6] Add a `media()` function for `@import`

[romainmenke]

#7348 (comment)

Media query lists can be partially valid.

This means that any @import that has both a media query list of at least two parts and any unknown condition will just swallow that unknown part as if it were an invalid media query.

https://codepen.io/romainmenke/pen/QWebVmp

@import url("foo.css") screen, screen does-not-exist();
@import url("foo.css")  does-not-exist() screen, screen;

In either case screen does-not-exist() forms an invalid media query and the media query list will always be a singular screen.

Ideally we want unknown parts to invalidate the entire @import, not the first or last media query in a media query list.

---

Proposal

Should we have a media() function to mirror scope(), supports(), ... ?
Wrapping it in a function makes it unambiguous what is part of a media query and what is not.

@import statements with both a media() function and a bare media query list should not be allowed. Bare media queries could even be marked as a "legacy syntax" and authors could be advised not to use it.

This function itself would suffer from the same problem it is trying to address but this would be a short term pain.

Because it is purely syntactic sugar we can transpile with tooling and authors could adopt this quickly.

---

Workaround

Any media query list can be split into multiple import statements:

@import url("foo.css") screen;
@import url("foo.css") screen does-not-exist();

/* two imports for `screen` don't make sense in practice, but imagine something more creative and useful */

I think this is also fine and we can have tooling to help authors (lint rules, ...)
Drawback is that it isn't obvious that you sometimes need to do this and authors shouldn't need to use tool.

Even less obvious when you can clean this up.
At some point all end users of a project will support the newly added syntax and the statements can be joined again.

---

I prefer a new media() function as this doesn't have any sharp edges and gives a nice parallel between the other import conditions.

[andruud]

+1 to this.

@import statements with both a media() function and a bare media query list should not be allowed.

Additionally, I assume we'd probably want to not allow mixing of "new stuff" (just scope(), at the moment) and bare MQ.

Without media(), we'll at least need to say that MQs always go last, although I think media() is a better solution.

cc @mirisuzanne

[tabatkins]

Yeah, I'll have to squint at the grammar to make sure that's enforceable, but if we could just branch it so an import either has a bare MQ or has all the new things (including media()), that would be ideal.