CSS filename gets prepended to url() string

[zourtney]

Got another one for you :-) When pulling in styles via the css! plugin, I'm seeing the file/module name prepended to CSS url(...) contents.

For example:

index.html

<script src="../curl/src/curl.js"></script>
<script>
  curl({
    paths: { curl: '../curl/src/curl' },
    pluginPath: 'curl/plugin'
  }, ['css!style.css']);
</script>

style.css

body {
  background: #ff00ff url(niceBackground.jpg);
}

crammed, the URL becomes url(\"style.cssniceBackground.jpg\"). Full module output:

;define('style.css', function () { return "body {\n  background: #ff00ff url(\"style.cssniceBackground.jpg\");\n}"; });
define('curl/plugin/css!style.css', ['curl/plugin/style!style.css'], function (sheet) { return sheet; });

Whereas I'd expect it to still be url(niceBackground.jpg) (...right?). I get the same result with and without quoting the URL.

[unscriptable]

Thanks @zourtney!

We wouldn't have caught this since we only bundle our "structure" css rules, leaving the "skin" rules in a theme file external to the main app code. (oocss)

There has to be some level of translation unless the bundled file will stay at the baseUrl. Hm, maybe this isn't a bad restriction to have in place until we figure out a universal strategy for this. Seems like we'd have to do a mix of build-time and run-time translations to get it right 100% of the time.

Thoughts?

-- John

P.S. we're also on #cujojs on freenode if you prefer to chat live.

[zourtney]

This might be trickier than I first imagined. My assumption was that cram did an ignorant dump of the CSS contents. Clearly it's smarter than that :-) I was thinking the url() contents would remain unchanged -- thus resources would be relative to the cram'ed bundle. With the example above, the end-user would construct something like:

deploy/
    app.js                   <-- cram's output bundle
    curl.js
    background.jpg

Of course, that's an overly simple example. I'm referencing resources with relative pathnames (ack!), so this isn't what we want, ultimately, but it's predictable starting point.

Moving to a more OOCSS approach might be the best approach, but likely won't be practical on my current project. Does cram provide a way of ignoring all css! includes from the bundling process?

[unscriptable]

Hey @zourtney,

I updated curl's cram/css plugin on the dev branch. Here's how it works:

1. At build time, relative ids in the stylesheet are translated to urls that are relative to baseUrl. This is done in two parts:
   1. The url in the css is treated as an id that is relative to the css file and normalized to the css file's id. For instance, url(assets/foo.png) in a css file whose id is "myapp/styles.css" will be translated to "myapp/assets/foo.png".
   2. The url-cum-id is "rebased" onto baseUrl by using the paths and packages in the config. For instance, if you have a path mapping myapp: "client/myapp", the url becomes "client/myapp/assets/foo.png". This is what is written into the bundle.
2. At run time, urls are again translated by appending them to baseUrl. If in production your baseUrl is "deploy", the final url will be pageUrl + "deploy/client/myapp/assets/foo.png".

I just realized that a more flexible approach would be to run the urls through curl's path mapping routine again at run time. This would allow you to redirect the urls to anywhere. Let me know if you need that and I'll get it in asap.

Sorry, but this code is minimally tested, atm. :(

cram will support a way to exclude certain modules/files, but it's only half implemented. It should be easy to finish, actually. I could get it done relatively quickly. Let me know if you think that's a better option for you.

-- John

[unscriptable]

I also updated the curl/plugin/style.js file. Just FYI in case you're copying files instead of pulling the whole repo.

[zourtney]

Well, the option to exclude files would be more beneficial in the short term. I'll want to deploy this project with a stitched, master "style.css" anyway. And then cram all Javascript into its own file(s).

---

That said, I did try out the edge version. I'm getting a leading / instead of the baseUrl pathname. Thus all URLs become relative to the server root!

I'm still trying to get my head around this. Am I missing something simple? Or misunderstand the current implementation? My test project is set up something like the following:

style.css

body { background: #ff00ff url(assets/niceBackground.jpg); }

run-deploy.js

curl({
  baseUrl: "deploy",
  paths: {
    curl: '../curl/src/curl'
  },
  pluginPath: 'curl/plugin'
}, ['css!style.css']);

output.js (partial)

;define('style.css', ['curl/plugin/style', 'require'], function (injector, require) {
  var text = "body {\n  background: #ff00ff url(\"/assets/niceBackground.jpg\");\n}";
  if (1) text = injector.translateUrls(text, require.toUrl(""));
  return text;
});

cram'ed via something like

node cram ./csstest/run-deploy.js -r ./csstest -o ./deploy.js

Thanks again for your help, and active development on this project!

[unscriptable]

This should be fixed in dev.