feat: improve error message

webpack-contrib · Sep 23, 2020 · 52412f6 · 52412f6
1 parent 0f95841
commit 52412f6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/src/CssSyntaxError.js b/src/CssSyntaxError.js
@@ -2,7 +2,7 @@ export default class CssSyntaxError extends Error {
   constructor(error) {
     super(error);
 
-    const { reason, line, column } = error;
+    const { reason, line, column, file } = error;
 
     this.name = 'CssSyntaxError';
 
@@ -14,6 +14,7 @@ export default class CssSyntaxError extends Error {
       this.message += `(${line}:${column}) `;
     }
 
+    this.message += file ? `${file} ` : '<css input> ';
     this.message += `${reason}`;
 
     const code = error.showSourceCode();

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -131,7 +131,7 @@ Array [
   "ModuleBuildError: Module build failed (from \`replaced original path\`):
 CssSyntaxError
 
-(1:8) Unknown word
+(1:8) /test/fixtures/invisible-space.css Unknown word
 
 > 1 | a {    color: red;    }
     |        ^
@@ -146,7 +146,7 @@ Array [
   "ModuleBuildError: Module build failed (from \`replaced original path\`):
 CssSyntaxError
 
-(2:3) Unknown word
+(2:3) /test/fixtures/error.css Unknown word
 
   1 | .some {
 > 2 |   invalid css;

diff --git a/test/helpers/getErrors.js b/test/helpers/getErrors.js
@@ -1,5 +1,5 @@
 import normalizeErrors from './normalizeErrors';
 
-export default (stats, shortError) => {
-  return normalizeErrors(stats.compilation.errors, shortError).sort();
+export default (stats, shortError, type) => {
+  return normalizeErrors(stats.compilation.errors, shortError, type).sort();
 };
diff --git a/test/helpers/normalizeErrors.js b/test/helpers/normalizeErrors.js
@@ -27,14 +27,27 @@ function removeCWD(str) {
     .replace(new RegExp(cwd, 'g'), '');
 }
 
-export default (errors, shortError) => {
+export default (errors, shortError, type) => {
   return errors.map((error) => {
     let errorMessage = error.toString();
 
     if (shortError) {
       errorMessage = errorMessage.split('\n').slice(0, 2).join('\n');
     }
 
+    if (type === 'postcss') {
+      errorMessage = errorMessage
+        .split('\n')
+        .map((str) => {
+          if (/^\(/i.test(str)) {
+            return removeCWD(str);
+          }
+
+          return str;
+        })
+        .join('\n');
+    }
+
     return removeCWD(errorMessage.split('\n').slice(0, 12).join('\n'));
   });
 };
diff --git a/test/loader.test.js b/test/loader.test.js
@@ -132,7 +132,7 @@ describe('loader', () => {
       )
     ).toBe(true);
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
-    expect(getErrors(stats)).toMatchSnapshot('errors');
+    expect(getErrors(stats, false, 'postcss')).toMatchSnapshot('errors');
   });
 
   it('should reuse `ast` from "postcss-loader"', async () => {
@@ -360,7 +360,7 @@ describe('loader', () => {
     const stats = await compile(compiler);
 
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
-    expect(getErrors(stats)).toMatchSnapshot('errors');
+    expect(getErrors(stats, false, 'postcss')).toMatchSnapshot('errors');
   });
 
   it('should work with the "modules.auto" option and the "importLoaders" option', async () => {