CSS files should be part of the bundle

[francoisfrisch]

Right now css files are minified but not added as part of the bundle, each file is loaded separately.
CSS files should be part of the bundle so that no extra requests are made.

It should be possible to programmatically add the css files by either adding the rules to the content of a <style> tag or directly adding the content via the CSSOM.

There might be some issues with rule precedence and urls will need to be rebased.

[Stuk]

There's a problem of relative URLs in the CSS files not working when bundled, so these need to be rebased.

[kriskowal]

I wanted to solve this problem by converting CSS into JavaScript modules, but need runtime support. Rebasing the URL’s is not a grave concern. But factoring and aggregating are problematic. That is, if a style sheet is embedded in multiple locations, it doesn’t make sense to embed transitive dependencies at each point. It makes much more sense to just make the sheet a module and convert @import to require().

[rkaiser0324]

+1 on this. Beyond the extra HTTP requests in the ordinary web case, in the case of our native hybrid application, we need to explicitly list out each asset file to be embedded at compilation time. Since mop concatenates Javascript, that part is easy - but you can easily have dozens of CSS files you need to manage. Having them bundled as well, would make setting up the compilation step much easier.

[kriskowal]

Assigning to @aadsm in hopes that we can have a conversation about how to coordinate an effort to support this case across, Mr, Mop, and Montage’s component system. I have laid some groundwork in the v2 branch of Mr, as well as this sample package that illustrates how CSS can be loaded through our module system with the additional configurability in v2. https://github.com/montagejs/mr-css. Of course, Mr is equally configurable in v1, but the configuration would have to be integrated in montage/montage.js and it would be cumbersome for the extensions to use modules.