fix: support disabling of color output when not in TTY (#557)

* fix: support disabling of color output when not in TTY

* chore: color build steps

* test: override process tty

Author: iamogbz

.travis.yml

@@ -11,10 +11,10 @@ jobs:
         - npm test -- --ci --coverage
         - npm run coveralls
     - name: build
-      script: make build
+      script: npm run build
     - stage: commitlint
       script: npm run commitlint
       if: commit_message !~ /^chore\(deps/
     - stage: deploy
-      script: make build && npm run release
+      script: npm run build && npm run release
       if: branch = master

Makefile

@@ -20,14 +20,6 @@ typescript:
 	@git reset master --soft && git add --all && git commit -m "chore: typescript"
 	@echo "typescript: branch created, merge to master to complete coversion"
 
-clean:
-	rm -rf ./lib
-	rm -rf ./built
-
-build: clean
-	npm run build-types
-	npm run build
-
 ifndef VERBOSE
 .SILENT:
 endif

package.json

@@ -26,6 +26,7 @@
     "types": "index.d.ts",
     "scripts": {
         "lint": "eslint ./src ./tests --ext .js,.ts",
+        "clean": "rm -rf ./lib && rm -rf ./build",
         "commitlint": "commitlint-travis",
         "build": "webpack --mode=production",
         "build-watch": "webpack --mode=development --watch",

src/constants.ts

@@ -1,27 +1,26 @@
 import { Stage } from "./types";
-
-const stageMessage = (m: TemplateStringsArray) => (m ? `\n${String(m)}` : "");
+import { style, styles } from "./terminal";
 
 export const defaultStageMessages: Record<
     Stage,
     { enter?: string; exit?: string }
 > = {
     buildEnd: {
-        enter: stageMessage`🌇 Build exiting 🌇`,
+        enter: "👋 build exiting",
     },
     buildError: {
-        enter: stageMessage`🚒 Build failed 🚒`,
+        enter: style("🚒 build failed", styles.colors.red, true),
     },
     buildStart: {
-        enter: stageMessage`🌅 Build starting 🌅`,
+        enter: style("🚀 build starting", styles.colors.blue, true),
     },
     compileEnd: {
-        enter: stageMessage`⌛ Code compiled ⌛`,
+        enter: style("⌛ code compiled", styles.colors.green, true),
     },
     compileStart: {
-        enter: stageMessage`⏳ Code compiling ⏳`,
+        enter: style("⏳ code compiling", styles.colors.blue, true),
     },
     interrupt: {
-        enter: stageMessage`🚧 Build interrupted 🚧`,
+        enter: style("🚧 build interrupted", styles.colors.yellow, true),
     },
 };

src/index.ts

@@ -3,6 +3,7 @@ import { Compiler } from "webpack";
 import { logger } from "./logger";
 import { defaultStageMessages } from "./constants";
 import { Options, Stage, StageListeners } from "./types";
+import { stageMessage } from "./terminal";
 
 const defaultListeners: Partial<StageListeners> = {
     buildError: (e: Error) => {
@@ -44,9 +45,11 @@ export class WebpackCompilerPlugin {
                     ? listener
                     : defaultListeners[stage];
             validOptions.listeners[stage] = async (...args) => {
-                enterMessage && logger.info(enterMessage);
+                enterMessage &&
+                    logger.info(stageMessage(options.name, enterMessage));
                 validListener && validListener(...args);
-                exitMessage && logger.info(exitMessage);
+                exitMessage &&
+                    logger.info(stageMessage(options.name, exitMessage));
             };
         }
         return validOptions;

src/terminal.ts

@@ -0,0 +1,24 @@
+const supportsColor = () =>
+    process.stdout.isTTY &&
+    !(process.env.ANSI_COLORS_DISABLED || process.env.NO_COLOR);
+
+export const style = (
+    text: string,
+    [a, b]: [number, number],
+    force?: boolean,
+) => (supportsColor() || force ? `\x1b[${a}m${text}\x1b[${b}m` : text);
+
+export const styles: Record<string, Record<string, [number, number]>> = {
+    attrs: {
+        bold: [1, 22],
+    },
+    colors: {
+        blue: [34, 39],
+        green: [32, 39],
+        red: [31, 39],
+        yellow: [33, 39],
+    },
+};
+
+export const stageMessage = (name: string, message: string) =>
+    `\n${style(`${name}:`, styles.attrs.bold)} ${message}`;

tests/__snapshots__/index.test.ts.snap

@@ -12,7 +12,7 @@ exports[`default listeners loads with default buildError listener: console log 1
 Array [
   Array [
     "
-🚒 Build failed 🚒",
+[1mwebpack-compiler-plugin:[22m [31m🚒 build failed[39m",
   ],
 ]
 `;
@@ -31,7 +31,7 @@ exports[`default listeners loads with default interrupt listener: console log 1`
 Array [
   Array [
     "
-🚧 Build interrupted 🚧",
+[1mwebpack-compiler-plugin:[22m [33m🚧 build interrupted[39m",
   ],
 ]
 `;
@@ -54,7 +54,7 @@ exports[`stage messages uses default state messages buildStart 1`] = `
 Array [
   Array [
     "
-🌅 Build starting 🌅",
+webpack-compiler-plugin: [34m🚀 build starting[39m",
   ],
 ]
 `;
@@ -63,7 +63,7 @@ exports[`stage messages uses default state messages compileEnd 1`] = `
 Array [
   Array [
     "
-⌛ Code compiled ⌛",
+webpack-compiler-plugin: [32m⌛ code compiled[39m",
   ],
 ]
 `;
@@ -72,7 +72,7 @@ exports[`stage messages uses default state messages compileStart 1`] = `
 Array [
   Array [
     "
-⏳ Code compiling ⏳",
+webpack-compiler-plugin: [34m⏳ code compiling[39m",
   ],
 ]
 `;

tests/index.test.ts

@@ -42,6 +42,14 @@ afterEach(() => {
 afterAll(jest.restoreAllMocks);
 
 describe("default listeners", () => {
+    const isTTY = process.stdout.isTTY;
+    beforeAll(() => {
+        process.stdout.isTTY = true;
+    });
+    afterAll(() => {
+        process.stdout.isTTY = isTTY;
+    });
+
     it.each([
         ["interrupt", ["SIGINT"]],
         ["buildError", ["uncaughtException", new Error("Uncaught Error")]],
@@ -87,6 +95,13 @@ describe("apply listeners", () => {
 });
 
 describe("stage messages", () => {
+    beforeAll(() => {
+        process.env.NO_COLOR = "true";
+    });
+    afterAll(() => {
+        delete process.env.NO_COLOR;
+    });
+
     it.each([
         ["buildStart", mockCompiler.hooks.afterPlugins.tap],
         ["compileEnd", mockCompiler.hooks.done.tap],

webpack.config.ts

@@ -1,6 +1,8 @@
+import { execSync } from "child_process";
 import * as path from "path";
 import { Configuration } from "webpack";
 import * as CopyPlugin from "copy-webpack-plugin";
+import { WebpackCompilerPlugin } from "./src";
 
 const outputPath = path.resolve(__dirname, "lib");
 const configuration: Configuration = {
@@ -31,6 +33,20 @@ const configuration: Configuration = {
         path: outputPath,
     },
     plugins: [
+        new WebpackCompilerPlugin({
+            name: "compiler",
+            listeners: {
+                buildStart: () => execSync("npm run clean"),
+                compileStart: () => execSync("npm run build-types"),
+            },
+            stageMessages: {
+                buildStart: { enter: "clean ouput path" },
+                compileStart: {
+                    enter: "building types: started",
+                    exit: "building types: finished",
+                },
+            },
+        }),
         new CopyPlugin({
             patterns: [
                 "package.json",
@@ -45,6 +61,9 @@ const configuration: Configuration = {
         modules: [path.resolve("./src"), path.resolve("./node_modules")],
     },
     target: "node",
+    watchOptions: {
+        ignored: ["./node_modules/**", "./tests/**", "./built/**", outputPath],
+    },
 };
 
 export default configuration;