Merge pull request #224 from steveluscher/imagePath

Implemented the image_path option

README.md

@@ -51,6 +51,9 @@ The API for using node-sass has changed, so that now there is only one variable
 #### includePaths
 `includePaths` is an `Array` of path `String`s to look for any `@import`ed files. It is recommended that you use this option if you are using the `data` option and have **any** `@import` directives, as otherwise libsass may not find your depended-on files.
 
+#### imagePath
+`imagePath` is a `String` that represents the public image path. When using the `image-url()` function in a stylesheet, this path will be prepended to the path you supply. eg. Given an `imagePath` of `/path/to/images`, `background-image: image-url('image.png')` will compile to `background-image: url("/path/to/images/image.png")`
+
 #### outputStyle
 `outputStyle` is a `String` to determine how the final CSS should be rendered. Its value should be one of `'nested', 'expanded', 'compact', 'compressed'`.
 [Important: currently the argument `outputStyle` has some problem which may cause the output css becomes nothing because of the libsass, so you should not use it now!]

binding.cpp

@@ -23,14 +23,19 @@ void WorkOnContext(uv_work_t* req) {
 void extractOptions(_NAN_METHOD_ARGS, void* cptr, sass_context_wrapper* ctx_w, bool isFile) {
   char *source;
   char* pathOrData;
+  char* imagePath;
   int output_style;
   int source_comments;
   String::AsciiValue astr(args[0]);
 
+  String::AsciiValue bstr(args[1]);
+  imagePath = new char[strlen(*bstr)+1];
+  strcpy(imagePath, *bstr);
+
   if (ctx_w) {
     // async (callback) style
-    Local<Function> callback = Local<Function>::Cast(args[1]);
-    Local<Function> errorCallback = Local<Function>::Cast(args[2]);
+    Local<Function> callback = Local<Function>::Cast(args[2]);
+    Local<Function> errorCallback = Local<Function>::Cast(args[3]);
     if (isFile) {
       ctx_w->fctx = (sass_file_context*) cptr;
     } else {
@@ -39,18 +44,18 @@ void extractOptions(_NAN_METHOD_ARGS, void* cptr, sass_context_wrapper* ctx_w, b
     ctx_w->request.data = ctx_w;
     ctx_w->callback = new NanCallback(callback);
     ctx_w->errorCallback = new NanCallback(errorCallback);
-    output_style = args[4]->Int32Value();
-    source_comments = args[5]->Int32Value();
-    String::AsciiValue bstr(args[3]);
-    pathOrData = new char[strlen(*bstr)+1];
-    strcpy(pathOrData, *bstr);
+    output_style = args[5]->Int32Value();
+    source_comments = args[6]->Int32Value();
+    String::AsciiValue cstr(args[4]);
+    pathOrData = new char[strlen(*cstr)+1];
+    strcpy(pathOrData, *cstr);
   } else {
     // synchronous style
-    output_style = args[2]->Int32Value();
-    source_comments = args[3]->Int32Value();
-    String::AsciiValue bstr(args[1]);
-    pathOrData = new char[strlen(*bstr)+1];
-    strcpy(pathOrData, *bstr);
+    output_style = args[3]->Int32Value();
+    source_comments = args[4]->Int32Value();
+    String::AsciiValue cstr(args[2]);
+    pathOrData = new char[strlen(*cstr)+1];
+    strcpy(pathOrData, *cstr);
   }
 
   if (isFile) {
@@ -58,21 +63,21 @@ void extractOptions(_NAN_METHOD_ARGS, void* cptr, sass_context_wrapper* ctx_w, b
     char *filename = new char[strlen(*astr)+1];
     strcpy(filename, *astr);
     ctx->input_path = filename;
-    ctx->options.image_path = new char[0];
+    ctx->options.image_path = imagePath;
     ctx->options.output_style = output_style;
     ctx->options.source_comments = source_comments;
     ctx->options.include_paths = pathOrData;
     if (source_comments == SASS_SOURCE_COMMENTS_MAP) {
-      String::AsciiValue cstr(args[6]);
-      ctx->source_map_file = new char[strlen(*cstr)+1];
-      strcpy(ctx->source_map_file, *cstr);
+      String::AsciiValue dstr(args[7]);
+      ctx->source_map_file = new char[strlen(*dstr)+1];
+      strcpy(ctx->source_map_file, *dstr);
     }
   } else {
     sass_context *ctx = (sass_context*)cptr;
     source = new char[strlen(*astr)+1];
     strcpy(source, *astr);
     ctx->source_string = source;
-    ctx->options.image_path = new char[0];
+    ctx->options.image_path = imagePath;
     ctx->options.output_style = output_style;
     ctx->options.source_comments = source_comments;
     ctx->options.include_paths = pathOrData;

lib/cli.js

@@ -21,6 +21,10 @@ var optimist = require('optimist')
     describe: 'Path to look for @import-ed files',
     'default': cwd
   })
+  .options('image-path', {
+    describe: 'Path to prepend when using the image-url(…) helper',
+    'default': ''
+  })
   .options('watch', {
     describe: 'Watch a directory or file',
     alias: 'w'
@@ -97,6 +101,9 @@ exports = module.exports = function(args) {
     options.includePaths = [options.includePaths];
   }
 
+  // include the image path.
+  options.imagePath = argv['image-path'];
+
   // if it's an array, make it a string
   options.outputStyle = argv['output-style'];
   if (Array.isArray(options.outputStyle)) {

lib/middleware.js

@@ -120,6 +120,7 @@ module.exports = function(options){
             });
           }, {
             include_paths: [ sassDir ].concat(options.include_paths || options.includePaths || []),
+            image_path: options.image_path || options.imagePath,
             output_style: options.output_style || options.outputStyle
           });
         });

lib/render.js

@@ -7,6 +7,7 @@ function render(options, emitter) {
   sass.render({
     file: options.inFile,
     includePaths: options.includePaths,
+    imagePath: options.imagePath,
     outputStyle: options.outputStyle,
     sourceComments: options.sourceComments,
     sourceMap: options.sourceMap,

sass.js

@@ -34,14 +34,16 @@ var SASS_SOURCE_COMMENTS = {
   };
 
 var prepareOptions = function(options) {
-  var paths, style, comments;
+  var paths, imagePath, style, comments;
   options = typeof options !== 'object' ? {} : options;
   paths = options.include_paths || options.includePaths || [];
+  imagePath = options.image_path || options.imagePath || '';
   style = SASS_OUTPUT_STYLE[options.output_style || options.outputStyle] || 0;
   comments = SASS_SOURCE_COMMENTS[options.source_comments || options.sourceComments] || 0;
 
   return {
     paths: paths,
+    imagePath: imagePath,
     style: style,
     comments: comments
   };
@@ -55,12 +57,12 @@ var deprecatedRender = function(css, callback, options) {
   var oldCallback = function(css) {
     callback(null, css);
   };
-  return binding.render(css, oldCallback, errCallback, options.paths.join(':'), options.style, options.comments);
+  return binding.render(css, options.imagePath, oldCallback, errCallback, options.paths.join(':'), options.style, options.comments);
 };
 
 var deprecatedRenderSync = function(css, options) {
   options = prepareOptions(options);
-  return binding.renderSync(css, options.paths.join(':'), options.style, options.comments);
+  return binding.renderSync(css, options.imagePath, options.paths.join(':'), options.style, options.comments);
 };
 
 exports.render = function(options) {
@@ -74,11 +76,11 @@ exports.render = function(options) {
   options.error = options.error || function(){};
 
   if (options.file !== undefined && options.file !== null) {
-    return binding.renderFile(options.file, options.success, options.error, newOptions.paths.join(path.delimiter), newOptions.style, newOptions.comments, options.sourceMap);
+    return binding.renderFile(options.file, newOptions.imagePath, options.success, options.error, newOptions.paths.join(path.delimiter), newOptions.style, newOptions.comments, options.sourceMap);
   }
 
   //Assume data is present if file is not. binding/libsass will tell the user otherwise!
-  return binding.render(options.data, options.success, options.error, newOptions.paths.join(path.delimiter), newOptions.style);
+  return binding.render(options.data, newOptions.imagePath, options.success, options.error, newOptions.paths.join(path.delimiter), newOptions.style);
 };
 
 exports.renderSync = function(options) {
@@ -91,11 +93,11 @@ exports.renderSync = function(options) {
   newOptions = prepareOptions(options);
 
   if (options.file !== undefined && options.file !== null) {
-    return binding.renderFileSync(options.file, newOptions.paths.join(path.delimiter), newOptions.style, newOptions.comments);
+    return binding.renderFileSync(options.file, newOptions.imagePath, newOptions.paths.join(path.delimiter), newOptions.style, newOptions.comments);
   }
 
   //Assume data is present if file is not. binding/libsass will tell the user otherwise!
-  return binding.renderSync(options.data, newOptions.paths.join(path.delimiter), newOptions.style);
+  return binding.renderSync(options.data, newOptions.imagePath, newOptions.paths.join(path.delimiter), newOptions.style);
 };
 
 exports.middleware = require('./lib/middleware');

test/cli.js

@@ -24,6 +24,9 @@ var expectedSampleNoComments = '#navbar {\n\
   #navbar li a {\n\
     font-weight: bold; }\n';
 
+var expectedSampleCustomImagePath = 'body {\n\
+  background-image: url("/path/to/images/image.png"); }\n';
+
 describe('cli', function() {
   it('should print help when run with no arguments', function(done) {
     exec('node ' + cliPath, function(err, stdout, stderr) {
@@ -90,6 +93,15 @@ describe('cli', function() {
     });
   });
 
+  it('should compile with the --image-path option', function(done){
+    var emitter = cli(['--image-path', '/path/to/images', path.join(__dirname, 'image_path.scss')]);
+    emitter.on('error', done);
+    emitter.on('write', function(err, file, css){
+      assert.equal(css, expectedSampleCustomImagePath);
+      fs.unlink(file, done);
+    });
+  });
+
   it('should write the output to the file specified with the --output option', function(done){
     var resultPath = path.join(__dirname, '../output.css');
     var emitter = cli(['--output', resultPath, path.join(__dirname, 'sample.scss')]);

test/image_path.scss

+body {
+	background-image: image-url('image.png');
+}

test/test.js

@@ -133,6 +133,21 @@ describe("compile file with include paths", function(){
   });
 });
 
+describe("compile file with image path", function(){
+  it("should compile with render", function(done) {
+    sass.render({
+      file: path.resolve(__dirname, "image_path.scss"),
+      imagePath: '/path/to/images',
+      success: function (css) {
+        done(assert.equal(css, "body {\n  background-image: url(\"/path/to/images/image.png\"); }\n"));
+      },
+      error: function (error) {
+        done(error);
+      }
+    });
+  });
+});
+
 describe("compile file", function() {
   it("should compile with render", function(done) {
     sass.render({