Nested selectors with pseudo-elements result in invalid selectors

[yusuke-omae]

esbuild version: 0.17.19

Suppose you enter the following CSS:

.foo {
  position:relative;
  &::before, &::after {
    position: absolute;
    content:"";
  }
}

expected transform css

.foo {
  position: relative;
}
.foo::before,
.foo::after {
  position: absolute;
  content: "";
}

actual transform css

.foo {
  position: relative;
}
.foo:is(::before, ::after) {
  position: absolute;
  content: "";
}

Because of the specification that pseudo-elements cannot be placed in the :is() selector, it is treated as an invalid selector in the current implementation.

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().

[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 .foo { &::before {} } and .foo:is(::before) {} are equivalent according to the specification, and are equally invalid. Transforming .foo { &::before {} } into .foo::before {} would be incorrect because it's not equivalent.

[yusuke-omae]

@evanw Thanks for the quick and precise response.
I certainly recognized that my supposed selector should be invalid.
I realize that checking for invalid selectors at the point of entry is outside the scope of esbuild.

[evanw]

I'll ask for clarification on this behavior. Right now there is only one implementation of this (Chrome) so it's hard to say what's a bug and what isn't. The CSS nesting specification is also still being actively changed so it's hard to say what the eventual behavior of CSS nesting is going to end up being. We'll have to wait and see. I know the people on CSS nesting want to remove this restriction. It sounds like they want to fix this by changing :is() to work with pseudo-elements, at which point this will automatically start working.

[evanw]

I'm reopening this because it looks like you're right. That part of the specification only applies to pseudo-elements that come in through the & selector from the parent selector, but not to any of those that are joined with the & selector later.

[yusuke-omae]

@evanw thanks!