[css-nesting-1] Yet another nesting proposal (Option 5) #7970
Description
The fundamental problem with allowing nested style rules is disambiguating properties from nested rules.
So far, every proposal has focused on taking a regular style rule and creating a syntax to identify selectors within it. What if we turned that around?
My proposal is to have an at-rule that has a selector, and contains nothing but style rules (and other at-rules), whose selectors are relative to the at-rule. We can then have a special block within the at-rule to hold properties that apply to the nesting root,
E.g.
@nest foo {
& { color: blue; }
bar { color: red; }
}
would be equivalent to:
foo { color: blue; }
foo bar { color: red; }
You could also, of course nest the at-rules:
@nest foo {
& { color: blue; }
@nest bar {
& { color: red; }
baz { color: green; }
}
}
would be equivalent to:
foo { color: blue; }
foo bar { color: red; }
foo bar baz { color: green; }
It may also be possible to omit the & and just use a bare {} block within the at-rule to hold properties.
This requires no changes to existing parsing, OM, or behavioral rules and has a straightforward OM for the new at-rule.