CSS minification warnings cause catastrophic performance

[gluck]

( Initially spotted in vitejs/vite#5833 vitejs/vite#5597 )

1. If esbuild encounters a @charset rule which is not the first statement, it'll generate 1 warning per rule before that one (which can be a lot).
2. CSS minification performance gets exponential with the number of warnings (at least for this specific warning)

Combining these 2 makes css minification extremely slow when there's such a case.

Reproduction:

Generate a file like:

.foo0 { color: #ffffff; }
.foo1 { color: #ffffff; }
.....
.foo4999 { color: #ffffff; }
@charset "UTF-8";

And run it through esbuild css minifier (takes 5min+ on my laptop):

$ node -e 'for (i=0;i<5000;i++) console.log(`.foo${i} { color: #ffffff; }`);console.log(`@charset "UTF-8";`);' \
   | esbuild --minify --loader=css

Charting this:

Workaround

Removing @charset rule (hence the warnings) will fix the issue (minify is instant).
Note: this rule is injected by postcss during vite css bundling, it's not like I'm trying to break esbuild on purpose 🙈

Version

Tested against 0.14.5
Fun fact, I tried to reproduce in stackblitz (esbuild-wasm@0.13.8) and it generates a single warning (not 5000), hence no issue, but running esbuild@0.13.8 on node still exhibits above/bad behavior 🤷

[evanw]

Sorry, this was a typo. There was a missing break in the loop.

[gluck]

Thanks @evanw I confirm it fixes the build issue I had on vite !

There still seem to be a perf issue related to the number of warnings (as in exponential), which you can trigger on different (repeatable) warnings (e.g. I reproduced with json loader duplicate key warning), but I can't tell if it's worth fixing or not, lmk if you want more details.