[css-syntax-3] Clarify why declarations after/before invalid rule error should 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.