From f9b06ca4b447551b759f937e1281dc05edbda3cc Mon Sep 17 00:00:00 2001 From: Guillaume Lecomte Date: Mon, 17 Oct 2016 11:12:40 +0200 Subject: [PATCH 1/2] Add support for source maps in unbundled browser mode --- less.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) 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 From 89a860234c5cfe91bde78b3acb35c13d44ad58b5 Mon Sep 17 00:00:00 2001 From: Guillaume Lecomte Date: Mon, 17 Oct 2016 11:22:24 +0200 Subject: [PATCH 2/2] Update README for unbundled source maps support --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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