fix: colored output

package.json

@@ -89,7 +89,7 @@
     "strip-ansi": "^6.0.0",
     "ts-jest": "^25.5.1",
     "typescript": "^3.9.7",
-    "webpack": "^5.0.0",
+    "webpack": "^5.1.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-dev-server": "3.10.3",
     "yeoman-test": "^2.7.0"

packages/webpack-cli/lib/utils/Compiler.js

@@ -1,3 +1,4 @@
+const { options: coloretteOptions } = require('colorette');
 const { packageExists } = require('./package-exists');
 const webpack = packageExists('webpack') ? require('webpack') : undefined;
 const logger = require('./logger');
@@ -85,9 +86,15 @@ class Compiler {
                 process.exitCode = 1;
             }
 
+            const getStatsOptions = (stats) => {
+                stats.colors = typeof stats.colors !== 'undefined' ? stats.colors : coloretteOptions.enabled;
+
+                return stats;
+            };
+
             const foundStats = this.compiler.compilers
-                ? { children: this.compiler.compilers.map((compiler) => compiler.options.stats) }
-                : this.compiler.options.stats;
+                ? { children: this.compiler.compilers.map((compiler) => getStatsOptions(compiler.options.stats)) }
+                : getStatsOptions(this.compiler.options.stats);
 
             if (outputOptions.json === true) {
                 process.stdout.write(JSON.stringify(stats.toJson(foundStats), null, 2) + '\n');

test/colors/colors-false.webpack.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    stats: {
+        colors: false,
+    },
+};

test/colors/colors-true.webpack.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    stats: {
+        colors: true,
+    },
+};

test/colors/colors.test.js

@@ -0,0 +1,63 @@
+'use strict';
+const { run } = require('../utils/test-utils');
+const { resolve } = require('path');
+const { options: coloretteOptions } = require('colorette');
+
+describe('colorts', () => {
+    it('should output by default', () => {
+        const { stderr, stdout, exitCode } = run(__dirname);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from flags', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, ['--stats=verbose']);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from the configuration', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, [`--config=${resolve(__dirname, './stats-string.webpack.config.js')}`]);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from the configuration #1', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, [`--config=${resolve(__dirname, './stats-boolean.webpack.config.js')}`]);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from the configuration #2', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, [`--config=${resolve(__dirname, './no-stats.webpack.config.js')}`]);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from the configuration #3', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, [`--config=${resolve(__dirname, './colors-true.webpack.config.js')}`]);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).toContain(coloretteOptions.enabled ? '\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m' : 'successfully');
+        expect(exitCode).toBe(0);
+    });
+
+    it('should work with the "stats" option from the configuration #4', () => {
+        const { stderr, stdout, exitCode } = run(__dirname, [`--config=${resolve(__dirname, './colors-false.webpack.config.js')}`]);
+
+        expect(stderr).toBeFalsy();
+        expect(stdout).not.toContain('\u001b[1m\u001b[32msuccessfully\u001b[39m\u001b[22m');
+        expect(stdout).toContain('successfully');
+        expect(exitCode).toBe(0);
+    });
+});

test/colors/no-stats.webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    name: 'test',
+};

test/colors/src/index.js

@@ -0,0 +1,3 @@
+const foo = 'bar';
+
+export default foo

test/colors/stats-boolean.webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    stats: true,
+};

test/colors/stats-string.webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    stats: 'verbose',
+};

yarn.lock

@@ -11681,10 +11681,10 @@ webpack-sources@^2.0.1:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0.tgz#c028b2f0c1db2322de1f4a30cc36f6e373d5a26a"
-  integrity sha512-OK+Q9xGgda3idw/DgCf75XsVFxRLPu48qPwygqI3W9ls5sDdKif5Ay4SM/1UVob0w4juJy14Zv9nNv0WeyV0aA==
+webpack@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.1.0.tgz#7ba2fc8f587ecf0a412477d2e977b3a8818db83c"
+  integrity sha512-ZJDq7dpVs479C6zCSF/CwOVsqqobjCusa+BgbXCEROZMS0RcBzQzDgc+hB2YXye8Y/JOvcFwJIqsVtTyHW7t8A==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.45"