search

developit / microbundle

📦 Zero-configuration bundler for tiny modules.
https://npm.im/microbundle
MIT License
8.05k stars 362 forks source link

CSS not getting imported in compiled output #1045

Closed CarlosNZ closed 1 year ago

CarlosNZ commented 1 year ago

I have a "style.css" in the same folder as my entry point "index.ts". I have import './style.css' in my project and it works just fine in development.

However, when running microbundle, all reference to the css file is stripped from the compiled output. The css file is copied to the output folder. (as "index.css") though.

I've temporarily set --compress false in my microbundle command so I can read the output js easier, and there is no reference whatsoever to the CSS import any more, and so the built package doesn't have any styles. If I manually add require('./index.css') to the compiled index.js, it works.

So what am I doing wrong, or is this a bug? Is it a Typescript thing? I've tried various settings for --css-modules, with no improvement. 🤷‍♂️

Any help appreciated. :)

rschristian commented 1 year ago

There's no bug, this is the intended behavior.

While we're getting closer, there's still no standardized way to reference CSS files from within JS, especially in ecosystems like NPM. As such, we strip out references to CSS because how you consume it in different environments (if the environment can at all) varies wildly.

Your consumers will need to "import" the CSS separately according to their environment.

See: https://github.com/developit/microbundle/issues/416

CarlosNZ commented 1 year ago

Okay, thanks for the quick response, @rschristian, and the issue link is an interesting read.

Might have to look into some alternative approaches.

rschristian commented 1 year ago

I've only vaguely tracked it, but I believe Import assertions/attributes are the eventual solution here, but they did just get demoted back to stage 2 a few months ago, so it'll probably be a fair while yet.

rschristian commented 1 year ago

Going to close this out as there's nothing actionable here for us. Certainly feel free to reply if you have any other issues.