CSS output filename should not be tied to JS format

[rschristian]

Excluding v0.13.0 (due to the issue outlined in #776 & #777), Microbundle can end up using the JS format in the CSS file's name. For example, imagine I have the following keys in my package.json:

{
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "exports": "dist/index.modern.js",
  "umd:main": "dist/index.umd.js",
}

If I were to run Microbundle with microbundle build -f modern, then only index.modern.js will be in my output, but also causes index.modern.css to be generated. In most cases this likely wouldn't be an issue, as if I was targeting only modern I'd likely have it represented by index.js (remove the modern specifier altogether) but it is a side case that can emerge.

This is less than ideal as it's pointless in the case of Modern & UMD; confusing in the case of ESM as index.module.css does carry a different meaning.

Should be simple enough to edit the extract logic for rollup-plugin-postcss.

[kyriacos]

Ran into this when in development. I have a watch script and unfortunately i have to pass --format cjs so i can get the generated names to be correct. Wanted to run --format modern instead as i don't need the cjs version when developing in a monorepo. Any suggestions?

Thanks!

[rschristian]

@kyriacos You can use the "exports" field to get around this somewhat, providing the build tool you use supports consuming them.

"exports": {
    ".": "dist/index.modern.js",
    "./index.css": "dist/index.modern.css"

Then you can import via import "my-module/index.css";

[kyriacos]

Thank you!

I did try the exports field, but I probably mapped the keys wrong :).

I'll try again with the snippet you gave me.