Nesting transform is incorrect?

[evanw]

First, thank you for making this library. It's wonderful to see something like this, especially as an independent library, and I know how much work it is to make one of these.

I looked into transforming CSS nesting in esbuild recently and I was wondering how this library does it. I think I've found a case where this implementation deviates from the CSS nesting specification:

.foo .bar {
  &div { color: red }
}

This library transforms that into this code (live link):

div.foo .bar{color:red}

However, if I'm reading it correctly the specification says this should be transformed into the following code instead (in this section):

div:is(.foo .bar){color:red}

These two code snippets are not equivalent. For example, the following HTML is supposed to render as black if the specification is followed, but renders as red with the output from this library:

<div class="foo">
  <span class="bar">stuff</span>
</div>

Just letting you know about this edge case. I don't need this edge case to work since I'm not using your library myself. Feel free to do what you want with this issue.

Potentially related: #19

[devongovett]

Yeah you are correct. Another way to do it would be .foo .bar:is(div) or .foo div.bar. There's some complicated logic to deal with type selectors, which must always come first in a selector, so probably a bug in that somewhere. I'll look into it soon. Thanks for the report!

[cyjake]

@devongovett :is() is way too new (Chrome >= 88) a syntax to use when targeting browsers like Chrome 55, which is still quite common among android devices in China.