Repository: webpack-contrib/css-loader (js)

Issue:
Sourcemaps from webpack & mini-css-extract-plugin have slightly different directory structure
<!-- Please don't delete this template because we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->

# Bug report

**What is the current behavior?**
In webpack 5 w/ `mini-css-extract-plugin` and config `devtool: 'source-map'`, chrome groups css and js in different directories:
![image](https://user-images.githubusercontent.com/1027886/97935704-58861d80-1d47-11eb-9e35-8953081e9248.png)

Here's the relevant snippet from the sourceMap files:
main.17fbf8.css.map: `"sources":["webpack://main/src/main.scss"]`
main.9c5261.js.map: `"sources":["webpack://main/./src/main.js"...`

[full webpack config](https://gist.github.com/isaacl/c933c48ccf4d893bee26c432bfcb2dd3)

It's annoying to have my files show separately in chrome, but I don't know which directory structure is more 'correct'. So, potentially, this is an issue for mini-css-extract-plugin.

<!-- "It should work" is not a helpful explanation -->
<!-- Explain exactly how it should behave -->

**Other relevant information:**
webpack version:  5.3.2
Node.js version: v14.13.1
Operating System: OS X 10.15.7


---

This issue was moved from webpack/webpack#11910 by @evilebottnawi. Original issue was by @isaacl.



Pull request description:
Match webpack sourcemap relative paths
<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [x] **bugfix**
- [ ] new **feature**
- [ ] **code refactor**
- [ ] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

Adjust source path to match the way webpack generates sourcemaps
for js. This makes css and js sources appear in the same directory
when using sourcemaps in chrome.

Fixes #1218.

<!--
  Please explain the motivation or use-case for your change.
  What existing problem does the PR solve?
  If this PR addresses an issue, please link to the issue.
-->

### Breaking Changes

<!--
  If this PR introduces a breaking change, please describe the impact and a
  migration path for existing applications.
-->

### Additional Info

Patch:
diff --git a/src/utils.js b/src/utils.js
index 4a1d1cc..edfcb7c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -484,7 +484,7 @@ function normalizeSourceMapForRuntime(map, loaderContext) {
         path.relative(loaderContext.rootContext, absoluteSource)
       );
 
-      return `webpack://${contextifyPath}`;
+      return `webpack://./${contextifyPath}`;
     });
   }
 


