add option to local-css to prefix minified classnames

evanw / esbuild

An extremely fast bundler for the web

https://esbuild.github.io/

MIT License

37.94k stars 1.13k forks source link

add option to local-css to prefix minified classnames #3484

Open mpech opened 10 months ago

mpech commented 10 months ago

link of original issue which was resolved: https://github.com/evanw/esbuild/issues/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 commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

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

markplindsay commented 5 months ago

@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 commented 2 months ago

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 commented 6 days ago

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 commented 23 minutes ago

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

I called the new setting local-css-prefix.