CSS minification combines vendor-specific selectors creating invalid rules

[adamwathan]

If you feed something like this into esbuild's CSS minification:

.form-input:-moz-placeholder-shown {
  color: black;
}
.form-input:-ms-input-placeholder {
  color: black;
}
.form-input:placeholder-shown {
  color: black;
}

...you get this output:

.form-input:-moz-placeholder-shown,
.form-input:-ms-input-placeholder,
.form-input:placeholder-shown {
  color: black;
}

This unfortunately breaks the rule completely because Chrome has no idea what -ms-input-placeholder is for example and marks the entire rule as invalid and doesn't apply it.

In this example, the selectors should not be combined since they can't be combined safely and the output should remain as:

.form-input:-moz-placeholder-shown {
  color: black;
}
.form-input:-ms-input-placeholder {
  color: black;
}
.form-input:placeholder-shown {
  color: black;
}

Twitter thread where this surfaced just in case helpful: https://twitter.com/mmmykolas/status/1460249898499166211

Thanks as always for your amazing work on this project! 🙌

[evanw]

Additional context:

• This behavior was introduced recently to fix this esbuild issue: Improve minify css result. #1755.

• I found this thread on how to fix this: fix(postcss-merge-rules): prevent breaking rule merges cssnano/cssnano#1072. The approach seems to be to completely disable this optimization and then only re-enable it in cases where you are 100% sure it won't cause any issues, either because all selectors involved have been supported in CSS from the very beginning or in at least the browsers listed in esbuild's target setting (which would require a dense feature compatibility matrix for CSS, which I don't have at the moment).

[adamwathan]

Thanks Evan! Here's another related discussion where this is starting to show up more: tailwindlabs/tailwindcss#6096

[hyrious]

Merging rules is difficult, as well as DCE (removing unnecessary rules that are covered by other rules below) because of keeping specificity. I've looked for a super CSS minification tool before but each of them have some drawback. We can just turn off this optimization for now, until a better algorithm be found.

[adamwathan]

Thank you @evanw!

[Neophen]

Thank you!!!