[syntax-3] are at-rules allowed to nest inside of style rules

[jonathantneal]

Are at-rules allowed to nest inside of style rules, per spec? If so, where is this defined?

Example usage:

body {
  margin: 20px;

    @media (min-width: 30em) {
        margin: 0;
    }
}

I’m asking because folks confuse this with being part of the nesting proposal. And, for my own part, I didn’t help disambiguate this (csstools/postcss-nesting#24).

[AmeliaBR]

According to the most basic syntax parsing model, yes, an at-rule can be nested within a declaration list. However, that doesn't mean it will have an effect; as the note in the spec says, most at-rules will be ignored in a declaration list:

Unexpected at-rules (which could be all of them, in a given context) are invalid and should be ignored by the consumer.

So you need to find the spec that defines the at-rule in question, to see where it may be "expected". For @media (and also @supports), the reference definition is in CSS Conditional Rules, which states:

Conditional group rules are allowed at the top-level of a style sheet, and inside other conditional group rules. CSS processors must process such rules as described above.

So, an @media or @supports rule would currently be unexpected & invalid inside a declaration list.

But you could definitely make a proposal for a CSS Conditional Rules Level 4!

[jonathantneal]

Thank you, @AmeliaBR! I’m sure this information will help me (and other spec-minded folks) very soon.

[fantasai]

Yeah, as @AmeliaBR says, there's no at-rule that's currently valid within a style rule. But we did modify the syntax to make sure that one there would be properly “ignored” by the parser, for forwards-compatibility with any future such at-rules.