Test patch:
diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap
index f619016..7a9c914 100644
--- a/test/__snapshots__/sourceMap-option.test.js.snap
+++ b/test/__snapshots__/sourceMap-option.test.js.snap
@@ -176,7 +176,7 @@ import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/cssWit
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/with-query.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/with-query.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\".foo {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -196,7 +196,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/with-query.css",
+        "webpack://./source-map/with-query.css",
       ],
       "sourcesContent": Array [
         ".foo {
@@ -222,7 +222,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./test/fixtures/source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -242,7 +242,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://test/fixtures/source-map/nested/nested.css",
+        "webpack://./test/fixtures/source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -265,7 +265,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://test/fixtures/source-map/basic.css",
+        "webpack://./test/fixtures/source-map/basic.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
@@ -305,8 +305,8 @@ Object {
   "names": Array [],
   "sourceRoot": "",
   "sources": Array [
-    "webpack:///test/fixtures/source-map/nested/nested.css",
-    "webpack:///test/fixtures/source-map/basic.css",
+    "webpack:///./test/fixtures/source-map/nested/nested.css",
+    "webpack:///./test/fixtures/source-map/basic.css",
   ],
   "sourcesContent": Array [
     ".nested {
@@ -348,8 +348,8 @@ Object {
   "names": Array [],
   "sourceRoot": "",
   "sources": Array [
-    "webpack:///source-map/nested/nested.css",
-    "webpack:///source-map/basic.css",
+    "webpack:///./source-map/nested/nested.css",
+    "webpack:///./source-map/basic.css",
   ],
   "sourcesContent": Array [
     ".nested {
@@ -379,7 +379,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -399,7 +399,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.css",
+        "webpack://./source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -422,7 +422,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.css",
+        "webpack://./source-map/basic.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
@@ -450,7 +450,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic-1.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic-1.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -470,7 +470,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.css",
+        "webpack://./source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -493,7 +493,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic-1.css",
+        "webpack://./source-map/basic-1.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
@@ -519,7 +519,7 @@ import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/cssWit
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/base.less\\"],\\"names\\":[],\\"mappings\\":\\"AAGA;EACE,gCAAA;EACA,WAAA;AAFF\\",\\"sourcesContent\\":[\\"@font-stack:    Helvetica, sans-serif;\\\\n@primary-color: #333;\\\\n\\\\nbody {\\\\n  font: 100% @font-stack;\\\\n  color: @primary-color;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/base.less\\"],\\"names\\":[],\\"mappings\\":\\"AAGA;EACE,gCAAA;EACA,WAAA;AAFF\\",\\"sourcesContent\\":[\\"@font-stack:    Helvetica, sans-serif;\\\\n@primary-color: #333;\\\\n\\\\nbody {\\\\n  font: 100% @font-stack;\\\\n  color: @primary-color;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -540,7 +540,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/base.less",
+        "webpack://./source-map/base.less",
       ],
       "sourcesContent": Array [
         "@font-stack:    Helvetica, sans-serif;
@@ -570,7 +570,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\":root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: rgba(18,52,86,0.47059);\\\\n  --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n  overflow-x: hidden;\\\\n  overflow-y: auto;\\\\n  overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n  body {\\\\n    color: rgba(18,52,86,0.47059);\\\\n    color: var(--mainColor);\\\\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n    font-size: 1rem;\\\\n    font-size: var(--fontSize);\\\\n    line-height: calc(1rem * 1.5);\\\\n    line-height: calc(var(--fontSize) * 1.5);\\\\n    word-wrap: break-word;\\\\n    padding-left: calc(1rem / 2 + 1px);\\\\n    padding-right: calc(1rem / 2 + 1px);\\\\n    padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n    padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n  }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n  margin-top: 0;\\\\n  margin-bottom: 0;\\\\n}\\\\n\\\\na {\\\\n  color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n   color: #639;\\\\n }\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.postcss.css\\"],\\"names\\":[],\\"mappings\\":\\"AAKA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.postcss.css\\\\\\";\\\\n\\\\n@custom-media --viewport-medium (width <= 50rem);\\\\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\\\\n\\\\n:root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: #12345678;\\\\n  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);\\\\n}\\\\n\\\\nhtml {\\\\n  overflow: hidden auto;\\\\n}\\\\n\\\\n@media (--viewport-medium) {\\\\n  body {\\\\n    color: var(--mainColor);\\\\n    font-family: system-ui;\\\\n    font-size: var(--fontSize);\\\\n    line-height: calc(var(--fontSize) * 1.5);\\\\n    overflow-wrap: break-word;\\\\n    padding-inline: calc(var(--fontSize) / 2 + 1px);\\\\n  }\\\\n}\\\\n\\\\n:--heading {\\\\n  margin-block: 0;\\\\n}\\\\n\\\\na {\\\\n  color: rgb(0 0 100% / 90%);\\\\n\\\\n&:hover {\\\\n   color: rebeccapurple;\\\\n }\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\":root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: rgba(18,52,86,0.47059);\\\\n  --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n  overflow-x: hidden;\\\\n  overflow-y: auto;\\\\n  overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n  body {\\\\n    color: rgba(18,52,86,0.47059);\\\\n    color: var(--mainColor);\\\\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n    font-size: 1rem;\\\\n    font-size: var(--fontSize);\\\\n    line-height: calc(1rem * 1.5);\\\\n    line-height: calc(var(--fontSize) * 1.5);\\\\n    word-wrap: break-word;\\\\n    padding-left: calc(1rem / 2 + 1px);\\\\n    padding-right: calc(1rem / 2 + 1px);\\\\n    padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n    padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n  }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n  margin-top: 0;\\\\n  margin-bottom: 0;\\\\n}\\\\n\\\\na {\\\\n  color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n   color: #639;\\\\n }\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.postcss.css\\"],\\"names\\":[],\\"mappings\\":\\"AAKA;EACE,gBAAgB;EAChB,mCAAsB;EACtB,yCAA4C;AAC9C;;AAEA;EACE,kBAAqB;EAArB,gBAAqB;EAArB,qBAAqB;AACvB;;AAEA;EACE;IACE,6BAAuB;IAAvB,uBAAuB;IACvB,iGAAsB;IACtB,eAA0B;IAA1B,0BAA0B;IAC1B,6BAAwC;IAAxC,wCAAwC;IACxC,qBAAyB;IACzB,kCAA+C;IAA/C,mCAA+C;IAA/C,6CAA+C;IAA/C,8CAA+C;EACjD;AACF;;AAEA;EACE,aAAe;EAAf,gBAAe;AACjB;;AAEA;EACE;AAKF;;AAHA;GACG,WAAoB;CACtB\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.postcss.css\\\\\\";\\\\n\\\\n@custom-media --viewport-medium (width <= 50rem);\\\\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\\\\n\\\\n:root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: #12345678;\\\\n  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);\\\\n}\\\\n\\\\nhtml {\\\\n  overflow: hidden auto;\\\\n}\\\\n\\\\n@media (--viewport-medium) {\\\\n  body {\\\\n    color: var(--mainColor);\\\\n    font-family: system-ui;\\\\n    font-size: var(--fontSize);\\\\n    line-height: calc(var(--fontSize) * 1.5);\\\\n    overflow-wrap: break-word;\\\\n    padding-inline: calc(var(--fontSize) / 2 + 1px);\\\\n  }\\\\n}\\\\n\\\\n:--heading {\\\\n  margin-block: 0;\\\\n}\\\\n\\\\na {\\\\n  color: rgb(0 0 100% / 90%);\\\\n\\\\n&:hover {\\\\n   color: rebeccapurple;\\\\n }\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -590,7 +590,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.postcss.css",
+        "webpack://./source-map/nested/nested.postcss.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -651,7 +651,7 @@ a:hover {
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.postcss.css",
+        "webpack://./source-map/basic.postcss.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.postcss.css\\";
@@ -709,7 +709,7 @@ import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/cssWit
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.scss\\"],\\"names\\":[],\\"mappings\\":\\"AAGA;EACE,gCAAA;EACA,WAJc;AAEhB\\",\\"sourcesContent\\":[\\"$font-stack:    Helvetica, sans-serif;\\\\n$primary-color: #333;\\\\n\\\\nbody {\\\\n  font: 100% $font-stack;\\\\n  color: $primary-color;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.scss\\"],\\"names\\":[],\\"mappings\\":\\"AAGA;EACE,gCAAA;EACA,WAJc;AAEhB\\",\\"sourcesContent\\":[\\"$font-stack:    Helvetica, sans-serif;\\\\n$primary-color: #333;\\\\n\\\\nbody {\\\\n  font: 100% $font-stack;\\\\n  color: $primary-color;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -729,7 +729,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.scss",
+        "webpack://./source-map/basic.scss",
       ],
       "sourcesContent": Array [
         "$font-stack:    Helvetica, sans-serif;
@@ -757,7 +757,7 @@ import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/cssWit
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 14px/1.5 Helvetica, arial, sans-serif;\\\\n}\\\\nbody #logo {\\\\n  border-radius: 5px;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/base.styl\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,2CAAwB;AAC1B;AAAE;EACE,kBAAe;AAEnB\\",\\"sourcesContent\\":[\\"body {\\\\n  font: 14px/1.5 Helvetica, arial, sans-serif;\\\\n  #logo {\\\\n    border-radius: 5px;\\\\n  }\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 14px/1.5 Helvetica, arial, sans-serif;\\\\n}\\\\nbody #logo {\\\\n  border-radius: 5px;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/base.styl\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,2CAAwB;AAC1B;AAAE;EACE,kBAAe;AAEnB\\",\\"sourcesContent\\":[\\"body {\\\\n  font: 14px/1.5 Helvetica, arial, sans-serif;\\\\n  #logo {\\\\n    border-radius: 5px;\\\\n  }\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -780,7 +780,7 @@ body #logo {
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/base.styl",
+        "webpack://./source-map/base.styl",
       ],
       "sourcesContent": Array [
         "body {
@@ -809,7 +809,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -829,7 +829,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.css",
+        "webpack://./source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -852,7 +852,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.css",
+        "webpack://./source-map/basic.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
@@ -880,7 +880,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -900,7 +900,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.css",
+        "webpack://./source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -923,7 +923,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.css",
+        "webpack://./source-map/basic.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
@@ -951,7 +951,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".class {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\",{\\"version\\":3,\\"sources\\":[\\"webpack://./source-map/basic.css\\"],\\"names\\":[],\\"mappings\\":\\"AAEA;EACE,UAAU;AACZ\\",\\"sourcesContent\\":[\\"@import \\\\\\"./nested/nested.css\\\\\\";\\\\n\\\\n.class {\\\\n  color: red;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}]);
 // Exports
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -971,7 +971,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/nested/nested.css",
+        "webpack://./source-map/nested/nested.css",
       ],
       "sourcesContent": Array [
         ".nested {
@@ -994,7 +994,7 @@ Array [
       "names": Array [],
       "sourceRoot": "",
       "sources": Array [
-        "webpack://source-map/basic.css",
+        "webpack://./source-map/basic.css",
       ],
       "sourcesContent": Array [
         "@import \\"./nested/nested.css\\";
diff --git a/test/sourceMap-option.test.js b/test/sourceMap-option.test.js
index 479179a..e4e36eb 100644
--- a/test/sourceMap-option.test.js
+++ b/test/sourceMap-option.test.js
@@ -609,7 +609,7 @@ describe('"sourceMap" option', () => {
 
       expect(chunkName).toBe(
         // TODO still buggy on webpack@4
-        webpack.version[0] === '5' ? 'main.208dafd9be3442f7a927.css' : chunkName
+        webpack.version[0] === '5' ? 'main.0c4134a13ce273487b87.css' : chunkName
       );
 
       expect(