Merge branch 'master' of https://github.com/geowarin/friendly-errors-…

…webpack-plugin

.babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  "only": ["test/"],
+  "plugins": ["@babel/plugin-transform-async-to-generator"]
+}

README.md

@@ -120,11 +120,11 @@ The plugin has no native support for desktop notifications but it is easy
 to add them thanks to [node-notifier](https://www.npmjs.com/package/node-notifier) for instance.
 
 ```js
-var NotifierPlugin = require('friendly-errors-webpack-plugin');
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 var notifier = require('node-notifier');
 var ICON = path.join(__dirname, 'icon.png');
 
-new NotifierPlugin({
+new FriendlyErrorsPlugin({
     onErrors: (severity, errors) => {
       if (severity !== 'error') {
         return;
@@ -138,7 +138,6 @@ new NotifierPlugin({
       });
     }
   })
-]
 ```
 
 ## API

_sandbox/webpack.config.js

@@ -19,7 +19,7 @@ module.exports = {
       },
       {
         test: /\.jsx?$/,
-        loader: 'babel-loader',
+        loader: require.resolve('babel-loader-7'),
         query: {
           presets: ['react'],
         },

index.js

@@ -1,4 +1,5 @@
 
 const FriendlyErrorsWebpackPlugin = require('./src/friendly-errors-plugin');
 
-module.exports = FriendlyErrorsWebpackPlugin;
+module.exports = FriendlyErrorsWebpackPlugin;
+module.exports.default = FriendlyErrorsWebpackPlugin;

package.json

@@ -28,24 +28,38 @@
     "url": "https://github.com/sodatea/friendly-errors-webpack-plugin/issues"
   },
   "license": "MIT",
+  "jest": {
+    "testEnvironment": "node",
+    "transformIgnorePatterns": [
+      "node_modules",
+      "src",
+      "index.js"
+    ]
+  },
   "peerDependencies": {
-    "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
+    "webpack": "^4.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.23.1",
+    "@babel/core": "^7.5.4",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "autoprefixer": "^9.6.0",
+    "babel-core": "6.26.3",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.1.4",
     "babel-preset-react": "^6.23.0",
+    "babel-loader-7": "npm:[email protected]",
+    "babel-loader": "^8.0.6",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
     "eslint-7": "npm:eslint@^7.14.0",
     "eslint-loader": "^2.1.2",
     "eslint-plugin-node": "^9.0.1",
     "eslint-webpack-plugin": "^2.4.0",
+    "expect": "^24.8.0",
     "jest": "^24.8.0",
     "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
     "sass": "^1.20.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",

src/friendly-errors-plugin.js

@@ -142,7 +142,19 @@ function extractErrorsFromStats(stats, type) {
     // compilers depend on the same module.
     return uniqueBy(errors, error => error.message);
   }
-  return stats.compilation[type];
+
+  const findErrorsRecursive = (compilation) => {
+    const errors = compilation[type];
+    if (errors.length === 0 && compilation.children) {
+      for (const child of compilation.children) {
+        errors.push(...findErrorsRecursive(child));
+      }
+    }
+
+    return uniqueBy(errors, error => error.message);
+  };
+
+  return findErrorsRecursive(stats.compilation);
 }
 
 function isMultiStats(stats) {

src/transformers/babelSyntax.js

@@ -18,8 +18,8 @@ function cleanMessage(message) {
     .replace(/^Module build failed.*:\s/, 'Syntax Error: ')
     // remove mini-css-extract-plugin loader tracing errors
     .replace(/^Syntax Error: ModuleBuildError:.*:\s/, '')
-    // remove babel extra wording
-    .replace('SyntaxError: ', '');
+    // remove babel extra wording and path
+    .replace(/^Syntax Error: SyntaxError: (([A-Z]:)?\/.*:\s)?/, 'Syntax Error: ');
 }
 
 function isBabelSyntaxError(e) {

test/fixtures/babel-syntax-babel-6/.babelrc

@@ -0,0 +1 @@
+{}

test/fixtures/babel-syntax/webpack.config.js → test/fixtures/babel-syntax-babel-6/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: require.resolve('babel-loader-7'),
       }
     ]
   },

test/fixtures/babel-syntax-babel-7/.babelrc

@@ -0,0 +1 @@
+{}

test/fixtures/babel-syntax-babel-7/index.js

@@ -0,0 +1,7 @@
+
+class MyComponent extends React.Component {
+
+  render() {
+    return <div>
+  }
+}

test/fixtures/babel-syntax-babel-7/webpack.config.js

@@ -0,0 +1,22 @@
+const FriendlyErrorsWebpackPlugin = require('../../../index');
+
+module.exports = {
+  mode: 'development',
+  entry: __dirname + "/index.js",
+  output: {
+    path: __dirname + "/dist",
+    filename: "bundle.js"
+  },
+  plugins: [
+    new FriendlyErrorsWebpackPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: require.resolve('babel-loader'),
+      }
+    ]
+  },
+};

test/fixtures/eslint-warnings/webpack.config.js

@@ -22,7 +22,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: require.resolve('babel-loader-7'),
       }
     ]
   },

test/fixtures/multi-postcss-warnings/index.css

@@ -0,0 +1,4 @@
+body {
+	display: grid;
+	grid-gap: 1px;
+}

test/fixtures/multi-postcss-warnings/index2.css

@@ -0,0 +1,4 @@
+body {
+	display: grid;
+	grid-auto-flow: row;
+}

test/fixtures/multi-postcss-warnings/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      grid: true,
+    }
+  }
+};

test/fixtures/multi-postcss-warnings/webpack.config.js

