New Rule: `no-declarations-after-nested-rules`

[przemyslaw-zan]

Rule details

Disallow bare declarations placed after nested rules within the same block. Declarations should come before nested rules, or be wrapped in & { }.

What type of rule is this?

Warns about a potential problem

Example code

.actions {
    padding: 8px;
    display: flex;

    & > * + * {
        margin-inline-start: 8px;
    }

    justify-content: flex-end; /* stranded after the nested rule */
}

.message {
    @media (width >= 600px) {
        padding: 16px;
    }

    padding: 8px; /* interop hazard: renders differently in older engines */
}

Prior Art

• Sass made this pattern a breaking change in 1.77 and rejects it outright unless the declarations are wrapped in & { }: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
• stylelint-no-mixed-decls - a stylelint plugin enforcing the same constraint.

Participation

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

• Before CSSNestedDeclarations (Chrome 130, Firefox 132, Safari 18.2), engines hoisted trailing declarations above the nested rules, while engines implementing the current spec keep them in place - so in the .message example above, older engines render padding: 16px at >= 600px while spec-compliant ones always render padding: 8px. Same stylesheet, different rendering. The corrected behavior is Baseline newly available, so both behaviors coexist in still-supported browsers for a long while.
• Even on spec-compliant engines the pattern is a latent conflict: it is harmless until someone later adds an overlapping @media/state/child rule, at which point source order silently decides the winner.
• Declarations wrapped in & { } would not be reported - that is the spec-blessed way to place declarations after nested rules, and the fix Sass mandates.
• A suggestion (rather than an autofix) to wrap the declaration in & { } seems feasible. Moving the declaration up automatically would not be safe, since on spec-compliant engines that changes the cascade outcome.

[DMartens]

I agree this would be a helpful rule but the order should not matter, e.g. first a declaration and then a nested rule or vice versa. As such the proposed rule name does not match. I would propose no-mixed-declarations which is similar to stylelint's name.

[przemyslaw-zan]

order should not matter

Surely this would be acceptable under this rule, right?

.actions {
    padding: 8px;
    display: flex;
    justify-content: flex-end;

    & > * + * {
        margin-inline-start: 8px;
    }
}

[DMartens]

It think this would be a possible option to allow declarations before the first nested rule (and probably the default).
But I think requiring a & {} in this case should also be possible and should be reflected in the rule name.