Control imports and url() rewriting in CSS

[smajl]

When I make sfx bundle (with separate CSS) I get from this in source files:

url('../fonts/fontawesome-webfont.eot?v=4.3.0')

to this in bundled CSS:

url(jspm_packages/npm/font-awesome@4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0)

This obviously doesn't work in production. Can please someone give me an advice, how to change my bundle task, so it keeps the urls intact or at least I can override the root path?

gulp.task('bundle', function (cb) {
  var Builder = require('systemjs-builder');
  var builder = new Builder();
  builder.loadConfig('./jspm.conf.js').then(function() {
    builder.buildSFX('src/bootstrap', PATHS.tmp.scripts + 'build.js', { sourceMaps: false, config: {sourceRoot: PATHS.tmp.scripts} })
      .then(function() {
        return cb();
      })
      .catch(function(ex) {
        cb(new Error(ex));
      });
  });
});

jspm.config.js:

System.config({
  "baseUrl": "./",
  "paths": {
    "*": "*.js",
    "travelis": "src/*.js",
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  },
  "buildCSS": true,
  "separateCSS": true
});
...

[smajl]

Perhaps @guybedford could help? Or @Alxandr who introduced #9? Thanks guys. This is the last thing separating me from successful production build here. :D

[Alxandr]

You would have to modify the css plugin to allow for more settings I think.
Or rather, use settings you pass in.

[guybedford]

@smajl can you not make the font URL an absolute URL instead of a relative URL? Then it shouldn't be changed I don't think?

[Alxandr]

@guybedford absolute uri's can't really be used. Just imagin installing bootstrap for instance. How should it know where it was installed to? Even your own local css can't nesesarily use absolute paths in the css if you have different hosting (locally when I develop I use localhost:3000/, whereas on github pages it's yolodev.github.io/<repo-name>, so the absolute path is different.

[guybedford]

@Alxandr right. Note that for dynamic imports, assets and source maps, it can actually advisable to still serve jspm_packages in production.

[Alxandr]

Yeah, but if I do jspm bundle it just globs them all up into one blob for me nicely :)
My application went from ~150 requests to ~7, and from 10 seconds to bot down to 1.

Not really important to get the css in, but it's fun when this stuff Just Works (TM) ^^

[smajl]

I have (temporarily) solved this with help of gulp-inject and gulp-usemin. I am basically including manually all the CSS libs with relative urls that I don't want to clobber. Then injecting the bundled CSS, then my own CSS. Then it is all "bundled" again with usemin. Inspired by @martinmicunda workflow. It looks like this:

  <!-- build:css(.) styles/main.min.css -->
  <link rel="stylesheet" href="jspm_packages/github/smajl/bootstrap@master/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.css" />
  <!-- inject:build:css --><!-- endinject -->
  <link rel="stylesheet" href=".tmp/styles/main.css" />
  <!-- endbuild -->

Problems will arise, when I would need to import some JS lib which has dependency on CSS with urls - the CSS would get processed by plugin and urls cloberred and bundled. I obviously don't want to include the whole file again (duplicating it just to override paths back to original) so I would need to e.g. utilize CSS specificity to override those urls.

[Alxandr]

@smajl btw, what is wrong with the path that's generated?
jspm_packages/npm/font-awesome@4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0 seems like a valid path to me. But the path you get depends on where you place the bundle file. For instance, in my setup I get paths like ../jspm_packages/..... instead, because I build the bundle to lib/app.js.

[smajl]

@Alxandr Well.. you are right, there is no problem with url like that. In practice, I will need to change the build workflow slightly. Copy all the fonts and images to dist directory while keeping the jspm folder structure, that will work.

Unfortunately, no matter where I generate the bundle file, the urls are always the same absolute path as mentioned at the top. Would really like to have that same ../jspm_... as you have, so I can have structure like this. :)

scripts/...
styles/main.min.css
jspm_packages/...
...

[Alxandr]

You're using the separateCSS option, right?

It's supposed to be handled by this line: https://github.com/systemjs/plugin-css/blob/master/css-builder.js#L26

[smajl]

@Alxandr See my first comment, bottom part, there is my jspm config. Yep, I am using separateCSS. No matter what, I get the same paths in URLs..

[guybedford]

Right, I've created #13 - it's an important part of the normalization rules.