sourcemap doesn't work as expected with css-modules

[hexpunk]

What is the current behavior?
With sourceMap and modules both enabled, the soucemaps don't seem to work as expected. The source that shows in the browser's dev tools is the JavaScript, not the actual CSS.

If the current behavior is a bug, please provide the steps to reproduce.
I created this repository to minimally reproduce this issue.

What is the expected behavior?
I'd expect to see the actual CSS from the source files (perhaps with generated class names).

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
I've tested this on Ubuntu 16.04 and MacOS (whatever the latest version is).
node: 8.11.1
webpack: 4.14.0

[hexpunk]

Here's an example of what I'm seeing.

./src/components/button.css

.root {
  background-color: orange;
}

./src/components/Button.js

import React from 'react';
import styles from './button.css';

export default function Button() {
  return (
    <button type="button" className={styles.root}>
      {'I am a button!'}
    </button>
  );
}

Then, in Chome DevTools...

webpack://./src/components/button.css

exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".button__root--MxvHg {\n  background-color: orange;\n}\n", "", {"version":3,"sources":["/home/jsherby/code/css-loader-sourcemap-example/src/components/button.css"],"names":[],"mappings":"AAAA;EACE,yBAAyB;CAC1B","file":"button.css","sourcesContent":[".root {\n  background-color: orange;\n}\n"],"sourceRoot":""}]);

// exports
exports.locals = {
	"root": "button__root--MxvHg"
};

webpack://./src/components/button.css?be01

var content = require("!!../../node_modules/css-loader/index.js??ref--5-1!./button.css");

if(typeof content === 'string') content = [[module.id, content, '']];

var transform;
var insertInto;



var options = {"sourceMap":true,"hmr":true}

options.transform = transform
options.insertInto = undefined;

var update = require("!../../node_modules/style-loader/lib/addStyles.js")(content, options);

if(content.locals) module.exports = content.locals;

if(module.hot) {
	module.hot.accept("!!../../node_modules/css-loader/index.js??ref--5-1!./button.css", function() {
		var newContent = require("!!../../node_modules/css-loader/index.js??ref--5-1!./button.css");

		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];

		var locals = (function(a, b) {
			var key, idx = 0;

			for(key in a) {
				if(!b || a[key] !== b[key]) return false;
				idx++;
			}

			for(key in b) idx--;

			return idx === 0;
		}(content.locals, newContent.locals));

		if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');

		update(newContent);
	});

	module.hot.dispose(function() { update(); });
}

Whereas I'd expect to see the original CSS source, not the JavaScript used to load it.

[alexander-akait]

@jayandcatchfire problem still exists? If yep please create minimum reproducible test repo

[hexpunk]

I made a minimally reproducible repo. It was mentioned in the original description.

https://github.com/JayAndCatchFire/css-loader-sourcemap-example

I can update the deps and see if it still happens in the next couple of days.

[hexpunk]

@evilebottnawi I just updated it with the latest dependencies. This issue is still present.

[alexander-akait]

@jayandcatchfire can you try #760?

[hexpunk]

I'll give it a try shortly.

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!