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

_In case anyone else working on a preprocessor/fallback tool finds this ticket_

I think it is possible to provide an accurate and complete fallback for custom media.

Any `(--my-custom-media)` should be replaced by `true` if the referenced media query is true and `false` when it is false. (this sounds super obvious but this is non-trivial with text manipulation)

This means that we can leverage nested `@media` rules and conditions that are always `true` or `false` to mimic custom media.

```css
@custom-media --simple-feature-test (min-width: 300px);

@media not (--simple-feature-test) {
    .a {
        order: 3;
    }
}
```

becomes :

```
@media  (min-width: 300px) {
    @media not (max-color:9999943) {
        .a {
            order: 3;
        }
    }
}

@media  not (min-width: 300px) {
    @media not (color:9999943) {
        .a {
            order: 3;
        }
    }
}
```

`max-color:9999943` is something that is always `true`.
`color:9999943` is something that is always `false`.

This example is a bit trivial but the same technique works equally well for more complex examples.

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7725#issuecomment-1257023852 using your GitHub account


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

Received on Saturday, 24 September 2022 17:27:33 UTC