[css-mediaqueries-5] How to handle media query lists in @custom-media rules

[stephen]

In media queries level 5, 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 implementation, the produced media query is: @media (color), (hover) and (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?

[tabatkins]

Yeah, I should change it to take only a single MQ, since authors can just use or for that, and I don't really see a need for media types since we still only have the two ("screen" and "print").

That PostCSS implementation is clearly busted; it's just doing textual substitution, and is producing something whose semantics are clearly different from what the source indicated.