sourcemap paths are incorrect and doubled on webpack4 with css-loader@1.0.0

[ocoka]

Hello, I found that on webpack4 with css-loader@1.0.0, and next config:

module.exports = {
  devtool: 'module-source-map',
  module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'stylus-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

there is a problem with generated paths in sourcemap for stylus files, for example, with dir structure like this:

and index.js

import st from './assets/styles/main.styl';

I get this paths
'/home/ocoka/Documents/proj/test/src/assets/styles/ src/assets/styles/ buttons/buttons.styl',
'/home/ocoka/Documents/proj/test/src/assets/styles/main.styl'

some double path bug !!!

actually I have a repo to reproduce that

It's worh to mention that above bug I got with devtool: "source-map" parameter, maybe with variants like eval- it will not be such buggy, but I think that "source-map" more appropriate for present time, since it more clearer for Chrome Dev Tools with all it's current features

I've experimented a little, and will make a PR for you to consider proposed solution, of course it is not perfect, event maybe ugly )), but I don't have a strong knowledge about sourcemap machinery in general and have no experience in webpack world

Also I've found some discussion about new sourcemap behavior present in PR to css-loader:
webpack-contrib/css-loader#753, maybe you would be interested

[ocoka]

I've also noticed that it is not happens on webpack2 and old css-loader

[npetruzzelli]

@ocoka - I'm replying to you here to keep stylus loader specific conversation all in one place.

I have plans to eventually look at the less and stylus loaders, but they are further down the road for me. My road map looks like the following:

1. Sass & CSS loaders
2. PostCSS loader
3. Style loader
4. mini-css-extract-plugin
5. webpack-dev-server
6. Other preprocessors (less / stylus loader)
7. Other "map writers" (extract text plugin, source map plugin, raw loader, etc.)

The reason that sass and css loader are being done first is two fold. 1) I use Sass a lot, so naturally I'd fix that first; 2) It needs to be done correctly in one place before time is spent porting it to others, to do this the style loader and mini-css-extract-plugin are critical in many workflows. I'm confident in my capabilities, but that doesn't mean I'll get it right the first time. I owe it to each repo maintainer to be thorough, so it will take some time :)

That said, I took a quick look at the stylus loader's code. If this works out, I imagine much of what I'm doing will apply to this loader.

[ocoka]

Wow, it will be amazing, I use Sass on some projects also, hope all your plans will succeed ! Thank's for your time

[alexander-akait]

Fixed on css-loader side, anyway loader should emit absolute sources for webpack, we will improve it in future