Merge pull request #90 from weilinzung/mini-css-extra-test

New updates with Webpack 4 & Add mini-css-extract-plugin test

Author: christophehurpeau

package.json

@@ -33,22 +33,28 @@
   },
   "devDependencies": {
     "babel-core": "^6.23.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.3.0",
-    "babel-plugin-transform-async-to-generator": "^6.22.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
     "babel-preset-react": "^6.23.0",
+    "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-node": "^9.0.0",
-    "expect": "^1.20.2",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-node": "^9.0.1",
+    "expect": "^24.8.0",
     "jest": "^18.1.0",
     "memory-fs": "^0.4.1",
-    "webpack": "^2.2.1"
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "sass": "^1.20.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.31.0"
   },
   "dependencies": {
     "chalk": "^2.4.2",
-    "error-stack-parser": "^2.0.0",
+    "error-stack-parser": "^2.0.2",
     "string-width": "^2.0.0",
-    "strip-ansi": "^3"
+    "strip-ansi": "^5"
   }
 }

src/transformers/babelSyntax.js

@@ -11,15 +11,19 @@ function cleanStackTrace(message) {
 
 function cleanMessage(message) {
   return message
-  // match until the last semicolon followed by a space
-  // this should match
-  // linux => "(SyntaxError: )Unexpected token (5:11)"
-  // windows => "(SyntaxError: C:/projects/index.js: )Unexpected token (5:11)"
-    .replace(/^Module build failed.*:\s/, 'Syntax Error: ');
+    // match until the last semicolon followed by a space
+    // this should match
+    // linux => "(SyntaxError: )Unexpected token (5:11)"
+    // windows => "(SyntaxError: C:/projects/index.js: )Unexpected token (5:11)"
+    .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: ', '');
 }
 
 function isBabelSyntaxError(e) {
-  return e.name === 'ModuleBuildError' &&
+  return e.name === 'ModuleBuildError' || e.name === 'ModuleBuildError' &&
     e.message.indexOf('SyntaxError') >= 0;
 }
 
@@ -35,4 +39,4 @@ function transform(error) {
   return error;
 }
 
-module.exports = transform;
+module.exports = transform;

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

@@ -1,6 +1,7 @@
 const FriendlyErrorsWebpackPlugin = require('../../../index');
 
 module.exports = {
+  mode: 'development',
   entry: __dirname + "/index.js",
   output: {
     path: __dirname + "/dist",
@@ -10,12 +11,12 @@ module.exports = {
     new FriendlyErrorsWebpackPlugin()
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-	loader: 'babel-loader',
-        exclude: /node_modules/
+        exclude: /node_modules/,
+        loader: 'babel-loader',
       }
     ]
-  }
+  },
 };

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

@@ -1,6 +1,7 @@
 const FriendlyErrorsWebpackPlugin = require('../../../index');
 
 module.exports = {
+  mode: 'development',
   entry: __dirname + "/index.js",
   output: {
     path: __dirname + "/dist",
@@ -11,18 +12,18 @@ module.exports = {
 
   ],
   module: {
-    loaders: [
+    rules: [
       {
-        test: /\.js$/,
-	loader: 'eslint-loader',
         enforce: 'pre',
-        include: __dirname
+        test: /\.js$/,
+        loader: 'eslint-loader',
+        include: __dirname,
       },
       {
         test: /\.jsx?$/,
-	loader: 'babel-loader',
-        exclude: /node_modules/
+        exclude: /node_modules/,
+        loader: 'babel-loader',
       }
     ]
-  }
+  },
 };

test/fixtures/mini-css-extract-babel-syntax/index.scss

@@ -0,0 +1,11 @@
+body {
+	color: red;
+
+	.container {
+		margin-top: 100px
+
+		.test {
+			vertical-align: middle;
+		}
+	}
+}

test/fixtures/mini-css-extract-babel-syntax/webpack.config.js

@@ -0,0 +1,36 @@
+// mini-css-extract-plugin test
+const FriendlyErrorsWebpackPlugin = require('../../../index');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: __dirname + "/index.scss",
+  output: {
+    path: __dirname + "/dist",
+  },
+  plugins: [
+    new FriendlyErrorsWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(s*)css$/,
+        exclude: /node_modules/,
+        use: [
+           MiniCssExtractPlugin.loader,
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+            }
+          },
+        ],
+      }
+    ]
+  },
+};

test/fixtures/multi-compiler-success/webpack.config.js

