[csswg-drafts] [css-mediaqueries-5] How to handle media query lists in @custom-media rules (#5458)

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

== [css-mediaqueries-5] How to handle media query lists in @custom-media rules ==
In [media queries level 5](https://drafts.csswg.org/mediaqueries-5/#custom-mq), custom media queries are allowed to specify a list.

As an example, how should this stylesheet get handled?
/* --modern targets modern devices that support color or hover */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }

My initial guess was that user agents should do a dot product of sorts and produce rules for `@media (color) and (width > 1024px), (hover) and (width > 1024px) { ... }`. This feels to me like a reasonable (albeit somewhat tricky to parse) interpretation of the stylesheet authors intent.

However, looking at the existing [postcss-custom-media](https://github.com/postcss/postcss-custom-media) implementation, the produced media query is: `@media (color), (hover) and (min-width: 1024px) { ... }`. This at least felt surprising to me - it's not clear to me why you'd try to write a custom media query with multiple media queries in the list.

If this is the intended behavior, If It'd be helpful to hear if there is a compelling use case for this kind of direct interpolation.

If it's not an intended behavior, I wonder if it'd be clearer for stylesheet authors if `@custom-media` only allowed a single media query production rather than a list of media queries.


tl; dr: should `@custom-media` only take a single media query instead of a list?

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

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

Received on Friday, 21 August 2020 06:43:24 UTC