Merge pull request #55 from michaelmoussa/abs-url-cssPath

Use url.resolve(...) instead of path.join(...) to support abs URLs

Author: aslansky

lib/css-sprite.js

@@ -11,6 +11,7 @@ var layout = require('layout');
 var replaceExtension = require('./replace-extension');
 var lwip = require('lwip');
 var Color = require('color');
+var url = require('url');
 
 // json2css template
 json2css.addTemplate('sprite', require(path.join(__dirname, 'templates/sprite.js')));
@@ -110,7 +111,7 @@ module.exports = function (opt) {
       sprites.unshift({
         name: retinaSprite.relative,
         type: 'retina',
-        image: (!opt.base64) ? path.join(opt.cssPath, retinaSprite.relative).replace(/\\/g, '/') : 'data:' + imageinfo(retinaSprite.buffer).mimeType + ';base64,' + retinaSprite.buffer.toString('base64'),
+        image: (!opt.base64) ? url.resolve(opt.cssPath.replace(/\\/g, '/'), retinaSprite.relative) : 'data:' + imageinfo(retinaSprite.buffer).mimeType + ';base64,' + retinaSprite.buffer.toString('base64'),
         total_width: sprite.canvas.width(),
         total_height: sprite.canvas.height()
       });
@@ -126,7 +127,7 @@ module.exports = function (opt) {
     sprites.unshift({
       name: sprite.relative,
       type: 'sprite',
-      image: (!opt.base64) ? path.join(opt.cssPath, sprite.relative).replace(/\\/g, '/') : 'data:' + imageinfo(sprite.buffer).mimeType + ';base64,' + sprite.buffer.toString('base64'),
+      image: (!opt.base64) ? url.resolve(opt.cssPath.replace(/\\/g, '/'), sprite.relative) : 'data:' + imageinfo(sprite.buffer).mimeType + ';base64,' + sprite.buffer.toString('base64'),
       total_width: sprite.canvas.width,
       total_height: sprite.canvas.height
     });

test/css-sprite.js

@@ -213,6 +213,30 @@ describe('css-sprite (lib/css-sprite.js)', function () {
         done();
       });
   });
+  it('should return a css file with an absolute background img URL, if applicable', function (done) {
+    var css;
+    vfs.src('./test/fixtures/**')
+      .pipe(sprite({
+        out: './dist/img',
+        name: 'sprites',
+        style: './dist/css/sprites.css',
+        cssPath: 'http://foo.bar'
+      }))
+      .pipe(through2.obj(function (file, enc, cb) {
+        if (file.relative.indexOf('css') > -1) {
+          css = file;
+        }
+        cb();
+      }))
+      .on('data', noop)
+      .on('end', function () {
+        css.should.be.ok;
+        css.path.should.equal('./dist/css/sprites.css');
+        css.relative.should.equal('sprites.css');
+        css.contents.toString('utf-8').should.containEql('background-image: url(\'http://foo.bar/sprites.png\')');
+        done();
+      });
+  });
   it('should return a object stream with a sprite and a scss file', function (done) {
     var png, css;
     vfs.src('./test/fixtures/**')