add option to local-css to prefix minified classnames

[mpech]

link of original issue which was resolved: #3295

our main concern is avoiding classname conflict accross lib built separately

Our problem is the following

• we have library A bundled by esbuild
• client B which depends on library A, also bundled after by esbuild
  => when B builds, B's stylesheet clashes with A's stylesheet, because we do not specify A as entrypoint, we just get the built files from A

What we would appreciate

• enable customizing classname like 'A[classnamehash]' (this would be the best, we could prefix our classes by libraryname)
• either specify A's stylesheet when building B to esbuild (it may be impractical, because if B is actually not a client but a library too, and if B uses A as peerdeps, while bundling B we will avoid clashes from A, but when building the client, maybe the classnames generated of A will have changed by then, which forces to have strict versionning)

[mhsdesign]

Yes i agree. I currently have encountered the same problem. Im building a javascript problem and it seems that another plugin already uses esbuild which causes css classes to overlap randomly. A simple prefix like my-vendor would be perfect.

lightningcss also allows to declare a prefix via their "pattern" option: https://lightningcss.dev/css-modules.html#custom-naming-patterns

[zouloux]

Hi, this is also an issue on some projects here.
I didn't find a way to intercept renaming through a plugin.
If anybody has a temporary solution, it would be helpful. In the meanwhile, we will disable the minify option.

[mhsdesign]

You can use another plugin for css modules - like mine ^^ https://github.com/mhsdesign/esbuild-plugin-lightningcss-modules its based on lightningcss

[markplindsay]

@evanw, my team develops a browser extension, and I recently switched us to esbuild for the dramatic speed improvement. Thank you very much for writing this software.

Our extension coexists in the DOM on many websites, and it is subject to these sites' global styling. I was troubleshooting a visual bug this week, and I noticed that Reddit uses a classname simply named .a. (Perhaps it is even generated by esbuild.)

Unfortunately, this conflicts with an .a classname generated by our esbuild during local-css's minification process, and it messes up our extension's styling when it is rendered on Reddit.

We're currently working around this by not minifying our extension, but introducing an optional prefix for generated local-css classnames as configuration would solve this problem for us 100%.

[kachurun]

I have the same problem. I'm creating a powerful HTML element for my website builder, and every single HTML element has its own bundle. Now, when two or more elements with CSS modules are involved, it causes this issue.

[chowey]

I just have a site with pre-existing CSS. Someone in the distant past decided to use a short class name. Now it conflicts with the minified class names from esbuild.

So I'd also like to see an option in esbuild to prefix class names.

[chowey]

I took a stab at this with #3914. It's working for me locally.

I called the new setting local-css-prefix.

[ziemkowski]

#3914 would be helpful.

Using CSS Modules with Rollup/LightningCSS has encouraged the team to go back to using simple class names like .btn, .contianer, .link, .row, etc., which are defined in most CSS framework out there and collide if esbuild-generated local CSS classnames can't be made unique via prefix or hash.

Unfortunately, the CSS Module plugins I've tried so far to get around this break down with splitting: true.