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');
+  });
 });