Repository: webpack-contrib/css-loader
Pull request #1194 (2020-09-23 14:43:59)

Refactor: postcss error message
<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [ ] **bugfix**
- [ ] new **feature**
- [x] **code refactor**
- [ ] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

Adds the file path to the error message

### Breaking Changes

No

### Additional Info

No

codecov[bot]: # [Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=h1) Report
> Merging [#1194](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=desc) into [master](https://codecov.io/gh/webpack-contrib/css-loader/commit/df111b88b062d7062adcdafde44e93d2ed1c77ec?el=desc) will **decrease** coverage by `0.14%`.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194/graphs/tree.svg?width=650&height=150&src=pr&token=DlN3OQ0JnO)](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master    #1194      +/-   ##
==========================================
- Coverage   99.24%   99.10%   -0.15%     
==========================================
  Files          10       10              
  Lines         666      671       +5     
  Branches      212      214       +2     
==========================================
+ Hits          661      665       +4     
- Misses          5        6       +1     
```


| [Impacted Files](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/CssSyntaxError.js](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194/diff?src=pr&el=tree#diff-c3JjL0Nzc1N5bnRheEVycm9yLmpz) | `100.00% <100.00%> (ø)` | |
| [src/utils.js](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194/diff?src=pr&el=tree#diff-c3JjL3V0aWxzLmpz) | `98.03% <0.00%> (-0.31%)` | :arrow_down: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=footer). Last update [df111b8...3e89059](https://codecov.io/gh/webpack-contrib/css-loader/pull/1194?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/CssSyntaxError.js b/src/CssSyntaxError.js
index 95f80f8..e39eb82 100644
--- 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();


Test patch:
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
index 8b65221..9490502 100644
--- 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
index 03339e1..55ae008 100644
--- 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
index 56fabce..c844eb9 100644
--- a/test/helpers/normalizeErrors.js
+++ b/test/helpers/normalizeErrors.js
@@ -27,7 +27,7 @@ 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();
 
@@ -35,6 +35,19 @@ export default (errors, 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
index d8c84f1..0195d0c 100644
--- 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 () => {