Add support for source maps in unbundled browser mode

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
+MIT

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