Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: removed sourceMap option #405

Merged
merged 1 commit into from
Jul 31, 2019
Merged

refactor: removed sourceMap option #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 33 additions & 57 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()`
Expand Down Expand Up @@ -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 |
Expand All @@ -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`

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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**

Expand All @@ -418,7 +394,7 @@ module.exports = {
{
test: /\.css$/i,
use: [
{ loader: 'style-loader', options: { sourceMap: true } },
'style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
],
},
Expand Down
4 changes: 0 additions & 4 deletions src/options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/addStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,' +
Expand Down
122 changes: 122 additions & 0 deletions test/__snapshots__/loader.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 []`;
Expand All @@ -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 []`;
Expand Down
86 changes: 0 additions & 86 deletions test/__snapshots__/sourceMap-option.test.js.snap
View file
Open in desktop

This file was deleted.

8 changes: 1 addition & 7 deletions test/__snapshots__/validate-options.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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? }"
`;
Loading