Incorrect compilation of nested CSS appends type selector after subclass selectors

Author: evanwCreated May 13, 2023Updated Sep 4, 2026

Input:

css
.foo {
  > &a,
  + &b {
    color: red;
  }
}

Output from Lightning CSS (playground link):

css
.foo > .fooa, .foo + .foob {
  color: red;
}

Expected output:

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