Merge pull request webpack-contrib#319 from andreypopp/concise-error-message

Consistent format for syntax errors.

Author: sokra

lib/processCss.js

@@ -2,6 +2,7 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
+var formatCodeFrame = require("babel-code-frame");
 var Tokenizer = require("css-selector-tokenizer");
 var postcss = require("postcss");
 var loaderUtils = require("loader-utils");
@@ -208,6 +209,43 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 			urlItemRegExp: /___CSS_LOADER_URL___([0-9]+)___/
 		});
 	}).catch(function(err) {
-		callback(err);
+		if (err.name === 'CssSyntaxError') {
+			var wrappedError = new CSSLoaderError(
+				'Syntax Error',
+				err.reason,
+				err.line != null && err.column != null
+					? {line: err.line, column: err.column}
+					: null,
+				err.input.source
+			);
+			callback(wrappedError);
+		} else {
+			callback(err);
+		}
 	});
 };
+
+function formatMessage(message, loc, source) {
+	var formatted = message;
+	if (loc) {
+		formatted = formatted
+			+ ' (' + loc.line + ':' + loc.column + ')';
+	}
+	if (loc && source) {
+		formatted = formatted
+			+ '\n\n' + formatCodeFrame(source, loc.line, loc.column) + '\n';
+	}
+	return formatted;
+}
+
+function CSSLoaderError(name, message, loc, source, error) {
+	Error.call(this);
+	Error.captureStackTrace(this, CSSLoaderError);
+	this.name = name;
+	this.error = error;
+	this.message = formatMessage(message, loc, source);
+	this.hideStack = true;
+}
+
+CSSLoaderError.prototype = Object.create(Error.prototype);
+CSSLoaderError.prototype.constructor = CSSLoaderError;

package.json

@@ -7,11 +7,12 @@
     "node": ">=0.12.0"
   },
   "dependencies": {
+    "babel-code-frame": "^6.11.0",
     "css-selector-tokenizer": "^0.6.0",
     "cssnano": ">=2.6.1 <4",
     "loader-utils": "~0.2.2",
-    "object-assign": "^4.0.1",
     "lodash.camelcase": "^3.0.1",
+    "object-assign": "^4.0.1",
     "postcss": "^5.0.6",
     "postcss-modules-extract-imports": "^1.0.0",
     "postcss-modules-local-by-default": "^1.0.1",

test/helpers.js

@@ -69,6 +69,23 @@ exports.test = function test(name, input, result, query, modules) {
 	});
 };
 
+exports.testError = function test(name, input, onError) {
+	it(name, function(done) {
+    runLoader(cssLoader, input, undefined, {}, function(err, output) {
+      if (!err) {
+        done(new Error('Expected error to be thrown'));
+      } else {
+        try {
+          onError(err);
+        } catch (error) {
+          return done(error);
+        }
+        done();
+      }
+		});
+	});
+};
+
 exports.testWithMap = function test(name, input, map, result, query, modules) {
 	it(name, function(done) {
 		runLoader(cssLoader, input, map, {

test/simpleTest.js

@@ -1,6 +1,8 @@
 /*globals describe */
 
+var assert = require('assert');
 var test = require("./helpers").test;
+var testError = require("./helpers").testError;
 var testMinimize = require("./helpers").testMinimize;
 
 describe("simple", function() {
@@ -19,4 +21,15 @@ describe("simple", function() {
 	testMinimize("minimized simple", ".class { a: b c d; }", [
 		[1, ".class{a:b c d}", ""]
 	]);
+  testError("error formatting", ".some {\n invalid css;\n}", function(err) {
+    assert.equal(err.message, [
+      'Unknown word (2:2)',
+      '',
+      '  1 | .some {',
+      '> 2 |  invalid css;',
+      '    |  ^',
+      '  3 | }',
+      '',
+    ].join('\n'));
+  });
 });