Corrupt source map paths on Windows and invalid `sources`

[rjgotten]

Details

postcss-loader continues to produce invalid source map paths on Windows, after #224 was closed.
Said issue was pointing to css-loader as a culprit.
css-loader was fixed.
postcss-loader was not.

Reproduction (Code)

The following webpack loader sequence produces valid source map paths:

[
  MiniCssExtract.loader,
  "css-loader",
  "sass-loader"
]

The following webpack loader sequences produces INVALID paths:

[
  MiniCssExtract.loader,
  "css-loader",
  "postcss-loader",
  "sass-loader"
]

I have also written a small custom loader which passes through the content and sourcemap from the previous loader, while logging the sourcemap sources array with a simple console.log() call.

Placing said logger on top of sass-loader shows paths relative to the webpack project root. Placing said logger on top of postcss-loader shows the same type of corrupted paths as mentioned in #224.

Environment

OS	node	npm/yarn	package
Windows 10	8.9.x	6.1.x	3.0.0

[alexander-akait]

@rjgotten can you create minimum reproducible test repo?

[rjgotten]

@evilebottnawi
I'll try to work on that tomorrow.

[michael-ciniawsky]

@rjgotten Could you try with the following patch ?

https://github.com/postcss/postcss-loader/blob/master/src/index.js#L157-L159

if (map) {
-  map.file = path.isAbsolute(map.file) ? map.file : path.resolve(map.file)
+  map.file = path.isAbsolute(map.file) ? map.file : path.resolve(map.file)
-  map.sources = map.sources.map((src) => path.resolve(src))
+  map.sources = map.sources.map((src) => {
+     if (path.isAbsolute(src))
+        return src
+     }
+
+     return path.resolve(src)
+  })
}

[alexander-akait]

@michael-ciniawsky good catch! Don't think what source map can have absolute path 😕

[michael-ciniawsky]

This seems to be likely the offending line causing the issue on windows when the postcss-loader resolves the paths. I don't have access to a windows machine and therefore can't verify, but on Linux/macOS with and without the suggested patch sourcemaps seem to work correctly (besides using the style-loader but that's definitely another bug there, so try with e.g the mini-css-extract-plugin when testing)

map.json

{ 
  version: 3,
  sources: [
     '/Users/Cini/Github/webpack/__test__/client/styles/imports/import.css',
     '/Users/Cini/Github/webpack/__test__/client/styles/App.scss' 
  ],
  names: [],
  mappings: 'AAAA,yBAAA;ACAA;EACE,...',
  file: '/Users/Cini/Github/webpack/__test__/client/styles/App.scss',
  sourcesContent: [ '...' ] 
}

[alexander-akait]

@michael-ciniawsky what do you think about this https://github.com/webpack-contrib/sass-loader/blob/master/lib/loader.js#L70? Maybe we should fix it in sass-loader

[rjgotten]

@michael-ciniawsky
Could you try with the following patch ?

Sadly has no effect.

I'll start working on building a test case.

[rjgotten]

@evilebottnawi
Testcase is ready: https://github.com/NetMatch/postcss-loader-testcase

The build has a passthrough loader woven in which shows the source map sources going into and coming out of postcss loader.

What I'm seeing when running this on Windows:

Sourcemap spy - postcss-loader input:
  src\style\app.scss
  src\style\sub\a.scss
  src\style\sub\b.scss


Sourcemap spy - postcss-loader output:
  D:\github_git\postcss-loader-testcase\src\style\D:\github_git\postcss-loader-testcase\src\style\sub\a.scss
  D:\github_git\postcss-loader-testcase\src\style\D:\github_git\postcss-loader-testcase\src\style\sub\b.scss
  D:\github_git\postcss-loader-testcase\src\style\D:\github_git\postcss-loader-testcase\src\style\app.scss

[michael-ciniawsky]

Did you also try with commenting out these lines completely to see if the path.resolve in potcss-loader causes this weird concatination on windows? I wll try my best to debug it, but as mentioned before I don't have aceess to a windows machine so it is hard for me to get my hands on this :)

[rjgotten]

I don't have aceess to a windows machine

I think Microsoft offers VMs for developers, with licenses that auto-expire after a set period.
Might be a bit of a help in that department, if you're dealing with this type of thing.

Did you also try with commenting out these lines completely

Hmm.. I should've remembered to try that. Ok. I've made a note to try commenting out the path.resolve lines completely. Will get to that after the weekend.