@@ -0,0 +1,41 @@
+// postcss-loader warnings test (multi-compiler version)
+const FriendlyErrorsWebpackPlugin = require('../../../index');
+
+const COMMON_CONFIG = {
+  mode: 'production',
+  output: {
+    path: __dirname + '/dist',
+  },
+  plugins: [
+    new FriendlyErrorsWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: __dirname + '/postcss.config.js'
+              }
+            },
+          },
+        ],
+      }
+    ]
+  },
+};
+
+module.exports = [
+  Object.assign({}, { entry: __dirname + '/index.css' }, COMMON_CONFIG),
+  Object.assign({}, { entry: __dirname + '/index2.css' }, COMMON_CONFIG),
+];

test/fixtures/postcss-warnings/index.css

@@ -0,0 +1,4 @@
+body {
+	display: grid;
+	grid-gap: 1px;
+}

test/fixtures/postcss-warnings/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      grid: true,
+    }
+  }
+};

test/fixtures/postcss-warnings/webpack.config.js

@@ -0,0 +1,37 @@
+// postcss-loader warnings test
+const FriendlyErrorsWebpackPlugin = require('../../../index');
+
+module.exports = {
+  mode: 'production',
+  entry: __dirname + '/index.css',
+  output: {
+    path: __dirname + '/dist',
+  },
+  plugins: [
+    new FriendlyErrorsWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: {
+                path: __dirname + '/postcss.config.js'
+              }
+            },
+          },
+        ],
+      }
+    ]
+  },
+};

test/integration.spec.js

@@ -37,7 +37,7 @@ it('integration : success', async() => {
 
   const logs = await executeAndGetLogs('./fixtures/success/webpack.config')
 
-  expect(logs.join('\n')).toMatch(/DONE  Compiled successfully in (.\d*)ms/);
+  expect(logs.join('\n')).toMatch(/DONE {2}Compiled successfully in (.\d*)ms/);
 });
 
 it('integration : module-errors', async() => {
@@ -115,14 +115,34 @@ Use /* eslint-disable */ to ignore all warnings in a file.`
   )
 });
 
-it('integration : babel syntax error', async() => {
+it('integration : babel syntax error with babel-loader 7 (babel 6)', async() => {
 
-  const logs = await executeAndGetLogs('./fixtures/babel-syntax/webpack.config');
+  const logs = await executeAndGetLogs('./fixtures/babel-syntax-babel-6/webpack.config');
 
   expect(logs).toEqual([
     'ERROR  Failed to compile with 1 error',
     '',
-    'error  in ./test/fixtures/babel-syntax/index.js',
+    'error  in ./test/fixtures/babel-syntax-babel-6/index.js',
+    '',
+    `Syntax Error: Unexpected token (5:11)
+
+  3 |${' '}
+  4 |   render() {
+> 5 |     return <div>
+    |            ^
+  6 |   }
+  7 | }`,
+    ''
+  ]);
+});
+it('integration : babel syntax error with babel-loader 8 (babel 7)', async() => {
+
+  const logs = await executeAndGetLogs('./fixtures/babel-syntax-babel-7/webpack.config');
+
+  expect(logs).toEqual([
+    'ERROR  Failed to compile with 1 error',
+    '',
+    'error  in ./test/fixtures/babel-syntax-babel-7/index.js',
     '',
     `Syntax Error: Unexpected token (5:11)
 
@@ -159,7 +179,7 @@ it('integration : webpack multi compiler : success', async() => {
   let globalPlugins = [new FriendlyErrorsWebpackPlugin()];
   const logs = await executeAndGetLogs('./fixtures/multi-compiler-success/webpack.config', globalPlugins);
 
-  expect(logs.join('\n')).toMatch(/DONE  Compiled successfully in (.\d*)ms/)
+  expect(logs.join('\n')).toMatch(/DONE {2}Compiled successfully in (.\d*)ms/)
 });
 
 it('integration : webpack multi compiler : module-errors', async() => {
@@ -183,3 +203,44 @@ it('integration : webpack multi compiler : module-errors', async() => {
     '* ./non-existing in ./test/fixtures/multi-compiler-module-errors/index.js',
   ]);
 });
+
+it('integration : postcss-loader : warnings', async() => {
+
+  const logs = await executeAndGetLogs('./fixtures/postcss-warnings/webpack.config');
+  expect(logs).toEqual([
+    'WARNING  Compiled with 1 warning',
+    '',
+    'warning  in ./test/fixtures/postcss-warnings/index.css',
+    '',
+    `Module Warning (from ./node_modules/postcss-loader/src/index.js):
+Warning
+
+(3:2) grid-gap only works if grid-template(-areas) is being used`,
+    ''
+  ]);
+});
+
+it('integration : postcss-loader : warnings (multi-compiler version)', async() => {
+
+  const logs = await executeAndGetLogs('./fixtures/multi-postcss-warnings/webpack.config');
+  expect(logs).toEqual([
+    'WARNING  Compiled with 1 warning',
+    '',
+    'warning  in ./test/fixtures/multi-postcss-warnings/index.css',
+    '',
+    `Module Warning (from ./node_modules/postcss-loader/src/index.js):
+Warning
+
+(3:2) grid-gap only works if grid-template(-areas) is being used`,
+    '',
+    'WARNING  Compiled with 1 warning',
+    '',
+    'warning  in ./test/fixtures/multi-postcss-warnings/index2.css',
+    '',
+    `Module Warning (from ./node_modules/postcss-loader/src/index.js):
+Warning
+
+(3:2) grid-auto-flow works only if grid-template-rows and grid-template-columns are present in the same rule`,
+    ''
+  ]);
+});