search

montagejs / mop

Montage Optimizer (mop): Minifies (to reduce file size) and creates bundles (to reduce the number of requests) of Montage applications.
Other
31 stars 15 forks source link

CSS files should be part of the bundle #48

Open francoisfrisch opened 10 years ago

francoisfrisch commented 10 years ago

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 commented 10 years ago

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

kriskowal commented 10 years ago

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 commented 10 years ago

+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 commented 10 years ago

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.