[css-syntax-3] Should declarations interleaved by an invalid rule be separated?

[cdoublev]

When a rule is interleaved between declarations and triggers an "invalid rule error", the spec splits the declarations:

• If an 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 rule or declaration in the context
• is not an invalid at-rule in the context (it does not start with an at-keyword)
• does not start with a dashed identifier followed by :
• does not include a non nested "stop token": } and ;
• ends with a {}-block

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

If I am not mistaken, this intentionally takes space for future selector syntaxes. #8738 (comment) touches on that.

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

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

There does not seem to be any corresponding test on WPT.

[cdoublev]

Browsers also do not split declarations separated by an invalid at-rule:

const sheet = new CSSStyleSheet
sheet.insertRule(`
  style {
    color: green;
    @media;
    color: red;
  }
`)
sheet.cssRules[0].cssText; // style { color: red; }

Whereas this is required by the current text:

<at-keyword-token>

• If decls is not empty, append it to rules, and set decls to a fresh empty list of declarations.
• Consume an at-rule from input, with nested set to true. If a rule was returned, append it to rules.

So I guess it should be:

<at-keyword-token>

• Consume an at-rule from input, with nested set to true. If a rule was returned:
  • If decls is not empty, append it to rules, and set decls to a fresh empty list of declarations.
  • Append the rule to rules.