Re: [csswg-drafts] [css-nesting-1] Syntax Invites Errors (#7834)

Pulling out for clarity, the suggested change is:

* Switching <https://w3c.github.io/csswg-drafts/css-syntax-3/#consume-style-block> from a per-nested-rule logic to a parsing switch: the parser starts parsing in a "declarations and at-rules" mode, but as soon as it sees an at-rule or an `&`, it switches to an "at-rules and style rules" mode. (This at-rule does not have to be *valid* to trigger this, as otherwise it means your nested rules might not work due to an *unrelated* at-rule not being supported yet. In the Syntax spec I'll literally just trigger it upon seeing the at-keyword token.)
* Nested style rules relax their requirements to just use `<relative-selector-list>`. They no longer require an `&`, at the start or anywhere. They work with the existing Sass/etc logic - if an `&` is mentioned in the selector, and the selector doesn't start with a combinator, it's used as-is; otherwise, it's assumed to be a relative selector chaining off of `&`. That is, `.foo` is interpreted as `& .foo`, `+ .foo` is interpreted as `& + .foo`, but `.foo &` is left as-is.
* We still introduce `@nest`, but just as a no-op rule that can be used to trigger the "see an at-rule" switch, if your first nested selector doesn't or can't start with an `&`. CSSOM will use this if necessary when serializing, if the first rule in its .cssRules list is a CSSStyleRule.

Taking the following example Sass from the original Nesting issue:

```scss
.main-nav {
   display: flex;
   ul {
      list-style-type: none;
      li {
         margin: 0;
         padding: 0;
      }
      a {
         display: flex;
         padding: 0.5em 1em;
      }
   }

   nav& {
      display:  block;
   }
}
```

You'd write this in the new proposal as one of the following:

```css
.main-nav {
   display: flex;
   & ul {
      list-style-type: none;
      & li {
         margin: 0;
         padding: 0;
      }
      a {
         display: flex;
         padding: 0.5em 1em;
      }
   }

   nav& {
      display:  block;
   }
}
```

or 

```css
.main-nav {
   display: flex;
   @nest;
   ul {
      list-style-type: none;
      @nest;
      li {
         margin: 0;
         padding: 0;
      }
      a {
         display: flex;
         padding: 0.5em 1em;
      }
   }

   nav& {
      display:  block;
   }
}
```

Which you use is up to preference.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7834#issuecomment-1268979633 using your GitHub account


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

Received on Wednesday, 5 October 2022 21:09:53 UTC