Re: [csswg-drafts] [css-conditional-5] Desugaring @if (#12909)

> nesting style rules inside of `@if` [... is] super confusing, imo

Agree.

> So, I think `@if` here should _only_ be allowed in a nested context, and then _only_ allow declarations, not style rules, inside of itself.

That would be ideal.

> E.g. we could define that it desugars the condition to a <boolean> custom property and then all if()s use that custom property instead of the condition verbatim.

That _would_ indeed be neat. It would be like implicitly generating a style-container-query for it.

As an example:

```
.box {
  @if style(--x: pill) {
     & .inner {
       border-radius: 5px;
     }
  }
}
```

Effectively means:

```
.box {
  --unobservable-prop: if(style(--x:pill): true; else: false);

  & .inner {
    border-radius: if(style(--unobservable-prop: true); else: revert-rule);
  }
}
```

Unfortunately nesting isn't "DOM-structural" like that, so we have no guarantee that the outer thing actually is an ancestor of the inner things. It breaks down as soon as you use e.g. sibling selectors, `.box { @if(...) { & + .thing { } } }`.

`@scope` _is_ structural, so your trick should work directly beneath that rule:

```
@scope (.box) {
  @if style(--x: pill) {
     & .inner {
       border-radius: 5px;
     }
     & + .thing { /* Out of scope anyway */
        color: red;
     }
  }
}
```

In any case, I would restrict `@if` to declarations-only in the first version, if possible.

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


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

Received on Tuesday, 14 October 2025 08:03:13 UTC