Skip to content

Commit 84ec8e5

Browse files
jonathantnealevilebottnawi
jonathantneal
authored and
evilebottnawi
committedJul 25, 2019
fix: using inline style source maps (#383)
BREAKING CHANGE: `convertToAbsoluteUrls` option was removed, you don't need this anymore
·
v4.0.0v1.0.0
1 parent 5ddb01b commit 84ec8e5

File tree

7 files changed

+226
-614
lines changed

7 files changed

+226
-614
lines changed
 

‎README.md

-19
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,6 @@ import url from 'file.css';
8282
<link rel="stylesheet" href="path/to/file.css" />
8383
```
8484

85-
> ℹ️ 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.
86-
8785
### `Useable`
8886

8987
The `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`
@@ -145,7 +143,6 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
145143
| **`insertInto`** | `{String\|Function}` | `<head>` | Inserts `<style></style>` into the given position |
146144
| **`singleton`** | `{Boolean}` | `undefined` | Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module. |
147145
| **`sourceMap`** | `{Boolean}` | `false` | Enable/Disable Sourcemaps |
148-
| **`convertToAbsoluteUrls`** | `{Boolean}` | `false` | Converts relative URLs to absolute urls, when source maps are enabled |
149146

150147
### `hmr`
151148

@@ -397,22 +394,6 @@ Enable/Disable source map loading
397394
}
398395
```
399396

400-
### `convertToAbsoluteUrls`
401-
402-
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.
403-
404-
**webpack.config.js**
405-
406-
```js
407-
{
408-
loader: 'style-loader',
409-
options: {
410-
sourceMap: true,
411-
convertToAbsoluteUrls: true
412-
}
413-
}
414-
```
415-
416397
<h2 align="center">Maintainers</h2>
417398

418399
<table>

‎package-lock.json

+216-190
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"@babel/cli": "^7.2.3",
5151
"@babel/core": "^7.4.0",
5252
"@babel/preset-env": "^7.4.2",
53-
"@commitlint/cli": "^7.5.2",
53+
"@commitlint/cli": "^8.1.0",
5454
"@commitlint/config-conventional": "^7.5.0",
5555
"@webpack-contrib/defaults": "^3.0.0",
5656
"@webpack-contrib/eslint-config-webpack": "^3.0.0",

‎src/addStyles.js

+9-69
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,6 @@ var singleton = null;
7171
var singletonCounter = 0;
7272
var stylesInsertedAtTop = [];
7373

74-
var fixUrls = require('./urls');
75-
7674
module.exports = function(list, options) {
7775
if (typeof DEBUG !== 'undefined' && DEBUG) {
7876
if (typeof document !== 'object') {
@@ -256,21 +254,6 @@ function createStyleElement(options) {
256254
return style;
257255
}
258256

259-
function createLinkElement(options) {
260-
var link = document.createElement('link');
261-
262-
if (options.attrs.type === undefined) {
263-
options.attrs.type = 'text/css';
264-
}
265-
266-
options.attrs.rel = 'stylesheet';
267-
268-
addAttrs(link, options.attrs);
269-
insertStyleElement(options, link);
270-
271-
return link;
272-
}
273-
274257
function addAttrs(el, attrs) {
275258
Object.keys(attrs).forEach(function(key) {
276259
el.setAttribute(key, attrs[key]);
@@ -315,23 +298,6 @@ function addStyle(obj, options) {
315298

316299
update = applyToSingletonTag.bind(null, style, styleIndex, false);
317300
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
318-
} else if (
319-
obj.sourceMap &&
320-
typeof URL === 'function' &&
321-
typeof URL.createObjectURL === 'function' &&
322-
typeof URL.revokeObjectURL === 'function' &&
323-
typeof Blob === 'function' &&
324-
typeof btoa === 'function'
325-
) {
326-
style = createLinkElement(options);
327-
update = updateLink.bind(null, style, options);
328-
remove = function() {
329-
removeStyleElement(style);
330-
331-
if (style.href) {
332-
URL.revokeObjectURL(style.href);
333-
}
334-
};
335301
} else {
336302
style = createStyleElement(options);
337303
update = applyToTag.bind(null, style);
@@ -393,11 +359,20 @@ function applyToSingletonTag(style, index, remove, obj) {
393359
function applyToTag(style, obj) {
394360
var css = obj.css;
395361
var media = obj.media;
362+
var sourceMap = obj.sourceMap;
396363

397364
if (media) {
398365
style.setAttribute('media', media);
399366
}
400367

368+
if (sourceMap) {
369+
css +=
370+
'\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
Has a comment. Original line has a comment.
371+
// http://stackoverflow.com/a/26603875
372+
'\n/*# sourceMappingURL=data:application/json;base64,' +
373+
btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
374+
}
375+
401376
if (style.styleSheet) {
402377
style.styleSheet.cssText = css;
403378
} else {
@@ -408,38 +383,3 @@ function applyToTag(style, obj) {
408383
style.appendChild(document.createTextNode(css));
409384
}
410385
}
411-
412-
function updateLink(link, options, obj) {
413-
var css = obj.css;
414-
var sourceMap = obj.sourceMap;
415-
416-
/*
417-
If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
418-
and there is no publicPath defined then lets turn convertToAbsoluteUrls
419-
on by default. Otherwise default to the convertToAbsoluteUrls option
420-
directly
421-
*/
422-
var autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
423-
424-
if (options.convertToAbsoluteUrls || autoFixUrls) {
425-
css = fixUrls(css);
426-
}
427-
428-
if (sourceMap) {
429-
// http://stackoverflow.com/a/26603875
430-
css +=
431-
'\n/*# sourceMappingURL=data:application/json;base64,' +
432-
btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
433-
' */';
434-
}
435-
436-
var blob = new Blob([css], { type: 'text/css' });
437-
438-
var oldSrc = link.href;
439-
440-
link.href = URL.createObjectURL(blob);
441-
442-
if (oldSrc) {
443-
URL.revokeObjectURL(oldSrc);
444-
}
445-
}

‎src/options.json

-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,6 @@
2424
},
2525
"sourceMap": {
2626
"type": "boolean"
27-
},
28-
"convertToAbsoluteUrls": {
29-
"type": "boolean"
3027
}
3128
},
3229
"additionalProperties": false

‎src/urls.js

-98
This file was deleted.

‎test/fixUrls.test.js

-234
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.