local-css minified class names issue

[Inqnuam]

First of all thank you for adding support for "CSS Modules".
The algorithm behind class names minification is great but is not side effect free.
a,b,c,d etc. is excellent to reduce bundle size but they are too short and unexpected result may happen if we import multiple esbuild bundled (local-)css files inside the same page.

Please consider a context where we have 3 entry points, "header.js", "main.js" and "footer.js" where all 3 uses "CSS modules" and we need to bundle and import them inside a page.html separately as in the example attached below.

The result is that theses 3 class names minified names are all the same (for me it was "e") and unfortunately my index.html don't look like what I excepted.

However I have 4 solutions/suggestions

• During class name minification check if the name is not already used inside another "entryPoint" then skip it
• esbuild build result should return a hash map of "original name" - "minified name" which we can later set as something like "reservedClassNames" : [...] to another esbuild context which will add theses minified (or not) class names to the algorithm of minification
• use a different algorithm to minify class names
• and a last solution which im not a big fan is adding a new option were users may customise css minfication algorithm

a combination of the 1 and the 2 solutions will be ideal for me

esbuild-local-css.zip

[Marcisbee]

Here's a reproduction of this case in esbuild playground:

https://esbuild.github.io/try/#YgAwLjE4LjE5AC0tYnVuZGxlIC0tb3V0ZGlyPWRpc3QgLS1taW5pZnkgLS1sb2FkZXI6Lm1vZHVsZS5jc3M9bG9jYWwtY3NzIC0tZm9ybWF0PWVzbQBlAGEuanMAaW1wb3J0eyBmb28gfSBmcm9tICIuL2EubW9kdWxlLmNzcyI7Cgpjb25zb2xlLmxvZyhmb28pOwBlAGIuanMAaW1wb3J0eyBiYXIgfSBmcm9tICIuL2IubW9kdWxlLmNzcyI7Cgpjb25zb2xlLmxvZyhiYXIpOwAAYS5tb2R1bGUuY3NzAC5mb28geyBjb2xvcjogcmVkOyB9AABiLm1vZHVsZS5jc3MALmJhciB7IGNvbG9yOiBvcmFuZ2U7IH0

[nicksrandall]

I just came here to report this same issue! In my case, I have a component library compiled with esbuild and a then an app compiled with esbuild and many of the class names are clashing.

Other bundlers minify the class names and then append a hash of the file contents to namespace them so class j becomes j-esaj2ja where esaj2ja is a hash of the original file's contents.

[Inqnuam]

@nicksrandall for a component library I have imagined esbuild could check for a special field in package.json to get more resources for "reservedClassNames" like esbuild does for "sideEffect".

A "reservedClassNames" field can be an array of string of reserved class names, or a string which would be path to a file.

Library author could emit into this "reservedClassNames" field reserved class names produced by esbuild like I mentioned in my suggestions (2)

I still think a,b,c,d etc. is a great minification technic to reduce bundle size but without fixing this name collision issue local-css will have a limited usage