refactor: removed sourceMap option (#405)

BREAKING CHANGE: the `sourceMap` option was removed. The loader automatically inject source maps if previous loader emit them.
webpack-contrib · Jul 31, 2019 · c5992e4 · c5992e4
1 parent ee17a77
commit c5992e4
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 332 deletions.
diff --git a/README.md b/README.md
@@ -71,33 +71,6 @@ import style from './file.css';
 style.className === 'z849f98ca812';
 ```
 
-### `Url`
-
-It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of inlining the CSS `{String}` with `<style></style>` tag.
-
-```js
-import url from 'file.css';
-```
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [{ loader: 'style-loader/url' }, { loader: 'file-loader' }],
-      },
-    ],
-  },
-};
-```
-
-```html
-<link rel="stylesheet" href="path/to/file.css" />
-```
-
 ### `Useable`
 
 The `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`
@@ -144,6 +117,33 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 
 > ⚠️ Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
 
+### `Url`
+
+It's also possible to add a URL `<link href="path/to/file.css" rel="stylesheet">` instead of inlining the CSS `{String}` with `<style></style>` tag.
+
+```js
+import url from 'file.css';
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader/url' }, { loader: 'file-loader' }],
+      },
+    ],
+  },
+};
+```
+
+```html
+<link rel="stylesheet" href="path/to/file.css" />
+```
+
 ## Options
 
 |       Name       |         Type         |   Default   | Description                                                                                                         |
@@ -153,7 +153,6 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |  **`insertAt`**  |  `{String\|Object}`  |  `bottom`   | Inserts `<style></style>` at the given position                                                                     |
 | **`insertInto`** | `{String\|Function}` |  `<head>`   | Inserts `<style></style>` into the given position                                                                   |
 | **`singleton`**  |     `{Boolean}`      | `undefined` | Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module. |
-| **`sourceMap`**  |     `{Boolean}`      |   `false`   | Enable/Disable Sourcemaps                                                                                           |
 
 ### `base`
 
@@ -247,32 +246,6 @@ module.exports = {
 <style id="id"></style>
 ```
 
-#### `Url`
-
-**component.js**
-
-```js
-import link from './file.css';
-```
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          { loader: 'style-loader/url', options: { attributes: { id: 'id' } } },
-          { loader: 'file-loader' },
-        ],
-      },
-    ],
-  },
-};
-```
-
 ### `insertAt`
 
 By default, the style-loader appends `<style>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insertInto`. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g
@@ -405,9 +378,12 @@ module.exports = {
 };
 ```
 
-### `sourceMap`
+## Examples
+
+### Source maps
 
-Enable/Disable source map loading
+The loader automatically inject source maps when previous loader emit them.
+Therefore, to generate source maps, set the `sourceMap` option to `true` for the previous loader.
 
 **webpack.config.js**
 
@@ -418,7 +394,7 @@ module.exports = {
       {
         test: /\.css$/i,
         use: [
-          { loader: 'style-loader', options: { sourceMap: true } },
+          'style-loader',
           { loader: 'css-loader', options: { sourceMap: true } },
         ],
       },

diff --git a/src/options.json b/src/options.json
@@ -20,10 +20,6 @@
     "singleton": {
       "description": "Reuses a single <style></style> element, instead of adding/removing individual elements for each required module (https://github.com/webpack-contrib/style-loader#singleton).",
       "type": "boolean"
-    },
-    "sourceMap": {
-      "description": "Enable/Disable Sourcemaps (https://github.com/webpack-contrib/style-loader#sourcemap).",
-      "type": "boolean"
     }
   },
   "additionalProperties": false

diff --git a/src/runtime/addStyles.js b/src/runtime/addStyles.js
@@ -338,7 +338,7 @@ function applyToTag(style, options, obj) {
     style.setAttribute('media', media);
   }
 
-  if (options.sourceMap && sourceMap && btoa) {
+  if (sourceMap && btoa) {
     css +=
       // http://stackoverflow.com/a/26603875
       '\n/*# sourceMappingURL=data:application/json;base64,' +

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -1,5 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "linkTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" href=\\"634a6c25c088233fe9c9437693614ea9.css\\"></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "linkTag"): errors 1`] = `Array []`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "linkTag"): warnings 1`] = `Array []`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "styleTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>body {
+  color: red;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFVBQVU7QUFDWiIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5IHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "styleTag"): errors 1`] = `Array []`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "styleTag"): warnings 1`] = `Array []`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "useableStyleTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>h1 {
+  color: blue;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLW90aGVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7QUFDYiIsImZpbGUiOiJzdHlsZS1vdGhlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJoMSB7XG4gIGNvbG9yOiBibHVlO1xufVxuIl19 */</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "useableStyleTag"): errors 1`] = `Array []`;
+
+exports[`loader should generate source maps when previous loader emit them ("injectType" option is "useableStyleTag"): warnings 1`] = `Array []`;
+
 exports[`loader should inject hmr code with HotModuleReplacementPlugin ("injectType" option is "linkTag"): errors 1`] = `Array []`;
 
 exports[`loader should inject hmr code with HotModuleReplacementPlugin ("injectType" option is "linkTag"): warnings 1`] = `Array []`;
@@ -12,6 +74,66 @@ exports[`loader should inject hmr code with HotModuleReplacementPlugin ("injectT
 
 exports[`loader should inject hmr code with HotModuleReplacementPlugin ("injectType" option is "useableStyleTag"): warnings 1`] = `Array []`;
 
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "linkTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" href=\\"ceb98dd1e5ab94be0d4081cb8b89f79d.css\\"></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "linkTag"): errors 1`] = `Array []`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "linkTag"): warnings 1`] = `Array []`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "styleTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>body {
+  color: red;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "styleTag"): errors 1`] = `Array []`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "styleTag"): warnings 1`] = `Array []`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "useableStyleTag"): DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>h1 {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "useableStyleTag"): errors 1`] = `Array []`;
+
+exports[`loader should not generate source maps when previous loader don't emit them ("injectType" option is "useableStyleTag"): warnings 1`] = `Array []`;
+
 exports[`loader should not inject hmr code without HotModuleReplacementPlugin ("injectType" option is "linkTag"): errors 1`] = `Array []`;
 
 exports[`loader should not inject hmr code without HotModuleReplacementPlugin ("injectType" option is "linkTag"): warnings 1`] = `Array []`;

diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap
diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap
@@ -37,13 +37,7 @@ exports[`validate options 5`] = `
 `;
 
 exports[`validate options 6`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
- - options.sourceMap should be a boolean.
-   -> Enable/Disable Sourcemaps (https://github.com/webpack-contrib/style-loader#sourcemap)."
-`;
-
-exports[`validate options 7`] = `
 "Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { base?, attributes?, insertAt?, insertInto?, singleton?, sourceMap? }"
+   object { base?, attributes?, insertAt?, insertInto?, singleton? }"
 `;