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

Open
#11,271 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Tech stack
css
Domain
documentation, testing

Research direction

Start with the CSS Syntax 3 “consume a block’s contents” section and the linked CSSWG discussion to determine whether the declaration-splitting behavior is intentional. Then compare the stated behavior with css/css-nesting/nested-declarations-cssom.html in WPT; done means the specification explains the behavior and a corresponding test covers the examples.

Written by the indexing model from the issue text.

Description

css-syntax-3

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. 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 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.

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.