Skip to content

Commit 45ba5c9

Browse files
mgolmichael-ciniawsky
mgol
authored and
michael-ciniawsky
committed
refactor: use annotation comments for source maps (options.sourceMap) (#219)
1 parent 6f935e8 commit 45ba5c9

5 files changed

Lines changed: 6 additions & 434 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,6 @@ import url from 'file.css'
8484
<link rel="stylesheet" href="path/to/file.css">
8585
```
8686

87-
> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above.
88-
8987
### `Useable`
9088

9189
By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
@@ -141,7 +139,6 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
141139
|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
142140
|**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
143141
|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
144-
|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
145142

146143
### `hmr`
147144

@@ -359,81 +356,6 @@ Enable/Disable source map loading
359356
}
360357
```
361358

362-
### `convertToAbsoluteUrls`
363-
364-
If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves [an issue](https://github.com/webpack/style-loader/pull/96) where relative resources fail to load when source maps are enabled. You can enable it with the convertToAbsoluteUrls option.
365-
366-
**webpack.config.js**
367-
```js
368-
{
369-
loader: 'style-loader',
370-
options: {
371-
sourceMap: true,
372-
convertToAbsoluteUrls: true
373-
}
374-
}
375-
```
376-
377-
<h2 align="center">Maintainers</h2>
378-
379-
<table>
380-
<tbody>
381-
<tr>
382-
<td align="center">
383-
<a href="https://github.com/bebraw">
384-
<img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
385-
</br>
386-
Juho Vepsäläinen
387-
</a>
388-
</td>
389-
<td align="center">
390-
<a href="https://github.com/d3viant0ne">
391-
<img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
392-
</br>
393-
Joshua Wiens
394-
</a>
395-
</td>
396-
<td align="center">
397-
<a href="https://github.com/sapegin">
398-
<img width="150" height="150" src="https://github.com/sapegin.png?v=3&s=150">
399-
</br>
400-
Artem Sapegin
401-
</a>
402-
</td>
403-
<td align="center">
404-
<a href="https://github.com/michael-ciniawsky">
405-
<img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
406-
</br>
407-
Michael Ciniawsky
408-
</a>
409-
</td>
410-
<td align="center">
411-
<a href="https://github.com/evilebottnawi">
412-
<img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
413-
</br>
414-
Alexander Krasnoyarov
415-
</a>
416-
</td>
417-
</tr>
418-
<tr>
419-
<td align="center">
420-
<a href="https://github.com/sokra">
421-
<img width="150" height="150" src="https://github.com/sokra.png?v=3&s=150">
422-
</br>
423-
Tobias Koppers
424-
</a>
425-
</td>
426-
<td align="center">
427-
<a href="https://github.com/SpaceK33z">
428-
<img width="150" height="150" src="https://github.com/SpaceK33z.png?v=3&s=150">
429-
</br>
430-
Kees Kluskens
431-
</a>
432-
</td>
433-
<tr>
434-
<tbody>
435-
</table>
436-
437359

438360
[npm]: https://img.shields.io/npm/v/style-loader.svg
439361
[npm-url]: https://npmjs.com/package/style-loader

‎lib/addStyles.js‎

Lines changed: 6 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ var singleton = null;
5151
var singletonCounter = 0;
5252
var stylesInsertedAtTop = [];
5353

54-
var fixUrls = require("./urls");
55-
5654
module.exports = function(list, options) {
5755
if (typeof DEBUG !== "undefined" && DEBUG) {
5856
if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
@@ -199,18 +197,6 @@ function createStyleElement (options) {
199197
return style;
200198
}
201199

202-
function createLinkElement (options) {
203-
var link = document.createElement("link");
204-
205-
options.attrs.type = "text/css";
206-
options.attrs.rel = "stylesheet";
207-
208-
addAttrs(link, options.attrs);
209-
insertStyleElement(options, link);
210-
211-
return link;
212-
}
213-
214200
function addAttrs (el, attrs) {
215201
Object.keys(attrs).forEach(function (key) {
216202
el.setAttribute(key, attrs[key]);
@@ -245,21 +231,6 @@ function addStyle (obj, options) {
245231
update = applyToSingletonTag.bind(null, style, styleIndex, false);
246232
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
247233

248-
} else if (
249-
obj.sourceMap &&
250-
typeof URL === "function" &&
251-
typeof URL.createObjectURL === "function" &&
252-
typeof URL.revokeObjectURL === "function" &&
253-
typeof Blob === "function" &&
254-
typeof btoa === "function"
255-
) {
256-
style = createLinkElement(options);
257-
update = updateLink.bind(null, style, options);
258-
remove = function () {
259-
removeStyleElement(style);
260-
261-
if(style.href) URL.revokeObjectURL(style.href);
262-
};
263234
} else {
264235
style = createStyleElement(options);
265236
update = applyToTag.bind(null, style);
@@ -319,6 +290,12 @@ function applyToSingletonTag (style, index, remove, obj) {
319290
function applyToTag (style, obj) {
320291
var css = obj.css;
321292
var media = obj.media;
293+
var sourceMap = obj.sourceMap;
294+
295+
if (sourceMap) {
296+
css += "\n/*# sourceMappingURL=data:application/json;base64," +
297+
btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
298+
}
322299

323300
if(media) {
324301
style.setAttribute("media", media)
@@ -334,33 +311,3 @@ function applyToTag (style, obj) {
334311
style.appendChild(document.createTextNode(css));
335312
}
336313
}
337-
338-
function updateLink (link, options, obj) {
339-
var css = obj.css;
340-
var sourceMap = obj.sourceMap;
341-
342-
/*
343-
If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
344-
and there is no publicPath defined then lets turn convertToAbsoluteUrls
345-
on by default. Otherwise default to the convertToAbsoluteUrls option
346-
directly
347-
*/
348-
var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
349-
350-
if (options.convertToAbsoluteUrls || autoFixUrls) {
351-
css = fixUrls(css);
352-
}
353-
354-
if (sourceMap) {
355-
// http://stackoverflow.com/a/26603875
356-
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
357-
}
358-
359-
var blob = new Blob([css], { type: "text/css" });
360-
361-
var oldSrc = link.href;
362-
363-
link.href = URL.createObjectURL(blob);
364-
365-
if(oldSrc) URL.revokeObjectURL(oldSrc);
366-
}

‎lib/urls.js‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎options.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@
2222
},
2323
"sourceMap": {
2424
"type": "boolean"
25-
},
26-
"convertToAbsoluteUrls": {
27-
"type": "boolean"
2825
}
2926
},
3027
"additionalProperties": true

0 commit comments

Comments
 (0)