diff --git a/README.md b/README.md index c161327..7b6aa1b 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,17 @@ Source maps support is included. This plugin is built on the [CSS plugin base](http://github.com/systemjs/plugin-css) and supports the same [build options](https://github.com/systemjs/plugin-css#builder-support). +Source maps in unbundled browser mode +------------------------------------- + +Activating source maps generation in unbundled mode requires a few extra steps: +- The [source-map](https://github.com/mozilla/source-map/tree/master/dist) module must be globally available, you can just add a script tag to it in your index.html. +- The `inlineCssSourceMaps` loader option must be set to true. + +NB: don't use client-side source maps generation in production, live transpilation is already strongly discouraged, +producing source maps would add even more work to the client. + License --- -MIT \ No newline at end of file +MIT diff --git a/less.js b/less.js index e42a44e..e3ff8eb 100644 --- a/less.js +++ b/less.js @@ -14,19 +14,33 @@ module.exports = new CSSPluginBase(function compile(style, address, opts) { return System['import']('lesscss', module.id) .then(function(less) { + var outputSourceMap = !!loader.builder; + var sourceMapBasepath = filename.replace(/[^/]+$/, ''); + + // NB: sourceMap must be imported in a script tag before this module is imported + // download here: https://github.com/mozilla/source-map/tree/master/dist + // see https://github.com/less/less.js/issues/1541 for details + if (!this.builder && loader.inlineCssSourceMaps && (typeof sourceMap !== 'undefined')) { + outputSourceMap = true; + less.environment.getSourceMapGenerator = function() { + return sourceMap.SourceMapGenerator; + }; + sourceMapBasepath = new URL(filename).pathname; + } + return less.render(style, { filename: filename, rootpath: !loader.builder && filename.replace(/[^/]+$/, ''), paths: opts.fileAsRoot && [filename.replace(/[^/]+$/, '')], relativeUrls: opts.relativeUrls || false, - sourceMap: loader.builder && { - sourceMapBasepath: filename.replace(/[^/]+$/, '') + sourceMap: outputSourceMap && { + sourceMapBasepath: sourceMapBasepath } }); }) .then(function(output) { return { - css: output.css + (loader.builder ? '' : ('/*# sourceURL=' + filename + '*/')), + css: output.css + (output.map ? '' : ('/*# sourceURL=' + filename + '*/')), map: output.map, // style plugins can optionally return a modular module