Selector list parents plus pseudo class children don't apply to all parent selectors

[whiteinge]

If a parent style uses a selector list and a child style uses both the parent reference (&) and a pseudo class, that pseudo class isn't present on all parent selectors as expected.

E.g.:

const className = Style.registerStyle({
  "& > input, & .foo > input": {
    "&:focus": { background: "green" },
  },
});

Produces .asdf > input, .asdf .foo > input:focus {...} on the last selector only, and not .asdf > input:focus, .asdf .foo > input:focus {...} on all selectors as expected.

[blakeembrey]

Here’s a previous issue related too: https://github.com/blakeembrey/free-style/issues/72.

[whiteinge]

Oh, thanks for the link. I did search the issues before opening this but 'selector list' and 'pseudo class' don't appear in those others and I didn't think to just search for 'comma' :stuck_out_tongue: .

I can definitely appreciate not wanting to introduce a parser. That said, I do wonder if we could get by with a very naive one since, I think, we only care about top-level selector lists. Offhand:

• Only parse selectors, not properties;
• Avoid parsing anything inside a CSS function;
• (Probably?) avoid anything inside an attribute selector (unsure if/where commas can appear there);
• Edit: a few pseudo-class functions support selector lists as arguments -- :is(), :where(), and more in the Selectors 4 addition.

Can you think of anything I'm overlooking? I wonder if it could be as simple as splitting on any commas outside pairs of ( and [ -- and maybe " and ' too (or will those always appear inside one of the first two?). I'll poke around the spec and some existing parsers.