From 7d63480e402849542bdbbda44db570d4d1530daf Mon Sep 17 00:00:00 2001
From: Guillaume Lecomte <guillaume86@gmail.com>
Date: Mon, 17 Oct 2016 11:02:52 +0200
Subject: [PATCH] Add support for source maps in unbundled browser mode

Mirrors changes in da1404e62bd89b252d8dee4445fc56bb44566ef5 to allow inline source maps in unbundled browser mode.
Also fixes a bug that wasn't clearing previous CSS when hot reloading a CSS module.
---
 css-plugin-base.js | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/css-plugin-base.js b/css-plugin-base.js
index 8a8ce77..aae97bf 100644
--- a/css-plugin-base.js
+++ b/css-plugin-base.js
@@ -57,14 +57,51 @@ CSSPluginBase.prototype.listAssets = function(loads, opts) {
  * <style> injection browser plugin
  */
 // NB hot reloading support here
+
+function cssInject(style, css) {
+  if (style) {
+      style.innerHTML = css;
+  } else {
+    style = document.createElement('style');
+    style.type = 'text/css';
+    style.innerHTML = css;
+    document.head.appendChild(style);
+  }
+  return style;
+}
+
+// NB the <link> + blob URL trick is required to make chrome detect the source maps
+function cssInjectSourceMaps(link, css) {
+  var href = URL.createObjectURL(new Blob([css], { type:'text/css' }));;
+  if (link) {
+    link.href = href;
+  } else {
+    link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+  }
+  return link;
+}
+
+var elementsContainerKey = '__CSSPluginBase.elements';
 CSSPluginBase.prototype.instantiate = function(load) {
   if (this.builder)
     return;
 
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  style.innerHTML = load.metadata.style;
-  document.head.appendChild(style);
+  var enableInlineSourceMaps = this.inlineCssSourceMaps && load.metadata.styleSourceMap;
+  var cssElements = document[elementsContainerKey] || (document[elementsContainerKey] = {});
+  var element = cssElements[load.address];
+
+  if (!enableInlineSourceMaps) {
+    cssElements[load.address] = cssInject(element, load.metadata.style);
+  } else {
+    var cssOutput = load.metadata.style
+      + '\n/*# sourceMappingURL=data:application/json,'
+      + encodeURIComponent(load.metadata.styleSourceMap) + '*/';
+
+    cssElements[load.address] = cssInjectSourceMaps(element, cssOutput);
+  }
 };
 
 module.exports = CSSPluginBase;