From 8cd0dc49fe3f053f9111a80a4ff8635c0ade4ff8 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Wed, 31 Jul 2019 18:05:12 +0300 Subject: [PATCH] refactor: removed `sourceMap` option BREAKING CHANGE: the `sourceMap` option was removed. The loader automatically inject source maps if previous loader emit them. --- README.md | 90 +++++-------- src/options.json | 4 - src/runtime/addStyles.js | 2 +- test/__snapshots__/loader.test.js.snap | 122 ++++++++++++++++++ .../sourceMap-option.test.js.snap | 86 ------------ .../validate-options.test.js.snap | 8 +- test/loader.test.js | 42 ++++++ test/manual/webpack.config.js | 15 --- .../__snapshots__/addStyle.test.js.snap | 30 +++-- test/runtime/addStyle.test.js | 52 +------- test/sourceMap-option.test.js | 93 ------------- test/validate-options.test.js | 6 - 12 files changed, 218 insertions(+), 332 deletions(-) delete mode 100644 test/__snapshots__/sourceMap-option.test.js.snap delete mode 100644 test/sourceMap-option.test.js diff --git a/README.md b/README.md index c6eef49e..30d8c900 100644 --- 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 `` instead of inlining the CSS `{String}` with `` 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 - -``` - ### `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 `` instead of inlining the CSS `{String}` with `` 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 + +``` + ## 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 `` at the given position | | **`insertInto`** | `{String\|Function}` | `` | Inserts `` into the given position | | **`singleton`** | `{Boolean}` | `undefined` | Reuses a single `` element, instead of adding/removing individual elements for each required module. | -| **`sourceMap`** | `{Boolean}` | `false` | Enable/Disable Sourcemaps | ### `base` @@ -247,32 +246,6 @@ module.exports = { ``` -#### `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 ` 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 index 0737145b..0e31a04c 100644 --- 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 index 895bb8a9..f91aa82c 100644 --- 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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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`] = ` +" + style-loader test + + + +

Body

+
+ + + +" +`; + +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 deleted file mode 100644 index d6711950..00000000 --- a/test/__snapshots__/sourceMap-option.test.js.snap +++ /dev/null @@ -1,86 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`sourceMap option false: DOM 1`] = ` -" - style-loader test - - - -

Body

-
- - - -" -`; - -exports[`sourceMap option false: errors 1`] = `Array []`; - -exports[`sourceMap option false: warnings 1`] = `Array []`; - -exports[`sourceMap option not specified: DOM 1`] = ` -" - style-loader test - - - -

Body

-
- - - -" -`; - -exports[`sourceMap option not specified: errors 1`] = `Array []`; - -exports[`sourceMap option not specified: warnings 1`] = `Array []`; - -exports[`sourceMap option true, but previous loader do not generate source map: DOM 1`] = ` -" - style-loader test - - - -

Body

-
- - - -" -`; - -exports[`sourceMap option true, but previous loader do not generate source map: errors 1`] = `Array []`; - -exports[`sourceMap option true, but previous loader do not generate source map: warnings 1`] = `Array []`; - -exports[`sourceMap option true: DOM 1`] = ` -" - style-loader test - - - -

Body

