Re: [csswg-drafts] [mediaqueries-5][css-conditional-5][css-mixins-1] Order dependent rules and adopted stylesheets (#13041)

> > What other things are order dependent?
> 
> None, [...]

Out of _existing_ rules: `@layer`, I guess? (Though it has no named lookup.)

> Alternatives were either strict lexical scoping (not great),

Yeah, lexical scoping would prevent using things defined in other stylesheeet, which seems bad.

> forbidding conditional `@mixin` / `@custom-media` / etc

We cannot really forbid this, because `@import`/`<link>` can have media queries attached to them directly. This means we do effectively have to handle cycles, e.g.:

```css
@custom-media --a true;
@custom-media --b true;

@media (--b) {
  @custom-media --a false;
}

@media (--a) {
  @custom-media --b false;
}
```

We _could_ maybe solve that by imagining that `@custom-media` rules (and similar) accept a condition in the prelude[^1], i.e. we'd "cascade" the above rules in a separate pre-pass (before any `@apply`, or the main processing of style rules takes place), and basically rewrite it to:
```css
@custom-media --a true;
@custom-media --b true;
@custom-media if(media(--b)) --a false;
@custom-media if(media(--a)) --b false;
```

Then we go through each seen name, and "compute" the winning cascaded rule for each name. For `--b`, for example, the winner is `@custom-media if(media(--a)) --b false`, and to resolve that we _first_ need to resolve `--a`. At that point, it becomes easy to detect cycles, and just set those names to `false` or `unknown`.

`@custom-media`, `@custom-supports` and `@mixin` could then participate in the same resolution process, e.g. for:

```css
@custom-media --a true;
@custom-supports --b true;

@mixin --m { /* one */ }

@media (--a) {
  @mixin --m { /* two */ }
}

@supports (--b) {
  @custom-media --a false; /* false all along */
}
```

you could imagine cascading rules as follows:

```css
@custom-media --a true;
@custom-supports --b true;
@mixin --m { /* one */ }
@mixin if(media(--a)) --m { /* two */ }
@custom-media if(supports(--b)) --a false;
```

To determine what `--m` is in the above, we first resolve `@mixin if(media(--a)) --m { /* two */ }`, which requires that we resolve `--a` first, which in turn requires that we resolve `@custom-media if(supports(--b)) --a false` first, which is just `true`. In the end `--m` ends up defined as `/* one */` here.

I think we'd have to disallow `@custom-media` and `@custom-supports` from `@mixin` to do something like that, though.

But it doesn't matter, since `@layer` makes all of this break down:

```css
@media (--b) {
  @layer y, x;
}
@layer x {
  @custom-media --b false;
}
@layer y {
  @custom-media --b true;
}
```

In order to determine the winning rule for `--b` in the above, we need to know which layer is stronger, and to know which layer is stronger, we need to know the winning rule for `--b`. With layers already being order dependent, I cannot think of a reasonable way to handle such cycles.

Also, as a reminder, disallowing `@custom-media` (etc) from `@layer` helps very little, because we are forced into supporting it anyway due to layered imports.

> plus hoping that implementing it is fast enough (which I'm a bit skeptical about but... hey).

At least we can do slightly better than "hope" here. @sesse measured this extra traversal over the rules, and found it to be insignificant compared to everything else.

> I'd like to understand what use cases are enabled by imposing this restriction.

All of them; it is to make these features possible in the first place. The alternatives so far seems to require more damaging restrictions.

For mixins in particular, the problem is easier: mixins can't define mixins, and they also cannot affect layers (https://github.com/w3c/csswg-drafts/issues/12417). We _could_ ditch order dependence for mixins given some other reasonable restrictions, but then we'd still have all of these issues for `@custom-media` / `@custom-supports`.

The sentiment in the CSSWG was previously that order dependence or not doesn't matter for authors, because they'll declare their mixins (or named things in general) before using them _anyway_. Adopted stylesheets being forced at the end of the stylesheet list had me a little worried about that, but if @emilio is right about the intended usage pattern of adopted stylesheets (all or nothing), then I'm OK with this.

> is this implementation an existence proof that the order dependence wasn't needed or is the current implementation just incomplete?

It's incomplete. It will be needed once we can mix in `@custom-media`.

[^1]: For illustration purposes, not meant as a web-facing concept.


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


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

Received on Wednesday, 5 November 2025 14:48:44 UTC