fix: source map sources and file paths

README.md

@@ -294,6 +294,21 @@ They are not enabled by default because they expose a runtime overhead and incre
 }
 ```
 
+#### Opting out of legacy source maps behavior
+
+To receive source maps as URLs relative to `loader.resourcePath`, set the `legacySourceMaps` option to `false`.
+
+
+```javascript
+{
+  loader: 'css-loader',
+  options: {
+    legacySourceMaps: false,
+    sourceMap: true
+  }
+}
+```
+
 ### `camelCase`
 
 By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in JS), pass the query parameter `camelCase` to css-loader.

lib/loader.js

@@ -2,18 +2,39 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
+var path = require("path");
 var loaderUtils = require("loader-utils");
 var processCss = require("./processCss");
 var getImportPrefix = require("./getImportPrefix");
 var compileExports = require("./compile-exports");
 
+/**
+ * If the file was "renamed" (for the purposes of source maps), then honor it,
+ * otherwise just use the resourcePath.
+ * @param {String} resourcePath - The absolute file system path for the sass file.
+ * @param {Object|null} map - An existing source map, if any.
+ * @return {String} - The effective path to use for the `from` argument.
+ */
+function processFrom(resourcePath, map) {
+	var effectiveResourcePath;
+	if (map && map.file && typeof map.file === 'string' && path.dirname(map.file) === '.') {
+		// Something else has already changed the file name or extension, so
+		// honor it for the purpose of creating the next source map.
+		effectiveResourcePath = path.join(path.dirname(resourcePath), map.file);
+	} else {
+		effectiveResourcePath = resourcePath;
+	}
+	return effectiveResourcePath;
+}
 
 module.exports = function(content, map) {
 	var callback = this.async();
 	var query = loaderUtils.getOptions(this) || {};
 	var moduleMode = query.modules;
 	var camelCaseKeys = query.camelCase;
 	var sourceMap = query.sourceMap || false;
+	var processCssFrom;
+	var processCssTo;
 
 	if(sourceMap) {
 		if (map) {
@@ -33,10 +54,37 @@ module.exports = function(content, map) {
 		map = null;
 	}
 
+	if (query.legacySourceMaps !== false) {
+		processCssFrom = loaderUtils.getRemainingRequest(this).split("!").pop();
+		processCssTo = loaderUtils.getCurrentRequest(this).split("!").pop();
+	} else {
+
+		/**
+		 * > To ensure that PostCSS generates source maps and displays better syntax
+		 * > errors, runners must specify the from and to options. If your runner
+		 * > does not handle writing to disk (for example, a gulp transform), you
+		 * > should set both options to point to the same file
+		 * @see postcss [PostCSS Runner Guidelines]{@link https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#21-set-from-and-to-processing-options}
+		 *
+		 * `css-loader` isn't responsible for writing the map, so it doesn't have to
+		 * worry about updating the map with a transformation that changes locations
+		 * (suchs as map.file or map.sources).
+		 *
+		 * Changing the file extension counts as changing the location because it
+		 * changes the path.
+		 *
+		 * PostCSS's `from` and `to` arguments are only concerned with the file
+		 * system. They don't know about, care about, or understand the webpack
+		 * loader's current request or remaining request.
+		 */
+		processCssFrom = processFrom(this.resourcePath, map);
+		processCssTo = processCssFrom;
+	}
+
 	processCss(content, map, {
 		mode: moduleMode ? "local" : "global",
-		from: loaderUtils.getRemainingRequest(this).split("!").pop(),
-		to: loaderUtils.getCurrentRequest(this).split("!").pop(),
+		from: processCssFrom,
+		to: processCssTo,
 		query: query,
 		loaderContext: this,
 		sourceMap: sourceMap
@@ -112,13 +160,15 @@ module.exports = function(content, map) {
 		if(sourceMap && result.map) {
 			// add a SourceMap
 			map = result.map;
-			if(map.sources) {
-				map.sources = map.sources.map(function(source) {
-					return source.split("!").pop().replace(/\\/g, '/');
-				}, this);
-				map.sourceRoot = "";
+			if (query.legacySourceMaps !== false) {
+				if(map.sources) {
+					map.sources = map.sources.map(function(source) {
+						return source.split("!").pop().replace(/\\/g, '/');
+					}, this);
+					map.sourceRoot = "";
+				}
+				map.file = map.file.split("!").pop().replace(/\\/g, '/');
 			}
-			map.file = map.file.split("!").pop().replace(/\\/g, '/');
 			map = JSON.stringify(map);
 			moduleJs = "exports.push([module.id, " + cssAsString + ", \"\", " + map + "]);";
 		} else {

lib/processCss.js

@@ -179,9 +179,16 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 		parserPlugin(parserOptions)
 	]);
 
-	pipeline.process(inputSource, {
+	var postCssFrom;
+	if (options.query.legacySourceMaps !== false) {
 		// we need a prefix to avoid path rewriting of PostCSS
-		from: "/css-loader!" + options.from,
+		postCssFrom = "/css-loader!" + options.from;
+	} else {
+		postCssFrom = options.from;
+	}
+
+	pipeline.process(inputSource, {
+		from: postCssFrom,
 		to: options.to,
 		map: options.sourceMap ? {
 			prev: inputMap,