CSS transforms can break nested selectors (original) (raw)

https://esbuild.github.io/try/#YgAwLjIwLjAALS1zdXBwb3J0ZWQ6bmVzdGluZz1mYWxzZQBlAGVudHJ5LmNzcwBkaXYgewogID4gaW5wdXQsCiAgPiBsYWJlbCA+IGlucHV0IHsKICAgIG1hcmdpbjogMWVtOwogIH0KfQ

Esbuild transforms this:

div {

input, label > input {

into this:

div > :is(input, label > input) {

Looks good right? No!
The following

actually means "select an input that is an immediate child of label AND is also an immediate child of div", which is just not possible.

I use esbuild through Vite, but I couldn't figure out a way to avoid this issue without disabling build.cssMinify. Is there an esbuild option to never transform nested selectors?

In Vite I've tried

build: { target: ['chrome121'], }, esbuild: { minifyIdentifiers: false, minifySyntax: false, minifyWhitespace: false, supported: { nesting: true } },

without success, the broken selectors are still using :is().