postcss-loader: Corrupt source map paths on Windows and invalid `sources`

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 29 (14 by maintainers)

Most upvoted comments

Very thanks, we work on refactor postcss-loader/css-loader (already refactored) and style-loader, in near future i will see how we can fix it 👍

alexander-akait on Dec 10, 2018

@evilebottnawi I created a test repo. https://github.com/syberon/postcss-bug

syberon on Nov 28, 2019

I once found there is a key function (util.join()) in source-map lib could probably cause this problem: https://github.com/mozilla/source-map/issues/355

but after discussing, I realized that the paths in the sources field should be URLs but the os paths, that why util.join() doesn’t treat windows device path as an absolute path. so it generated the paths like this.

I read the code of the build pipeline: [css-loader, postcss-loader, sass-loader], then I got many bad idea in them:

sass-loader: normalize all the relative path in the sources field to os path, bad! since it should be URLs, should always use POSIX path separator (/) rather than os path separator (\ on windows). postcss-loader: convert relative paths to os absolute paths (\), bad! see below. css-loader: use whatever paths from the previous loader, but convert to POSIX path separator (/), so-so. should be responsible to convert the paths to relative paths, or better, the webpack-internal path.

Don’t insert absolute paths into the module code as they break hashing when the root for the project is moved. https://webpack.js.org/contribute/writing-a-loader/#absolute-paths

There will be much effort to fix the bug since it’s related to 3 loaders & 1 lib, so I wrote a small loader to fix the sourcemap temporary in my projects. Which fix and convert the os absolute path to webpack-internal:// path https://gist.github.com/mutoo/ad6dd6101535e82a44bcc2a051d7cb22

mutoo on Sep 6, 2018