css nesting lowering doesn't work when both a pseudo element selector and a class selector is used

[sapphi-red]

For this input,

.foo {
  &:after,
  & .bar {
    grid-area: 1 / 1 / 2 / 2;
  }
}

esbuild outputs

.foo .bar,
.foo .bar {
  grid-area: 1 / 1 / 2 / 2;
}

. I expect

.foo:after,
.foo .bar {
  grid-area: 1 / 1 / 2 / 2;
}

to be output.

Interestingly, the following works as expected:

.foo {
  & .bar,
  &:after
   {
    grid-area: 1 / 1 / 2 / 2;
  }

  &:after {
    grid-area: 1 / 1 / 2 / 2;
  }

  &:before,
  &:after {
    grid-area: 1 / 1 / 2 / 2;
  }
}

esbuild try

Original issue: vitejs/vite#15912

[evanw]

Thanks for the report. It looks like this is not intentional. It was caused by incorrectly mutating the parent rule's selector list when filtering out pseudo elements for the child rules.