[css-nesting] (Lexical?) scoping for identifiers defined in nested blocks #6809
Description
We have currently resolved that the names defined by rules like @keyframes or @property are tree-scoped, and that does resolve the pressing issue of using them in Shadow DOM. However, it is false to assume that any and all encapsulation will ever happen via Shadow DOM. Even in light DOM, authors often use multiple stylesheets, or even write long stylesheets that benefit from actual scoping, in the same way that even JS code written by a single person benefits by not having every variable be global.
Currently Nesting is mainly syntactic sugar, but it can solve these issues quite nicely. Consider the following:
.foo {
@keyframes fancy-fade { to { filter: opacity(0) } }
& .baz {
animation: 1s fancy-fade;
}
}
.bar {
@keyframes fancy-fade { to { opacity: 0 } }
& .yolo {
animation: 1s fancy-fade;
}
}Currently, the syntax above would be transformed to:
.foo {}
@keyframes fancy-fade { to { filter: opacity(0) } }
.foo .baz { animation: 1s fancy-fade; }
.bar {}
@keyframes fancy-fade { to { opacity: 0 } }
.bar .yolo { animation: 1s fancy-fade; }I'd argue there is literally no case where you want fancy-fade defined inside a block to be available outside said block, and that there's no case where you'd want the animation specified in .foo .baz to use the fancy-fade keyframes defined inside .bar (which is what would currently happen).
What if we apply lexical scoping for name-defining rules specified inside another CSS rule, and enforce it at parse time? It provides a very natural way to scope things, is fully backwards-compatible (since nesting has not been implemented yet), and since it's parse-time, it might be reasonable to implement.