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

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] Add a `media()` function for `@import` ==
https://github.com/w3c/csswg-drafts/issues/7348#issuecomment-2379746044

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

```css
@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:

```css
@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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10972 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 September 2024 13:19:18 UTC