Incorrect compilation of nested CSS appends type selector after subclass selectors
Input:
.foo {
> &a,
+ &b {
color: red;
}
}Output from Lightning CSS (playground link):
.foo > .fooa, .foo + .foob {
color: red;
}Expected output:
.foo > a.foo, .foo + b.foo {
color: red;
}The problem is that the type selector must be prepended to avoid creating an invalid compound selector, but Lightning CSS appends it instead. Other similar problem cases to .foo are #foo, :foo, and even foo.
I recently fixed a similar issue in esbuild and Lightning CSS has the same bug, so I figured I'd report it here too. FWIW my fix was a hack: I just moved the & token after the type selector when converting the nested selector to a token stream so that the later substitution of & ends up in the right place (so &a is basically changed to a& internally). I didn't do any big changes to token substitution itself such as re-parsing the token stream.
Source: parcel-bundler/lightningcss