use sourceURL for inline style tag source maps.

vuejs · Jan 28, 2017 · 63f8671 · 63f8671
1 parent cb3c0b6
commit 63f8671
Showing 1 changed file with 11 additions and 42 deletions.
diff --git a/addStyles.js b/addStyles.js
@@ -133,13 +133,6 @@ function createStyleElement(options) {
 	return styleElement;
 }
 
-function createLinkElement(options) {
-	var linkElement = document.createElement("link");
-	linkElement.rel = "stylesheet";
-	insertStyleElement(options, linkElement);
-	return linkElement;
-}
-
 function addStyle(obj, options) {
 	var styleElement, update, remove;
 
@@ -148,19 +141,6 @@ function addStyle(obj, options) {
 		styleElement = singletonElement || (singletonElement = createStyleElement(options));
 		update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
 		remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
-	} else if(obj.sourceMap &&
-		typeof URL === "function" &&
-		typeof URL.createObjectURL === "function" &&
-		typeof URL.revokeObjectURL === "function" &&
-		typeof Blob === "function" &&
-		typeof btoa === "function") {
-		styleElement = createLinkElement(options);
-		update = updateLink.bind(null, styleElement);
-		remove = function() {
-			removeStyleElement(styleElement);
-			if(styleElement.href)
-				URL.revokeObjectURL(styleElement.href);
-		};
 	} else {
 		styleElement = createStyleElement(options);
 		update = applyToTag.bind(null, styleElement);
@@ -212,11 +192,19 @@ function applyToTag(styleElement, obj) {
 	var css = obj.css;
 	var media = obj.media;
 
-	if(media) {
-		styleElement.setAttribute("media", media)
+	if (media) {
+		styleElement.setAttribute("media", media);
 	}
 
-	if(styleElement.styleSheet) {
+	if (sourceMap) {
+		// https://developer.chrome.com/devtools/docs/javascript-debugging
+		// this makes source maps inside style tags work properly in Chrome
+		css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
+		// http://stackoverflow.com/a/26603875
+		css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
+	}
+
+	if (styleElement.styleSheet) {
 		styleElement.styleSheet.cssText = css;
 	} else {
 		while(styleElement.firstChild) {
@@ -225,22 +213,3 @@ function applyToTag(styleElement, obj) {
 		styleElement.appendChild(document.createTextNode(css));
 	}
 }
-
-function updateLink(linkElement, obj) {
-	var css = obj.css;
-	var sourceMap = obj.sourceMap;
-
-	if(sourceMap) {
-		// http://stackoverflow.com/a/26603875
-		css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
-	}
-
-	var blob = new Blob([css], { type: "text/css" });
-
-	var oldSrc = linkElement.href;
-
-	linkElement.href = URL.createObjectURL(blob);
-
-	if(oldSrc)
-		URL.revokeObjectURL(oldSrc);
-}