`.a + .b {}` and `.a > .b` don't work

[aalin]

Hi, I'm unable to parse > and + in selectors. They seem to get lost...

I haven't attempted to fix this myself, I might do it tomorrow.
Any suggestions on where to start would be appreciated, I'm not at all familiar with the code.

Example:

pp CSS.parse(".a, .b { color: #f0f; }")
pp CSS.parse(".a + .b { color: #f0f; }")
pp CSS.parse(".a > .b { color: #f0f; }")

Output:

(css-stylesheet
  (style-rule
    (selectors
      (class-selector (ident-token "a")),
      (class-selector (ident-token "b"))
    )
    (declarations
      (declaration color (hash-token "f0f" id))
    )
  )
)
(css-stylesheet
  (style-rule (selectors (class-selector (ident-token "a"))) (declarations (declaration color (hash-token "f0f" id))))
)
(css-stylesheet
  (style-rule (selectors (class-selector (ident-token "a"))) (declarations (declaration color (hash-token "f0f" id))))
)

I noticed that @media doesn't seem to be parsed correctly either.
There should probably be a style-rule instead of a simple-block.

pp CSS.parse(".a { color: #f0f; }")
pp CSS.parse("@media (max-width: 1px) { .a { color: #f0f; } }")

Output:

(css-stylesheet
  (style-rule (selectors (class-selector (ident-token "a"))) (declarations (declaration color (hash-token "f0f" id))))
)
(css-stylesheet
  (at-rule
    "media"
    (prelude
      (whitespace-token " "),
      (simple-block "(" (ident-token "max-width"), (colon-token), (whitespace-token " "), (dimension-token integer 1 px)),
      (whitespace-token " ")
    )
    (simple-block
      "{"
      (whitespace-token " "),
      (delim-token "."),
      (ident-token "a"),
      (whitespace-token " "),
      (simple-block
        "{"
        (whitespace-token " "),
        (ident-token "color"),
        (colon-token),
        (whitespace-token " "),
        (hash-token "f0f" id),
        (semicolon-token),
        (whitespace-token " ")
      ),
      (whitespace-token " ")
    )
  )
)

Similar issues with @property:

pp CSS.parse(<<~CSS)
  @property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 10deg;
  }
CSS

Output:

(css-stylesheet
  (at-rule
    "property"
    (prelude
      (whitespace-token " "),
      (ident-token "--angle"),
      (whitespace-token " ")
    )
    (simple-block
      "{"
      (whitespace-token "\n" + "  "),
      (ident-token "syntax"),
      (colon-token),
      (whitespace-token " "),
      (string-token "<angle>"),
      (semicolon-token),
      (whitespace-token "\n" + "  "),
      (ident-token "inherits"),
      (colon-token),
      (whitespace-token " "),
      (ident-token "false"),
      (semicolon-token),
      (whitespace-token "\n" + "  "),
      (ident-token "initial-value"),
      (colon-token),
      (whitespace-token " "),
      (dimension-token integer 10 deg),
      (semicolon-token),
      (whitespace-token "\n")
    )
  )
)

Just noticed attribute selectors also get lost..

Input:

pp CSS.parse('.a[aria-current="page"] { color: #f0f; }')

Output:

(css-stylesheet (style-rule (selectors (class-selector (ident-token "a"))) (declarations (declaration color (hash-token "f0f" id)))))

[aalin]

Hi, I have switched CSS-parser to crass in my project, so I'm not really affected by this anymore. Feel free to close it.

[aalin]

Hi again!

I was able to solve some of my CSS-parsing issues by monkeypatching crass, although it didn't support many modern CSS features. I found https://github.com/parcel-bundler/lightningcss which I'm now using via https://github.com/mayu-live/css. It wasn't very difficult to integrate, although it's not generic at all, I only did the bare minimum to get what I needed.

Lightning CSS has bindings for NodeJS that look pretty sweet. I don't know how much work it would be to replace the parser in this library with LightningCSS, but maybe if someone ever finds the time, energy and motivation, it would be really cool, because the other parsers are pretty awesome.

Just an idea.. for the future maybe. :)

[stoivo]

I think you should open this issue since syntax_tree-css can't parse selector rules like .a > .b

[flavorjones]

FWIW see my proposed fix at #58