diff --git a/README.md b/README.md index 3f13d26..3af5663 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,12 @@ Pass in your own callback to be called upon successful compilaton by node-sass. Pass in your own callback to be called upon a sass error from node-sass. The callback has the form `callback(err)`, where err is the error string generated by libsass. Note: this *does* prevent an actual `gulpPluginError` object from being created. +## Source Maps + +gulp-sass now generates *inline* source maps if you pass `sourceComments: map` as an option. Note that gulp-sass will *only* generate inline source maps, so passing `sourceMap: filepath` to node-sass won't actually do anything. Enjoy your source maps! + +NB: For those wondering, inline source maps are stuck onto the end of the css file instead of being in a separate map file. In this case, the original source contents are included as well, so you don't have to make sure your scss files are servable. + #Imports and Partials gulp-sass now automatically passes along the directory of every scss file it parses as an include path for node-sass. This means that as long as you specify your includes relative to path of your scss file, everything will just work. diff --git a/index.js b/index.js index 4704fbd..00fbc13 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,5 @@ -var map = require('map-stream') +var fs = require('fs') + , map = require('map-stream') , sass = require('node-sass') , path = require('path') , gutil = require('gulp-util') @@ -19,7 +20,11 @@ module.exports = function (options) { return cb(); } - opts.data = file.contents.toString(); + if (opts.sourceComments === 'map') { + opts.file = file.path; + } else { + opts.data = file.contents.toString(); + } if (opts.includePaths && Array.isArray(opts.includePaths)) { if (opts.includePaths.indexOf(fileDir) === -1) { @@ -30,8 +35,18 @@ module.exports = function (options) { opts.includePaths = [fileDir]; } - opts.success = function (css) { - if (typeof opts.onSuccess === 'function') opts.onSuccess(css); + opts.success = function (css, map) { + var sourceMap; + if (typeof opts.onSuccess === 'function') opts.onSuccess(css, map); + + if (map) { + map = JSON.parse(map); + map.sourcesContent = getSourcesContent(map.sources); + sourceMap = new Buffer(JSON.stringify(map)).toString('base64'); + css = css.replace(/\/\*# sourceMappingURL=.*\*\//, + "/*# sourceMappingURL=data:application/json;base64," + + sourceMap + "*/"); + } file.path = ext(file.path, '.css'); file.contents = new Buffer(css); @@ -60,3 +75,13 @@ module.exports = function (options) { return map(nodeSass); }; + +function getSourcesContent (sources) { + sourcesContent = []; + + for (var i = 0; i < sources.length; i++) { + sourcesContent[i] = fs.readFileSync(sources[i], { encoding: 'utf8' }); + } + + return sourcesContent; +} \ No newline at end of file