@@ -1,12 +1,14 @@
 module.exports = [
     {
+      mode: 'development',
       entry: __dirname + "/index.js",
       output: {
         path: __dirname + "/dist",
         filename: "bundle.js"
       }
     },
     {
+      mode: 'development',
       entry: __dirname + "/index2.js",
       output: {
         path: __dirname + "/dist",

test/fixtures/success/webpack.config.js

@@ -1,6 +1,7 @@
 const FriendlyErrorsWebpackPlugin = require('../../../index');
 
 module.exports = {
+  mode: 'development',
   entry: __dirname + "/index.js",
   output: {
     path: __dirname + "/dist",

test/integration.spec.js

@@ -56,8 +56,8 @@ it('integration : module-errors', async() => {
     '',
     'These relative modules were not found:',
     '',
-    '* ./non-existing in ./test/fixtures/module-errors/index.js',
     '* ../non-existing in ./test/fixtures/module-errors/index.js',
+    '* ./non-existing in ./test/fixtures/module-errors/index.js',
   ]);
 });
 
@@ -72,12 +72,16 @@ it('integration : should display eslint warnings', async() => {
   expect(logs.join('\n')).toEqual(
     `WARNING  Compiled with 2 warnings
 
+Module Warning (from ./node_modules/eslint-loader/index.js):
+
 ${filename('fixtures/eslint-warnings/index.js')}
   3:7  warning  'unused' is assigned a value but never used   no-unused-vars
   4:7  warning  'unused2' is assigned a value but never used  no-unused-vars
 
 ✖ 2 problems (0 errors, 2 warnings)
 
+Module Warning (from ./node_modules/eslint-loader/index.js):
+
 ${filename('fixtures/eslint-warnings/module.js')}
   1:7  warning  'unused' is assigned a value but never used  no-unused-vars
 
@@ -110,6 +114,23 @@ it('integration : babel syntax error', async() => {
   ]);
 });
 
+it('integration : mini CSS extract plugin babel error', async() => {
+
+  const logs = await executeAndGetLogs('./fixtures/mini-css-extract-babel-syntax/webpack.config');
+  const clean_logs = logs.toString().replace(/\"/g, ""); //<- double quotes issue with slash
+  expect(clean_logs).toEqual(
+    `ERROR  Failed to compile with 1 errors,,error  in ./test/fixtures/mini-css-extract-babel-syntax/index.scss,,.test {
+  ^
+      Expected digit.
+  ╷
+7 │         .test {
+  │          ^
+  ╵
+  stdin 7:4  root stylesheet
+      in ${filename('fixtures/mini-css-extract-babel-syntax/index.scss')} (line 7, column 4),`
+  );
+});
+
 it('integration : webpack multi compiler : success', async() => {
 
   // We apply the plugin directly to the compiler when targeting multi-compiler

test/unit/plugin/friendlyErrors.spec.js

@@ -1,7 +1,6 @@
 const expect = require('expect');
 const EventEmitter = require('events');
-const Stats = require('webpack/lib/Stats');
-const MultiStats = require('webpack/lib/MultiStats');
+const Stats = require('webpack/lib/Stats')
 const Module = require('webpack/lib/Module');
 EventEmitter.prototype.plugin = EventEmitter.prototype.on;
 
@@ -52,53 +51,13 @@ it('friendlyErrors : clearConsole option', () => {
   expect(plugin.shouldClearConsole).toBeFalsy()
 });
 
-
-describe('friendlyErrors : multicompiler', () => {
-  it('supplies the correct max compile time across multiple stats', () => {
-    const stats1 = successfulCompilationStats({ startTime: 0, endTime: 1000 });
-    const stats2 = successfulCompilationStats({ startTime: 2, endTime: 2002 });
-    const multistats = new MultiStats([stats1, stats2]);
-
-    const logs = output.captureLogs(() => {
-      mockCompiler.emit('done', multistats);
-    });
-
-    expect(logs).toEqual([
-      'DONE  Compiled successfully in 2000ms',
-      ''
-    ]);
-  });
-
-  it('supplies the correct recompile time with rebuild', () => {
-    // Test that rebuilds do not use the prior "max" value when recompiling just one stats object.
-    // This ensures the user does not get incorrect build times in watch mode.
-    const stats1 = successfulCompilationStats({ startTime: 0, endTime: 1000 });
-    const stats2 = successfulCompilationStats({ startTime: 0, endTime: 500 });
-    const stats2Rebuild = successfulCompilationStats({ startTime: 1020, endTime: 1050 });
-
-    const multistats = new MultiStats([stats1, stats2]);
-    const multistatsRecompile = new MultiStats([stats1, stats2Rebuild]);
-
-    const logs = output.captureLogs(() => {
-      mockCompiler.emit('done', multistats);
-      mockCompiler.emit('done', multistatsRecompile);
-    });
-
-    expect(logs).toEqual([
-      'DONE  Compiled successfully in 1000ms',
-      '',
-      'DONE  Compiled successfully in 30ms',
-      ''
-    ]);
-  });
-})
-
 function successfulCompilationStats(opts) {
   const options = Object.assign({ startTime: 0, endTime: 100 }, opts);
 
   const compilation = {
     errors: [],
-    warnings: []
+    warnings: [],
+    children: []
   };
   const stats = new Stats(compilation);
   stats.startTime = options.startTime;