diff --git a/CHANGELOG.md b/CHANGELOG.md index dfc96f85..fb6039df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [4.0.1](https://github.com/webpack-contrib/postcss-loader/compare/v4.0.0...v4.0.1) (2020-09-08) + + +### Bug Fixes + +* source map generation with the `map` option for `postcss` ([#476](https://github.com/webpack-contrib/postcss-loader/issues/476)) ([6babeb1](https://github.com/webpack-contrib/postcss-loader/commit/6babeb1d64ca1e7d3d3651cb07881e1e291fa994)) + ## [4.0.0](https://github.com/webpack-contrib/postcss-loader/compare/v3.0.0...v4.0.0) (2020-09-07) diff --git a/README.md b/README.md index 2e868b2e..ec24231a 100644 --- a/README.md +++ b/README.md @@ -502,7 +502,9 @@ module.exports = { test: /\.css$/i, loader: 'postcss-loader', options: { - config: false, + postcssOptions: { + config: false, + }, }, }, ], @@ -517,6 +519,8 @@ Allows to specify the path to the config file. **webpack.config.js** ```js +const path = require('path'); + module.exports = { module: { rules: [ @@ -524,7 +528,9 @@ module.exports = { test: /\.css$/i, loader: 'postcss-loader', options: { - config: path.resolve(__dirname, 'custom.config.js'), + postcssOptions: { + config: path.resolve(__dirname, 'custom.config.js'), + }, }, }, ], @@ -948,6 +954,8 @@ module.exports = { **webpack.config.js** ```js +const path = require('path'); + module.exports = { module: { rules: [ @@ -959,7 +967,9 @@ module.exports = { { loader: 'postcss-loader', options: { - config: 'path/to/postcss.config.js', + postcssOptions: { + config: path.resolve(__dirname, 'path/to/postcss.config.js'), + }, }, }, ], diff --git a/package-lock.json b/package-lock.json index 67741a2d..5fec14f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "postcss-loader", - "version": "4.0.0", + "version": "4.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5bf9615a..1b70184c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-loader", - "version": "4.0.0", + "version": "4.0.1", "description": "PostCSS loader for webpack", "license": "MIT", "repository": "webpack-contrib/postcss-loader", 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'); + }); });