[csswg-drafts] [css-nesting] Lexical scoping for identifiers defined in nested blocks (#6809)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] Lexical scoping for identifiers defined in nested blocks ==
We have currently resolved that the names defined by rules like `@keyframes` or `@property` are [tree-scoped](https://drafts.csswg.org/css-scoping-1/#shadow-names), 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:

```css
.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:

```css
.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. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6809 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 10 November 2021 11:01:35 UTC