-
- - - -" -`; - -exports[`sourceMap option true: errors 1`] = `Array []`; - -exports[`sourceMap option true: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index 4c6ecdf0..bf7d3744 100644 --- 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? }" `; diff --git a/test/loader.test.js b/test/loader.test.js index 6d31c555..e82f3362 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -84,6 +84,48 @@ describe('loader', () => { expect(stats.compilation.warnings).toMatchSnapshot('warnings'); expect(stats.compilation.errors).toMatchSnapshot('errors'); }); + + it(`should not generate source maps when previous loader don't emit them ("injectType" option is "${injectType}")`, async () => { + expect.assertions(3); + + const testId = + injectType === 'useableStyleTag' ? './useable.js' : './simple.js'; + const stats = await compile(testId, { + devtool: 'source-map', + loader: { injectType }, + }); + + runTestInJsdom(stats, (dom) => { + expect(dom.serialize()).toMatchSnapshot('DOM'); + }); + + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + + // `linkTag` doesn't generate source maps, original source should contains them + it(`should generate source maps when previous loader emit them ("injectType" option is "${injectType}")`, async () => { + expect.assertions(3); + + const testId = + injectType === 'useableStyleTag' ? './useable.js' : './simple.js'; + const stats = await compile(testId, { + devtool: 'source-map', + loader: { injectType }, + cssLoader: { + options: { + sourceMap: true, + }, + }, + }); + + runTestInJsdom(stats, (dom) => { + expect(dom.serialize()).toMatchSnapshot('DOM'); + }); + + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); }); it('should work for useable inject type and negative ref', async () => { diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index b917f38d..828f7c2b 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -18,9 +18,6 @@ module.exports = { use: [ { loader: require.resolve('../../dist/index.js'), - options: { - sourceMap: ENABLE_SOURCE_MAP, - }, }, { loader: 'css-loader', @@ -35,9 +32,6 @@ module.exports = { use: [ { loader: require.resolve('../../dist/useable-loader.js'), - options: { - sourceMap: ENABLE_SOURCE_MAP, - }, }, { loader: 'css-loader', @@ -52,9 +46,6 @@ module.exports = { use: [ { loader: require.resolve('../../dist/url-loader.js'), - options: { - sourceMap: ENABLE_SOURCE_MAP, - }, }, { loader: 'file-loader', @@ -67,9 +58,6 @@ module.exports = { use: [ { loader: require.resolve('../../dist/index.js'), - options: { - sourceMap: ENABLE_SOURCE_MAP, - }, }, { loader: 'css-loader', @@ -92,9 +80,6 @@ module.exports = { use: [ { loader: require.resolve('../../dist/useable-loader.js'), - options: { - sourceMap: ENABLE_SOURCE_MAP, - }, }, { loader: 'css-loader', diff --git a/test/runtime/__snapshots__/addStyle.test.js.snap b/test/runtime/__snapshots__/addStyle.test.js.snap index 1f0f2567..7b7f7ec6 100644 --- a/test/runtime/__snapshots__/addStyle.test.js.snap +++ b/test/runtime/__snapshots__/addStyle.test.js.snap @@ -47,15 +47,6 @@ exports[`addStyle should work with "insertInto" option #3 1`] = `"T exports[`addStyle should work with "insertInto" option 1`] = `"<head><title>Title

Hello world

"`; -exports[`addStyle should work with "sourceMap" option #2 1`] = ` -"Title

Hello world

" -`; - -exports[`addStyle should work with "sourceMap" option #3 1`] = `"Title

Hello world

"`; - -exports[`addStyle should work with "sourceMap" option 1`] = `"Title

Hello world

"`; - exports[`addStyle should work with media 1`] = `"Title

Hello world

"`; exports[`addStyle should work with nonce 1`] = `"Title

Hello world

"`; @@ -64,6 +55,11 @@ exports[`addStyle should work with same module id in list 1`] = `"T exports[`addStyle should work with same module id in list 2`] = `"<head><title>Title

Hello world

"`; +exports[`addStyle should work with source maps 1`] = ` +"Title

Hello world

" +`; + exports[`addStyle should work with updates #2 1`] = `"Title

Hello world

"`; exports[`addStyle should work with updates #2 2`] = `"Title

Hello world

"`; @@ -102,15 +98,25 @@ exports[`addStyle should work with updates #11 1`] = `"TitleTitle

Hello world

"`; -exports[`addStyle should work with updates #12 1`] = `"Title

Hello world

"`; +exports[`addStyle should work with updates #12 1`] = ` +"Title

Hello world

" +`; -exports[`addStyle should work with updates #12 2`] = `"Title

Hello world

"`; +exports[`addStyle should work with updates #12 2`] = ` +"Title

Hello world

" +`; exports[`addStyle should work with updates #13 1`] = `"Title

Hello world

"`; exports[`addStyle should work with updates #13 2`] = `"Title

Hello world

"`; -exports[`addStyle should work with updates #14 1`] = `"Title

Hello world

"`; +exports[`addStyle should work with updates #14 1`] = ` +"Title

Hello world

" +`; exports[`addStyle should work with updates #14 2`] = `"Title

Hello world

"`; diff --git a/test/runtime/addStyle.test.js b/test/runtime/addStyle.test.js index 1d39616c..fc3bdc4c 100644 --- a/test/runtime/addStyle.test.js +++ b/test/runtime/addStyle.test.js @@ -171,7 +171,7 @@ describe('addStyle', () => { expect(document.documentElement.innerHTML).toMatchSnapshot(); }); - it('should work with "sourceMap" option', () => { + it('should work with source maps', () => { addStyle([ [ './style-13-1.css', @@ -191,56 +191,6 @@ describe('addStyle', () => { expect(document.documentElement.innerHTML).toMatchSnapshot(); }); - it('should work with "sourceMap" option #2', () => { - addStyle( - [ - [ - './style-13-2.css', - '.foo { color: red }', - '', - { - version: 3, - sources: ['style-13-2.css'], - names: [], - mappings: 'AAAA,cAAqB,eAAe,EAAE', - file: 'style-13-2.css', - sourcesContent: ['.foo { color: red }'], - }, - ], - ], - { - sourceMap: true, - } - ); - - expect(document.documentElement.innerHTML).toMatchSnapshot(); - }); - - it('should work with "sourceMap" option #3', () => { - addStyle( - [ - [ - './style-13-3.css', - '.foo { color: red }', - '', - { - version: 3, - sources: ['style-13-3.css'], - names: [], - mappings: 'AAAA,cAAqB,eAAe,EAAE', - file: 'style-13-3.css', - sourcesContent: ['.foo { color: red }'], - }, - ], - ], - { - sourceMap: false, - } - ); - - expect(document.documentElement.innerHTML).toMatchSnapshot(); - }); - it('should work with nonce', () => { // eslint-disable-next-line no-underscore-dangle window.__webpack_nonce__ = 'none'; diff --git a/test/sourceMap-option.test.js b/test/sourceMap-option.test.js deleted file mode 100644 index 4fb67107..00000000 --- a/test/sourceMap-option.test.js +++ /dev/null @@ -1,93 +0,0 @@ -import compile from './helpers/compiler'; -import runTestInJsdom from './helpers/runTestInJsdom'; - -describe('sourceMap option', () => { - it('not specified', async () => { - expect.assertions(3); - - const testId = './simple.js'; - const stats = await compile(testId, { - devtool: 'source-map', - }); - - runTestInJsdom(stats, (dom) => { - expect(dom.serialize()).toMatchSnapshot('DOM'); - }); - - expect(stats.compilation.warnings).toMatchSnapshot('warnings'); - expect(stats.compilation.errors).toMatchSnapshot('errors'); - }); - - it('false', async () => { - expect.assertions(3); - - const testId = './simple.js'; - const stats = await compile(testId, { - devtool: 'source-map', - loader: { - options: { - sourceMap: false, - }, - }, - }); - - runTestInJsdom(stats, (dom) => { - expect(dom.serialize()).toMatchSnapshot('DOM'); - }); - - expect(stats.compilation.warnings).toMatchSnapshot('warnings'); - expect(stats.compilation.errors).toMatchSnapshot('errors'); - }); - - it('true', async () => { - expect.assertions(3); - - const testId = './simple.js'; - const stats = await compile(testId, { - devtool: 'source-map', - loader: { - options: { - sourceMap: true, - }, - }, - cssLoader: { - options: { - sourceMap: true, - }, - }, - }); - - runTestInJsdom(stats, (dom) => { - expect(dom.serialize()).toMatchSnapshot('DOM'); - }); - - expect(stats.compilation.warnings).toMatchSnapshot('warnings'); - expect(stats.compilation.errors).toMatchSnapshot('errors'); - }); - - it('true, but previous loader do not generate source map', async () => { - expect.assertions(3); - - const testId = './simple.js'; - const stats = await compile(testId, { - devtool: 'source-map', - loader: { - options: { - sourceMap: true, - }, - }, - cssLoader: { - options: { - sourceMap: false, - }, - }, - }); - - runTestInJsdom(stats, (dom) => { - expect(dom.serialize()).toMatchSnapshot('DOM'); - }); - - expect(stats.compilation.warnings).toMatchSnapshot('warnings'); - expect(stats.compilation.errors).toMatchSnapshot('errors'); - }); -}); diff --git a/test/validate-options.test.js b/test/validate-options.test.js index ebd3e013..111ac067 100644 --- a/test/validate-options.test.js +++ b/test/validate-options.test.js @@ -50,11 +50,5 @@ it('validate options', () => { validate({ singleton: 'unknown' }) ).toThrowErrorMatchingSnapshot(); - expect(() => validate({ sourceMap: true })).not.toThrow(); - expect(() => validate({ sourceMap: false })).not.toThrow(); - expect(() => - validate({ sourceMap: 'unknown' }) - ).toThrowErrorMatchingSnapshot(); - expect(() => validate({ unknown: 'unknown' })).toThrowErrorMatchingSnapshot(); });