From 3b527f236209c96a19e7f46b05a4ce1bccdb88af Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Tue, 8 Sep 2020 19:41:19 +0300 Subject: [PATCH] fix: source map generation with the "map" option for `postcss` --- src/index.js | 18 ++-- src/utils.js | 5 ++ test/__snapshots__/sourceMap.test.js.snap | 104 ++++++++++++++++++++++ test/sourceMap.test.js | 56 +++++++++++- 4 files changed, 171 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 0e0c600b..b502b8cd 100644 --- a/src/index.js +++ b/src/index.js @@ -70,17 +70,15 @@ export default async function loader(content, sourceMap, meta) { ); if (useSourceMap) { - processOptions.map = { inline: false, annotation: false }; - - if (sourceMap) { - processOptions.map.prev = normalizeSourceMap(sourceMap, this.context); - } - } else if (sourceMap && typeof processOptions.map !== 'undefined') { - if (typeof processOptions.map === 'boolean') { - processOptions.map = { inline: true }; - } + processOptions.map = { + inline: false, + annotation: false, + ...processOptions.map, + }; + } - processOptions.map.prev = sourceMap; + if (sourceMap && processOptions.map) { + processOptions.map.prev = normalizeSourceMap(sourceMap, this.context); } let root; diff --git a/src/utils.js b/src/utils.js index 26379400..e5ab2a31 100644 --- a/src/utils.js +++ b/src/utils.js @@ -285,6 +285,11 @@ function getPostcssOptions( } } + if (processOptions.map === true) { + // https://github.com/postcss/postcss/blob/master/docs/source-maps.md + processOptions.map = { inline: true }; + } + return { plugins, processOptions }; } diff --git a/test/__snapshots__/sourceMap.test.js.snap b/test/__snapshots__/sourceMap.test.js.snap index 51d4732b..d53f0d6d 100644 --- a/test/__snapshots__/sourceMap.test.js.snap +++ b/test/__snapshots__/sourceMap.test.js.snap @@ -1,5 +1,109 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": css 1`] = ` +"a { + color: black; +} + +a { + color: red; +} + +a { + color: green; +} + +a { + color: blue; +} + +.class { + -x-border-color: blue blue *; + -x-color: * #fafafa; +} + +.class-foo { + -z-border-color: blue blue *; + -z-color: * #fafafa; +} + +.phone { + &_title { + width: 500px; + + @media (max-width: 500px) { + width: auto; + } + + body.is_dark & { + color: white; + } + } + + img { + display: block; + } +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */" +`; + +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": errors 1`] = `Array []`; + +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": warnings 1`] = `Array []`; + +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": css 1`] = ` +"a { + color: black; +} + +a { + color: red; +} + +a { + color: green; +} + +a { + color: blue; +} + +.class { + -x-border-color: blue blue *; + -x-color: * #fafafa; +} + +.class-foo { + -z-border-color: blue blue *; + -z-color: * #fafafa; +} + +.phone { + &_title { + width: 500px; + + @media (max-width: 500px) { + width: auto; + } + + body.is_dark & { + color: white; + } + } + + img { + display: block; + } +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */" +`; + +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": errors 1`] = `Array []`; + +exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": warnings 1`] = `Array []`; + exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader"): css 1`] = ` "a { color: coral; diff --git a/test/sourceMap.test.js b/test/sourceMap.test.js index 69e4a815..5cd519bb 100644 --- a/test/sourceMap.test.js +++ b/test/sourceMap.test.js @@ -175,6 +175,10 @@ describe('"sourceMap" option', () => { implementation: require('sass'), sassOptions: { sourceMap: true, + sourceMapRoot: path.resolve( + __dirname, + './fixtures/scss/' + ), outFile: path.resolve( __dirname, './fixtures/scss/style.css.map' @@ -234,6 +238,10 @@ describe('"sourceMap" option', () => { implementation: require('sass'), sassOptions: { sourceMap: true, + sourceMapRoot: path.resolve( + __dirname, + './fixtures/scss/' + ), outFile: path.resolve( __dirname, './fixtures/scss/style.css.map' @@ -337,11 +345,9 @@ describe('"sourceMap" option', () => { use: [ { loader: require.resolve('./helpers/testLoader'), - options: {}, }, { loader: path.resolve(__dirname, '../src'), - options: {}, }, { loader: 'sass-loader', @@ -428,4 +434,50 @@ describe('"sourceMap" option', () => { expect(getWarnings(stats)).toMatchSnapshot('warnings'); expect(getErrors(stats)).toMatchSnapshot('errors'); }); + + it('should generate inline source maps when the "devtool" is "false"', async () => { + const compiler = getCompiler( + './css/index.js', + { + postcssOptions: { + map: { + inline: true, + annotation: false, + }, + }, + }, + { + devtool: false, + } + ); + const stats = await compile(compiler); + const { css } = getCodeFromBundle('style.css', stats); + + expect(css).toMatchSnapshot('css'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + it('should generate inline source maps when the "devtool" is "true"', async () => { + const compiler = getCompiler( + './css/index.js', + { + postcssOptions: { + map: { + inline: true, + annotation: false, + }, + }, + }, + { + devtool: 'source-map', + } + ); + const stats = await compile(compiler); + const { css } = getCodeFromBundle('style.css', stats); + + expect(css).toMatchSnapshot('css'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); });