fix: source map generation with the map option for postcss (#476)

webpack-contrib · Sep 8, 2020 · 6babeb1 · 6babeb1
1 parent 9e5c9cf
commit 6babeb1
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');
+ });
 });