Incorrect compilation of nested CSS appends type selector after subclass selectors

[evanw]

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.

[romainmenke]

fyi : > &a this is no longer (or never was) a valid selector : w3c/csswg-drafts#8662 (comment)

Type selectors must always be the first part of a compound selector.

> a& is valid and handled correctly : https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20%3E%20a%26%2C%5Cn%20%20%2B%20b%26%20%7B%5Cn%20%20%20%20color%3A%20red%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cna%20%7B%5Cn%20%20%3E%20a%26%2C%5Cn%20%20%2B%20b%26%20%7B%5Cn%20%20%20%20color%3A%20red%3B%5Cn%20%20%7D%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

[evanw]

Ah sorry, I wasn't aware that they changed the syntax again. My mistake.