[csswg-drafts] [mediaqueries-5] Define logical evaluation steps for custom media (#7725)

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

== [mediaqueries-5] Define logical evaluation steps for custom media ==
Aside from a note that these must be evaluated logically I can't find how this must work in detail.

https://drafts.csswg.org/mediaqueries-5/#custom-mq

> The [custom media query](https://drafts.csswg.org/mediaqueries-5/#custom-media-query) is evaluated logically, not treated as a textual substitution. Take the following code snippet for instance:

An obvious case that seems highly problematic is : 

```css
@custom-media --mq screen and (max-width: 30em);

@media print and (--mq) {
  /* two types have been defined, "print" and "screen" */
}
```

With the [PostCSS plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme) this currently becomes something that feels random and is obviously incorrect :

```css
@media print and (max-width: 30em) {
  /* two types have been defined, "print" and "screen" */
}
```

------

Can the logical evaluation steps be defined in the specification?
This would ensure that we have interop between a PostCSS plugin and what might eventually land in browsers. (ignoring bugs)

Alternatively it might be interesting to simplify the custom media proposal:

1. Only allow `<media-condition>` in `@custom-media`:

```css
/* allowed */
@custom-media --mc (min-width: 300px)

/* not allowed */
@custom-media --mq screen and (min-width: 300px)
```

2. Only allow `<extension-name>` to be used as a full `<media-query>`

```css
/* allowed */
@media screen and (min-width: 300px), --mq {}

/* not allowed */
@custom-media screen and (--mq)
```


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


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

Received on Sunday, 11 September 2022 17:20:15 UTC