[css-mixins-1] Are @mixin rules valid within other at-rules?

For example, are @mixin rules valid within @container?

@container (...) {
  @mixin --m() {
    /* style rules */
  }
}

If yes, we already know that --m() isn't defined conditionally based on CQ evaluation (https://drafts.csswg.org/css-conditional-5/#container-rule, last paragraph of chapter), but are the inner style rules affected?

div {
  @apply --m();
}

In other words, does the above @apply rule "remember" that the referenced mixin is enclosed by an @container? Any decision we make should hopefully answer the same question about @layer, @starting-style, etc.

My initial thought is that (for simplicity) we should make @mixin invalid within any at-rule except conditional rules with the "old school" processing model (i.e. currently @media and @supports).

@mixin

The CSS Working Group just discussed [css-mixins-1] Are @mixin rules valid within other at-rules?, and agreed to the following:

RESOLVED: @layer is invalid inside mixins (for level 1)
RESOLVED: Mixins have to be defined before use
RESOLVED: Custom media queries need to be defined before use
RESOLVED: @mixin is valid wherever @keyframes is valid
SUMMARY: Still open question of whether @mixin declarations are layered -- either way is acceptable implementation-wise
ACTION: TabAtkins to file issue on whether global name-defining things should be invalid inside contextual conditionsl such as @container or @scope

The full IRC log of that discussion

<fantasai> andruud: Question of @mixin withi…

My initial thought is that (for simplicity) we should make @mixin invalid within any at-rule except conditional rules with the "old school" processing model (i.e. currently @media and @supports).

I somewhat agree with this.

But I think mixin rules should also be valid in @layer rules to be able to use cascade layers to resolve name conflicts.

However the inner styles should not be affected by this I think.
I would expect :root to have color green in this example:

@layer early-layer, later-layer;

@layer later-layer {
  @mixin --m() { /* later layer declaration wins */
    color: green;
  }
}

@layer early-layer {
  @mixin --m() {
    color: red;
  }
}

:root {
  color: pink;
}

:root {
  @apply --m(); /* inner styles are unlayered */
}

Authors can also layer inner styles by writing:

@layer a {
  @mixin --m() {
    @layer b {
      color: green;
    }
  }
}

But I think mixin rules should also be valid in @layer rules to be able to use cascade layers to resolve name conflicts.

Ah, yeah, you're right. Damn. I was hoping we could just cleanly state "doesn't work (at all) within such and such", but I guess we do need to be more subtle about it---at least for @layer.

However the inner styles should not be affected by this I think.

Hopefully it will still be somewhat explainable to authors that layers affect which mixin definitions "wins", but not the definitions themselves.

This also raises some questions about the declared layer order.
Do @layer rules inside mixins affect the layer order?
Or only when those mixins are applied?

Support mixins across stylesheets.

Bug 1975722 [wpt PR 53594] - Support mixins across stylesheets., a=te…

Revert "Support mixins across stylesheets."

Bug 1976541 [wpt PR 53684] - Revert "Support mixins across stylesheet…

Bug 2056398 [wpt PR 61427] - [css-mixins] Test that @layer is dropped…

[css-mixins-1] Make @layer invalid within a mixin body. w3c#12417

I don't think we need any normative changes for validity of @keyframes. I think it was just cited as an example of "unless otherwise specified, an at-rule is valid at the top level, and in select other circumstances," and the sections I linked to define those other circumstances.

@mixin

[css-mixins] Test that @mixin is valid wherever @Keyframes is valid

@mixin

[css-mixins] Test that @mixin is valid wherever @Keyframes is valid

@mixin

Bug 2077396 [wpt PR 63177] - [css-mixins] Test that @mixin is valid w…

[css-mixins-1] Make @layer invalid within a mixin body. #12417

Bug 2056398 [wpt PR 61427] - [css-mixins] Test that @layer is dropped…

Navigation Menu

Repository navigation

[css-mixins-1] Are @mixin rules valid within other at-rules? #12417

47 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-mixins-1] Are @mixin rules valid within other at-rules? #12417

Description

Activity

romainmenke commented on Jun 30, 2025

andruud commented on Jun 30, 2025

romainmenke commented on Jun 30, 2025

47 remaining items

kbabbitt commented on Sep 29, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions