Wrong SourceMap genrated

[zq1997]

Details

Wrong SourceMap genrated

Reproduction (Code)

// webpack.config.js
...
entry : {
  test: './src/test.css',
}
plugins: [
  new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    noSources: true,
    moduleFilenameTemplate: '[resource-path]'
  }
],
module: {
  rules: [
    {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          Conf.cases(Conf.prod, {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer,
                cssnano
              ],
              sourceMap: true
            }
          })
        ]
    }
  ]
}
...

body {
    margin: 0;
}

generated sourcemap has wrong path test.css instead of ./src/test.css

{"version":3,"sources":["test.css"],"names":[],"mappings":"AAAA,KACI,QACJ,C","file":"test.css","sourceRoot":""}

Environment

OS	node	npm/yarn	package
Ubuntu20.04.1 LTS	13.14.0	6.14.4	3.0.0

[alexander-akait]

Bug on css-loader side and mini-css-extract-plugin, already in WIP, we need postcss@8 release to fix it

[zq1997]

But if I disable postcss loader，the problem goes away.
And if I append sass-loader after postcss， also problem free.
A little confuseing.

[alexander-akait]

Oh, yep, I was misleading, it is bug in postcss, because postcss, don't know how generate absolute sources, let's keep open

[alexander-akait]

@zq1997 maybe you can create minimum reproducible test repo, just want to add tests on this case?

[zq1997]

Just three reproducible files, (too lazy to create a repo)
package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack -c webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^3.6.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: "development",
  entry : {
    test: './src/test.css',
  },
  devtool: 'source-map',
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [],
              sourceMap: true
            }
          },
          // enable sass-loader will make source-map work properly.
          // "sass-loader"
        ]
      }
    ]
  }
}

src/test.css

body {
    margin: 0;
}

Then

npm start
cat dist/test.css.map

GOT

{"version":3,"sources":["webpack:///test.css"],"names":[],"mappings":"AAAA;IACI,SAAS;AACb","file":"test.css","sourcesContent":["body {\n    margin: 0;\n}\n"],"sourceRoot":""}

with sass-loader

{"version":3,"sources":["webpack:///./src/test.css","webpack:///test.css"],"names":[],"mappings":"AAAA;EACI;ACCJ,C","file":"test.css","sourcesContent":["body {\n    margin: 0;\n}\n","body {\n  margin: 0;\n}"],"sourceRoot":""}

the differnces is directory name ./src

[zq1997]

Ops, these files cannot reproduce But if I disable postcss loader，the problem goes away., sorry but my origin repository is too complex...
maybe we can focus on And if I append sass-loader after postcss， also problem free. this problem, its reproduced here.

[alexander-akait]

Thanks!

[zq1997]

I wrote an no-op loader to view the sourcemap changes

module.exports = function(source, map, meta) {
  console.log(map);
  this.callback(null,source,map,meta);
}

apply the loader

          path.resolve('./nop-loader.js'),
          {
            loader: 'postcss-loader',
            options: {
              plugins: [],
              sourceMap: true
            }
          },
          path.resolve('./nop-loader.js'),
          // enable sass-loader will make source-map work properly.
          "sass-loader"

The result make me a little confused, why there is two sources? and relative path became absolute

{
  version: 3,
  sourceRoot: '/home/zq/workspace/try',
  sources: [ 'src/test.css' ],
  names: [],
  mappings: 'AAAA;EACI',
  sourcesContent: [ 'body {\n    margin: 0;\n}\n' ]
}
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
{
  version: 3,
  sources: [
    '/home/zq/workspace/try/src/test.css',
    '/home/zq/workspace/try/src/test.css'
  ],
  names: [],
  mappings: 'AAAA;EACI,SAAA;ACCJ',
  file: '/home/zq/workspace/try/src/test.css',
  sourcesContent: [ 'body {\n    margin: 0;\n}\n', 'body {\n  margin: 0;\n}' ]
}

[zq1997]

My original project is writen in Vue, I also print the sourcemap result of ./src/app.vue

============= before postcss-loader (Without sass-loader)
{
  version: 3,
  sources: [ 'app.vue' ],
  names: [],
  mappings: ';;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA;AACA;AACA',
  file: 'app.vue',
  sourceRoot: 'src',
  sourcesContent: [ ... ]
} undefined
============= after postcss-loader
{
  version: 3,
  sources: [ '/home/zq/workspace/TryVuetifySSR/src/src/app.vue' ],
  names: [],
  mappings: 'AAuDA,WACA,QACA',
  file: '/home/zq/workspace/TryVuetifySSR/src/app.vue',
  sourcesContent: [ ... ]
}

the absolute path is wrong becuase .../src/src/... is not any directory, seems to be a wrong path concatation

[alexander-akait]

Bug here, it is invalid use path.resolve, because we don't know context https://github.com/postcss/postcss-loader/blob/master/src/index.js#L157

[zq1997]

My original project is writen in Vue, I also print the sourcemap result of ./src/app.vue

============= before postcss-loader (Without sass-loader)
{
  version: 3,
  sources: [ 'app.vue' ],
  names: [],
  mappings: ';;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA;AACA;AACA',
  file: 'app.vue',
  sourceRoot: 'src',
  sourcesContent: [ ... ]
} undefined
============= after postcss-loader
{
  version: 3,
  sources: [ '/home/zq/workspace/TryVuetifySSR/src/src/app.vue' ],
  names: [],
  mappings: 'AAuDA,WACA,QACA',
  file: '/home/zq/workspace/TryVuetifySSR/src/app.vue',
  sourcesContent: [ ... ]
}

the absolute path is wrong becuase .../src/src/... is not any directory, seems to be a wrong path concatation

And this problem is caused by https://github.com/postcss/postcss-loader/blob/master/src/index.js#L141 line. postcss return source map with src/src path

[alexander-akait]

Yes, we need fix it

[alexander-akait]

Let's close in favor #390, we need postcss@8 release to fix it, title of the issue was updated