[css-nesting-1] nesting @scope, @layer and @media

[argyleink]

Nesting spec needs to describe how to handle nested conditional rules, including scope and cascade layers, where it currently only articulates how to handle media queries.

[romainmenke]

@layer and all other name defining at-rules are impossible to correctly polyfill with tools like PostCSS.

If these do not have a specific use case for stylesheet authors I would prefer it if this was not allowed in nesting.

These are typically "global" with only "order of appearance" as a factor.

[tabatkins]

I'm not sure what you mean, they're completely polyfillable in the same way @media is today - invert the rules so @media/etc is on the top and contains the style rule.

[romainmenke]

I'm not sure what you mean, they're completely polyfillable in the same way https://github.com/media is today - invert the rules so @media/etc is on the top and contains the style rule.

@layer one;

.foo {
  @layer two;
}

@layer three;

is equivalent to :

@layer one;

@layer two;
.foo {}

@layer three;

Always has layer order : one, two, three
Regardless any elements match the .foo rule.

Is that correct?
Because that would indeed be totally fine.
It is specifically making name defining at rules dependant on selector matching that would be problematic for us. (which also doesn't mean anything in the big scheme of things)

[tabatkins]

Yeah, layers won't ever be dependent on selector matching (similar to how they're not dependent on CQ matching!). An @layer rule contributes to the set of layers regardless of any local conditions; only global conditions (like @media or @supports) can affect it.

Nesting @layer would purely be a convenience allowing you to avoid repeating selectors, just like nesting @media.

[romainmenke]

Nice, thank you for clarifying :)

[argyleink]

some spec entries for this can be found here

[romainmenke]

@argyleink These examples all follow the same basic pattern:

- style rule
  - at-rule
    - style rule
      - declarations

.foo {
  @layer a-layer {
    .bar {
      color: red;
    }
  }
}

But can we also do this?

- style rule
  - at-rule
    - declarations

.foo {
  @layer a-layer {
    color: red;
  }
}

Also unclear if the wording from section 2.2 is still correct now that @layer and @scope are allowed. Should this be changed to be less specific than conditional rules. (afaik @layer isn't a conditional rule)
Or do need a new section for at-rules that aren't conditional rules?