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

If this helps, @sesse:

> Could we formulate clearly when & is inserted and when it's not...

As far as I understand it, each selector in a nested style rule would walk thru the following rules:
- If the selector does not begin with a combinator, imply a leading descendant combinator.
- If the selector does not include a nesting selector, imply a leading nesting selector.

This also matches the behavior in Sass.

**With Nesting:**
```css
.yay {
  .lol {}
}
```
**With Implications, Without Nesting:**
```css
.yay {}
.yay .lol {}
```

**With Implications, With Nesting:**
```css
a {
  :hover {}
}
```
**Without Nesting:**
```css
a {}
a :hover {}
```

As far as I understand it, valid nested at-rules would continue matching the same element.

**With Nesting:**
```css
section {
  @container style(--yay: lol) {}
}
```
**With Implications, Without Nesting:**
```css
section {}
@container style(--yay: lol) {
  section {}
}
```

> ... in a way that doesn't require lookahead to specify what is a valid rule?

I’m not sure if lookahead is relevant here, because qualified rules are not determined by semantic validity. The browser can know something is a rule, but it won’t evaluate the selector until the curly brace has started reading the block.
```css
/* this stylesheet will give the document a green background, but it will not give it any border */

%@#!WHOA-NELLY!#@%, :root { border: 100px solid; }
/* ☝️ that is a qualified rule, from the moment "%" is read */
/* ☝️ when it reaches the opening curly brace, the rule is evaluated */
/* ☝️ it will not apply the rule if it does not semantically understand "%@#!WHOA-NELLY!#@%" */
/* ☝️ this is because regular selectors “not forgiving” */

:is(%@#!WHOA-NELLY!#@%, :root) { background: green; }
/* ☝️ that is also a qualified rule, from the moment ":" is read */
/* ☝️ it will apply, even if the it does not semantically understand "%@#!WHOA-NELLY!#@%" */
/* ☝️ this is because, within :is(), selectors are “forgiving” */
```



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


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

Received on Thursday, 27 October 2022 16:32:27 UTC