URL rewriting in CSS

[piuccio]

Hi, I have a bundle that includes the following CSS

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

and the following JSPM config

System.config({
  "baseURL": "/assets"
});

The CSS in the bundle is rewritten as

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

It is not taking into account the baseURL. I'm expecting the URL to be

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

@guybedford This is very similar to #11 with the only difference that baseURL is ignored.

[guybedford]

@piuccio the baseURL that is used when building is the one from the package.json file directories.baseURL value, or the package.json folder itself.

If you want the CSS to be normalized relative to a different URL, set the System.rootURL value, which should provide the behaviour you're looking for.

Let me know if that makes sense and works out ok.

[piuccio]

Hi, I've tried both.

directories.baseURL apparently is the base path for all files on my local repository. If this folder doesn't exist, the bundle fails.

I tried this in my config.js

System.config({
  "baseURL": "/assets",
  "rootURL": "/assets"
});

But that doesn't have any effect. The code generated is the same. Am I setting the rootURL on the wrong place?

I'll setup a repo to better explain the problem

[piuccio]

This is the repo with the issue.

[guybedford]

@piuccio thanks for posting. There was a bug in rootURL that was not working properly. I've added a patch for this in master, but it's not enough to solve your issue.

The problem here is exactly why rootURL was introduced - for when the baseURL doesn't match the base server path. Only it turns out the current rootURL solution isn't quite adequate for this yet.

The problem is that CleanCSS doesn't seem to allow arbitrary path changes like renaming "js" on the server to "assets" on the client in this instance.

The temporary fix for now would be:

• Serve "assets" as "js"
• Install css@master
• set config.rootURL to ../

That will at least output css relative to "js/...".

Then I think we can solve the issue properly with the following changes:

• Switch over to PostCSS (Use PostCSS over cleanCSS #22)
• We then always make all paths absolute relative to the rootURL or baseURL

[guybedford]

We're strongly looking at moving away from baseURL entirely in the next major release of SystemJS.

The point being that the specification is making module names align more with URLs - and URLs don't magically have this "rebasing" property.

If we do that, baseURL would mean the same as rootURL, and I think this issue goes away then.

If you really need us to take a look do let me know though further, for now not making this a major priority, although yes it is a bug in the current design.

[piuccio]

Do you have an ETA for the next major release? Neither SystemJS or jspm-cli are using milestones, so it's hard to follow the progress.

I'll close this issue and wait for next major release. I'm not bundling right now, but if I'll have to, I'll keep CSS out of the bundle.

[guybedford]

Sure, note that the release will have breaking changes (eg js extensions no longer added automatically), but the upgrade path shouldn't be too painful.

Very difficult to give an ETA, maybe somewhere between 1 week and 1.5 months :)

[emigre]

@guybedford I have a related problem. I copy with gulp all fonts form the libraries I use to a fonts folder in dist...

var copyFonts = gulp.src('jspm_packages/**/*.{eot,svg,ttf,woff,woff2}')
  .pipe(flatten())
  .pipe(gulp.dest('dist/fonts/'));

Those fonts are used by CSS files that are imported with plugin-css. Then when I use the SystemJS Builder the paths are changed. For example the font-awesome paths change from '../fonts/fontawesome-webfont.eot?v=4.4.0' to '../../jspm_packages/npm/font-awesome@4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0'.

I think that a quick easy solution for this would be to give the user of plugin-css the possibility to use an option called rebase, this is a boolean that can be used as an argument to clean-css that skips URL rebasing.

If you think that this would be a good idea I can try to make a fix for this and do a merge request.

Related to /issues/52

[emigre]

I've just done it, in Emigre/plugin-css, and then tried it in my project: it works.

I'm going to do a PR, you can approve it if you think it's a good idea. For me it would be a useful addition.

cheers!

[emigre]

After playing around with the modification for a while, I'm not entirely sure it's useful.

The css files maintain their paths intact, but the produced external sourcemaps still have their sources property pointing outside of dist, to the jspm_packages folder (i.e. "sources":["../../jspm_packages/github/twbs/bootstrap@3.3.5/css/less/labels.less", ...).

Maybe the idea is to copy te whole jspm_packages folder to dist, so the both the original files and the fonts can be referenced?

Sorry if this is a little bit off-topic.

[emigre]

I've just been told that indeed the idea is to copy jspm_packages to the server. Maybe the pull doesn't have sense, then? Apologies for the confusion, I've just started to use jspm and SystemJs recently.

[guybedford]

It could be worth having an "inline" option that inlines images and fonts etc as data-uris. The source map can then also inline the original sources itself, making everything self-contained. Experimenting with these workflows is important, and not something that is currently being priorised unfortunately just yet.

[ArmorDarks]

To be honest, I totally can't figure out how baseURL and rootURL works and what they do.

I thought that asking system.js to set all urls in imported files to point to something different would be quite trivial, but seems like not...