check bootstrap installs css dependency

[smajl]

Yep, I was wondering if it's best to add dependency to CSS loader and shim CSS file into page when someone imports bootstrap. May be good for quick hacking, but often developers chain CSS/LESS/SASS files from libraries into their own build process and then include only one file.

[guybedford]

It's supposed to be, but the override seems to be out of date. Contributions welcome.

[smajl]

So to be clear, when some JS library requires CSS file(s) to look/work properly, I must shim it in the override? It is not optional or dependent on the developer but it is mandatory?

So what should I do, when I don't want to load multiple CSS files, but control it on my own? I guess forking (and modded package.json in the fork) is again my only option until persistent local overrides work. :)

[guybedford]

@smajl if you want to do your own control, you can do something like:

import 'some-package'; // import js
import 'some-package/style.css!'; // import css separately

We're going to be adding support to Bootstrap for importing just the JS eventually, but for now that is not possible to provide both options through config.

Local overrides are really not a solution - I know it seems easier, but it breaks shared dependencies.

[smajl]

@guybedford To be more specific, I just wanted to make a PR for one angular module which needs CSS to work properly. So I am probably supposed to shim that CSS in the override for others. But I don't want to be forced to load that CSS, I want to merge it with my other styles into one file. It's like biting your own tail here... :D

[guybedford]

@smajl what do you mean you want to merge it with your other styles into one file? How is creating an override shim stopping you from doing that?

[smajl]

@guybedford It's not stopping me, I can do that, but I would then load the package's CSS twice. Once shimmed and once in my CSS build. dep1.css+dep2.css+my.css vs dep1.css!, dep2.css!, dep1.css+dep2.css+my.css

[guybedford]

Can you clarify why you would be loading the CSS twice?

[smajl]

Me or someone else adds angular-loading-bar to registry:

{
  "directories": {
    "lib": "build"
  },
  "main": "loading-bar",
  "registry": "jspm",
  "dependencies": {
    "angular": "^1.2.0",
    "css": "*"
  },
  "shim": {
    "loading-bar": {
      "deps": ["angular", "./loading-bar.css!"]
    }
  }
}

This means, when I do import 'angular-loading-bar' in my code, it will add link tag to my page head and asynchronously download the loading-bar.css file. For some developers it might by OK, but I don't want N-HTTP requests from N-packages which shim some CSS files.

I have my LESS file, which builds automatically and imports other CSS/LESS files, e.g.:

@import (inline) '../../jspm_packages/github/chieffancypants/angular-loading-bar@0.6.0/loading-bar.css';
@import 'other-library';

// my own less
.body {}

And then I have one link tag and one HTTP request. If package offers LESS source for their CSS, I can also easily override variables in their LESS files, etc.

That is why I am againt shimming of CSS files. Interestingly, e.g. font-awesome is basically just all about CSS and it doesn't shim anything and leaves me in control.

[guybedford]

Right, thanks. CSS builds are now supported by default inlining into bundles as of yesterday. Update jspm and the CSS plugin to see this working, it's documented at https://github.com/systemjs/plugin-css.

[smajl]

Well, seems like I will have to change my workflow then:

1) Don't use any link stylesheet tags in document head. 2) Use something like this:

import 'dep1'; // loads dep1.css in the process
import 'dep2; // loads dep2.css in the process
import 'my.css!';

// my JS code

3) Don't import CSS/LESS from dependencies in my CSS build (which produces my.css), let the jspm handle that when bundling.

Just one last thing, I would have to ensure, that my.css files gets loaded last (to ensure that last CSS rule defined overrides any previous, conflicting rules). How to do that?

[guybedford]

I'd suggest that yes.

You can also use the separateCSS option to create a CSS file along with each bundle that can be included with a link tag.

In terms of order, it's advisable to rely on specificity over order if using this CSS approach. I've updated the docs at https://github.com/jspm/jspm-cli/wiki/Plugins#css-builds about this stuff.

Apologies if it's messing with your workflow, feedback would be great to hear.

[smajl]

Well, I really love the idea of almost zero config install-and-forget packages including everything you need, but it takes time to do that mind shift from current habits. :) I haven't realized that we should omit 'link' tags at first. :) And relying on specificity is OK with me.

Thanks for updating the docs and your time, you've been a great help.

[guybedford]

Thanks, glad to know it's not too much of a pain!

[fernandogmar]

Hi guys,

I know this is a old thread... but I was using jspm lastly and it is really nice... and a question came to my mind, since everthing is installed using packages how to load the styles related to them...

lol, yes I know the css-loader... I was using requirejs for some years. But still as smajl said, when you need to override... and reuse style, as in the case of less, sass,... you need to be able to set the configuration of a "global" style, at least for now ( itcss explains this well)

Here the "import" problem is solved in js... that could be a tricky option sometimes for styling... so I was guessing if there are some other options... so I have found also plugins related with less like:

https://github.com/sebasrodriguez/jspm-less https://github.com/richardlawley/less-plugin-jspm-import

also this plugin to load sass resolves paths to jspm packages: https://github.com/mobilexag/plugin-sass

I wanted to write them here for others like me :D.