parse icon indicating copy to clipboard operation
parse copied to clipboard

Support CSS Nesting (resolve #92)

Open OverflowCat opened this issue 5 months ago • 1 comments

It seems that there are no p.Peek(), so I clone the Parser every time it enters a QualifiedRuleset. Lookahead is necessary, since we cannot determine whether it is a declaration or a child rule:

.a {
  div:hover {
    ...
  }
}

.a {
  prop:value
}

Decl is <ident><colon><value>+, but not vice versa. So we need to step until <lbrace>/a combinator (child rule) or <semi>/<rbace> (decl).

Also, the test case

{false, "a{@media{width:70%;} b{width:60%;}}", "a{@media{ERROR(width:70%;})ERROR(b{width:60%;})}"},

should be all valid as Chrome supports empty media queries:

css-test

OverflowCat avatar Jul 03 '25 03:07 OverflowCat

I highly appreciate the effort to investigate and create a PR. I think this addresses some important bugs with the CSS parser. I wanted to rewrite it from the ground up, but perhaps we can improve it bit-by-bit.

However, the cloning part I don't really like. Other parsers or lexers can peek without cloning, and either can do it at no cost or they use an internal buffer. I think we should use a buffer to store the tokens from the lexer.

tdewolff avatar Jul 03 '25 11:07 tdewolff