Provide a flag to auto-prefix local css classes when minified

[chowey]

This addresses #3484 by providing an option to prefix css classes when minifying css modules.

I created the --local-css-prefix command line flag, e.g. --local-css-prefix=myapp-. I also exported this through the Javascript API.

You can now do e.g.

await esbuild.build({
  entryPoint: "index.js",
  outdir: "./dist",
  bundle: true,
  format: "esm",
  minify: true,
  localCSSPrefix: "myapp-", // new option
});

---

With the following input files:

index.js

import classes from "./classes.module.css";

document.getElementById("main").className = classes.localClassWithRedText;

classes.module.css

.localClassWithRedText {
  color: red;
}

This produces the following output files:

dist/index.css

.myapp-o{color:red}

dist/index.js

var e={localClassWithRedText:"myapp-o"};document.getElementById("main").className=e.localClassWithRedText;

[ziemkowski]

@chowey Any reason to limit this to minified classnames? Local classname collission is still an issue without minification if you use common names such as .btn, .row, .box, .container, etc. which is easy to run into with CSS Modules.

[chowey]

@ziemkowski If I understand you correctly, your requirement should already work.

So long as your CSS files are correctly identified as CSS modules, local classnames (when minification is disabled) should not be an issue. esbuild already renames them.

See this example. Taking these two files:

.btn {
  color: red;
}

.btn {
  color: blue;
}

they successfully bundle into this one file:

/* a.module.css */
.a_btn {
  color: red;
}

/* b.module.css */
.b_btn {
  color: blue;
}