[csswg-drafts] [css-syntax-3] Clarify why declarations after/before invalid rule error should be separated (#11271)

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

== [css-syntax-3] Clarify why declarations after/before invalid rule error should be separated ==
When a rule is interleaved between declarations and triggers an "invalid rule error", the [spec](https://drafts.csswg.org/css-syntax-3/#consume-a-blocks-contents) splits the declarations:

  > - **If an [invalid rule error](https://drafts.csswg.org/css-syntax-3/#invalid-rule-error) was returned**
  > If `decls` is not empty, append `decls` to `rules`, and set `decls` to a fresh empty list of declarations.

An *invalid rule error* is produced in a nested context from any list of tokens that:

  - is not a valid at-rule or declaration in the context
  - does not start with a dashed identifier followed by `:`
  - does not include a non nested "stop token": `}` and `;`
  - ends with a `{}`-block
  - fails to be parsed as a valid qualified rule in the context

Examples: `{}`, `. {}`, `div: hover {}`, `undeclared-ns|* {}`.

If I am not mistaken, this intentionally takes space for future selector syntaxes. https://github.com/w3c/csswg-drafts/issues/8738#issuecomment-1747640413 touches on that.

It might be useful to add a note, since that is not what the current version of Chrome and FF do:

```js
const sheet = new CSSStyleSheet
sheet.insertRule(`
  style {
    color: green;
    . {}
    color: orange;
    undeclared-ns|style {}
    color: red;
  }
`)
sheet.cssRules[0].cssText; // style { color: purple; }
```

There does not seem to be any test on [WPT](https://github.com/web-platform-tests/wpt/blob/master/css/css-nesting/nested-declarations-cssom.html).

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


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

Received on Monday, 25 November 2024 15:11:58 UTC