Skip to content

Commit 70b9f6a

Browse files
committed
use sourceURL for inline style tag source maps.
1 parent 6664a95 commit 70b9f6a

File tree

1 file changed

+11
-43
lines changed

1 file changed

+11
-43
lines changed

addStyles.js

+11-43
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,6 @@ function createStyleElement(options) {
133133
return styleElement;
134134
}
135135

136-
function createLinkElement(options) {
137-
var linkElement = document.createElement("link");
138-
linkElement.rel = "stylesheet";
139-
insertStyleElement(options, linkElement);
140-
return linkElement;
141-
}
142-
143136
function addStyle(obj, options) {
144137
var styleElement, update, remove;
145138

@@ -148,19 +141,6 @@ function addStyle(obj, options) {
148141
styleElement = singletonElement || (singletonElement = createStyleElement(options));
149142
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
150143
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
151-
} else if(obj.sourceMap &&
152-
typeof URL === "function" &&
153-
typeof URL.createObjectURL === "function" &&
154-
typeof URL.revokeObjectURL === "function" &&
155-
typeof Blob === "function" &&
156-
typeof btoa === "function") {
157-
styleElement = createLinkElement(options);
158-
update = updateLink.bind(null, styleElement);
159-
remove = function() {
160-
removeStyleElement(styleElement);
161-
if(styleElement.href)
162-
URL.revokeObjectURL(styleElement.href);
163-
};
164144
} else {
165145
styleElement = createStyleElement(options);
166146
update = applyToTag.bind(null, styleElement);
@@ -213,11 +193,19 @@ function applyToTag(styleElement, obj) {
213193
var media = obj.media;
214194
var sourceMap = obj.sourceMap;
215195

216-
if(media) {
217-
styleElement.setAttribute("media", media)
196+
if (media) {
197+
styleElement.setAttribute("media", media);
198+
}
199+
200+
if (sourceMap) {
201+
// https://developer.chrome.com/devtools/docs/javascript-debugging
202+
// this makes source maps inside style tags work properly in Chrome
203+
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
204+
// http://stackoverflow.com/a/26603875
205+
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
218206
}
219207

220-
if(styleElement.styleSheet) {
208+
if (styleElement.styleSheet) {
221209
styleElement.styleSheet.cssText = css;
222210
} else {
223211
while(styleElement.firstChild) {
@@ -226,23 +214,3 @@ function applyToTag(styleElement, obj) {
226214
styleElement.appendChild(document.createTextNode(css));
227215
}
228216
}
229-
230-
function updateLink(linkElement, obj) {
231-
var css = obj.css;
232-
var media = obj.media;
233-
var sourceMap = obj.sourceMap;
234-
235-
if(sourceMap) {
236-
// http://stackoverflow.com/a/26603875
237-
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
238-
}
239-
240-
var blob = new Blob([css], { type: "text/css" });
241-
242-
var oldSrc = linkElement.href;
243-
244-
linkElement.href = URL.createObjectURL(blob);
245-
246-
if(oldSrc)
247-
URL.revokeObjectURL(oldSrc);
248-
}

0 commit comments

Comments
 (0)