test: contenthash

src/index.js

@@ -11,7 +11,6 @@ import { getOptions, isUrlRequest } from 'loader-utils';
 import schema from './options.json';
 import { importParser, icssParser, urlParser } from './plugins';
 import {
-  normalizeSourceMap,
   getModulesPlugins,
   getFilter,
   getImportCode,
@@ -75,8 +74,7 @@ export default function loader(content, map, meta) {
       to: this.currentRequest.split('!').pop(),
       map: options.sourceMap
         ? {
-            // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
-            prev: sourceMap && map ? normalizeSourceMap(map) : null,
+            prev: sourceMap && map ? map : null,
             inline: false,
             annotation: false,
           }

src/utils.js

@@ -16,6 +16,7 @@ import localByDefault from 'postcss-modules-local-by-default';
 import extractImports from 'postcss-modules-extract-imports';
 import modulesScope from 'postcss-modules-scope';
 import camelCase from 'camelcase';
+import RequestShortener from 'webpack/lib/RequestShortener';
 
 const whitespace = '[\\x20\\t\\r\\n\\f]';
 const unescapeRegExp = new RegExp(
@@ -156,31 +157,28 @@ function getModulesPlugins(options, loaderContext) {
   ];
 }
 
-function normalizeSourceMap(map) {
-  let newMap = map;
-
-  // Some loader emit source map as string
-  // Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON.
-  if (typeof newMap === 'string') {
-    newMap = JSON.parse(newMap);
-  }
+function normalizeSourceMap(map, rootContext) {
+  const newMap = map.toJSON();
+  const requestShortener = new RequestShortener(rootContext);
 
   // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91)
   // We should normalize path because previous loaders like `sass-loader` using backslash when generate source map
 
   if (newMap.file) {
-    newMap.file = normalizePath(newMap.file);
+    newMap.file = requestShortener.shorten(newMap.file);
   }
 
   if (newMap.sourceRoot) {
-    newMap.sourceRoot = normalizePath(newMap.sourceRoot);
+    newMap.sourceRoot = requestShortener.shorten(newMap.sourceRoot);
   }
 
   if (newMap.sources) {
-    newMap.sources = newMap.sources.map((source) => normalizePath(source));
+    newMap.sources = newMap.sources.map((source) =>
+      requestShortener.shorten(source)
+    );
   }
 
-  return newMap;
+  return JSON.stringify(newMap);
 }
 
 function getImportPrefix(loaderContext, importLoaders) {
@@ -372,7 +370,10 @@ function getModuleCode(
   }
 
   const { css, map } = result;
-  const sourceMapValue = sourceMap && map ? `,${map}` : '';
+  const sourceMapValue =
+    sourceMap && map
+      ? `,${normalizeSourceMap(map, loaderContext.rootContext)}`
+      : '';
 
   let cssCode = JSON.stringify(css);
 
@@ -501,7 +502,6 @@ export {
   normalizeUrl,
   getFilter,
   getModulesPlugins,
-  normalizeSourceMap,
   getImportCode,
   getModuleCode,
   getExportCode,

test/__snapshots__/loader.test.js.snap

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader should have same "contenthash" with "css-loader" and with source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "css-loader" and with source maps: warnings 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "css-loader" and without source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "css-loader" and without source maps: warnings 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "postcss-loader" and with source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "postcss-loader" and with source maps: warnings 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "postcss-loader" and without source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "postcss-loader" and without source maps: warnings 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "sass-loader" and with source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "sass-loader" and with source maps: warnings 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "sass-loader" and without source maps: errors 1`] = `Array []`;
+
+exports[`loader should have same "contenthash" with "sass-loader" and without source maps: warnings 1`] = `Array []`;
+
 exports[`loader should reuse \`ast\` from "postcss-loader": errors 1`] = `Array []`;
 
 exports[`loader should reuse \`ast\` from "postcss-loader": module 1`] = `

test/fixtures/contenthash/basic-css.js

@@ -0,0 +1,5 @@
+import css from './basic.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/contenthash/basic-postcss.js

@@ -0,0 +1,5 @@
+import css from './basic.postcss.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/contenthash/basic-sass.js

@@ -0,0 +1,5 @@
+import css from './basic.scss';
+
+__export__ = css;
+
+export default css;

test/fixtures/contenthash/basic.css

@@ -0,0 +1,3 @@
+a {
+  color: red;
+}

test/fixtures/contenthash/basic.postcss.css

@@ -0,0 +1,7 @@
+a {
+  color: rgb(0 0 100% / 90%);
+
+  &:hover {
+    color: rebeccapurple;
+  }
+}

test/fixtures/contenthash/basic.scss

@@ -0,0 +1,9 @@
+$var: red;
+
+a {
+  color: $var;
+
+  &:hover {
+    color: $var;
+  }
+}