CSS Nesting: multiple children

[joelmoss]

Think this is a bug in esbuild when transforming down CSS nesting...

This input needs no transforming, and all works. It will style span and label siblings of input:

input + span,
input + label {
  color: red;
}

But introducing nesting:

input {
  + span,
  + label {
    color: red;
  }
}

Results in this output:

input :is(+ span, + label) {
  color: red;
}

Which is invalid and incorrect, and will not style the siblings span and label of input.

[joelmoss]

thanks for the fix, but the issue still persists with pseudo-elements...

a {
  &::before,
  &::after {
    content: "???";
  }
}

which will result in...

a:is(::before, ::after) {
  content: "???";
}

Which again, will not work.

[evanw]

As far as I can tell, pseudo-elements deliberately don't work with CSS nesting according to the CSS nesting specification (https://www.w3.org/TR/css-nesting-1/#ref-for-matches-pseudo%E2%91%A0):

The nesting selector cannot represent pseudo-elements (identical to the behavior of the :is() pseudo-class).

So I believe esbuild is working correctly here. Both a { &::before {} } and a:is(::before) {} are equivalent according to the specification, and are equally invalid. Transforming a { &::before {} } into a::before {} would be incorrect because it's not equivalent.

[joelmoss]

Well that's interesting, as this works in Chrome 113

a {
  &::before,
  &::after {
    content: "???";
  }
}