FormidableLabs · onigoetz · Jan 2, 2022 · Jan 4, 2022 · Jan 4, 2022
diff --git a/package.json b/package.json
@@ -55,10 +55,10 @@
     "check-ci": "yarn run lint && yarn run test-cov"
   },
   "dependencies": {
-    "chalk": "^4.1.0",
     "fp-ts": "^2.6.1",
     "io-ts": "^2.2.13",
     "io-ts-reporters": "^1.2.2",
+    "picocolors": "^1.0.0",
     "pify": "^5.0.0",
     "semver-compare": "^1.0.0",
     "yargs": "^16.2.0"
@@ -93,6 +93,7 @@
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
     "source-map-support": "^0.5.19",
+    "strip-ansi": "^6.0.1",
     "ts-node": "^9.1.1",
     "tslint": "^6.1.2",
     "typescript": "^4.1.3",

diff --git a/src/lib/actions/duplicates.ts b/src/lib/actions/duplicates.ts
@@ -1,4 +1,4 @@
-import * as chalk from "chalk";
+import * as colors from "picocolors";
 
 import { IActionModule, IModule, SYNTHETIC_SOURCE_TOKEN } from "../interfaces/modules";
 import { numF, sort } from "../util/strings";
@@ -208,7 +208,7 @@ class DuplicatesTemplate extends Template {
     return Promise.resolve()
       .then(() => this.action.getData() as Promise<IDuplicatesData>)
       .then(({ meta, assets }) => {
-        const dupAsset = (name: string) => chalk`{gray ## \`${name}\`}`;
+        const dupAsset = (name: string) => colors.gray(`## \`${name}\``);
         const dupFiles = (name: string) => Object.keys(assets[name].files)
           .map((baseName) => {
             const { files } = assets[name];
@@ -223,25 +223,25 @@ class DuplicatesTemplate extends Template {
               .map((sourceGroup, i) => this.trim(`
                 ${i}. (${inlineMeta(sourceGroup.meta)})
                   ${sourceGroup.modules
-                    .map((mod) => `(${mod.size.full}) ${chalk.gray(mod.fileName)}`)
+                    .map((mod) => `(${mod.size.full}) ${colors.gray(mod.fileName)}`)
                     .join("\n    ")}
               `, 14))
               .join("\n  ");
 
-            return this.trim(chalk`
-              * {green ${baseName}}
+            return this.trim(`
+              * ${colors.green(baseName)}
                 * Meta: ${inlineMeta(base.meta)}
                 ${sources}
             `, 14);
           })
           .join("\n");
         const duplicates = (name: string) => `${dupAsset(name)}\n${dupFiles(name)}\n`;
 
-        const report = this.trim(chalk`
-          {cyan inspectpack --action=duplicates}
-          {gray ===============================}
+        const report = this.trim(`
+          ${colors.cyan("inspectpack --action=duplicates")}
+          ${colors.gray("===============================")}
 
-          {gray ## Summary}
+          ${colors.gray("## Summary")}
           * Extra Files (unique):         ${numF(meta.extraFiles.num)}
           * Extra Sources (non-unique):   ${numF(meta.extraSources.num)}
           * Extra Bytes (non-unique):     ${numF(meta.extraSources.bytes)}

diff --git a/src/lib/actions/sizes.ts b/src/lib/actions/sizes.ts
@@ -1,4 +1,4 @@
-import * as chalk from "chalk";
+import * as colors from "picocolors";
 
 import { IActionModule } from "../interfaces/modules";
 import { numF, sort } from "../util/strings";
@@ -74,25 +74,25 @@ class SizesTemplate extends Template {
       .then(() => this.action.getData() as Promise<ISizesData>)
       .then(({ meta, assets }) => {
         const files = (mods: IActionModule[]) => mods
-          .map((obj) => this.trim(chalk`
-            * {gray ${obj.fileName}}
+          .map((obj) => this.trim(`
+            * ${colors.gray(obj.fileName)}
               * Size: ${numF(obj.size.full)}
           `, 12))
           .join("\n");
 
         const assetSizes = Object.keys(assets)
-          .map((name) => this.trim(chalk`
-            {gray ## \`${name}\`}
+          .map((name) => this.trim(`
+            ${colors.gray(`## \`${name}\``)}
             * Bytes: ${numF(assets[name].meta.full)}
             ${files(assets[name].files)}
           `, 12))
           .join("\n\n");
 
-        const report = this.trim(chalk`
-          {cyan inspectpack --action=sizes}
-          {gray ==========================}
+        const report = this.trim(`
+          ${colors.cyan("inspectpack --action=sizes")}
+          ${colors.gray("==========================")}
 
-          {gray ## Summary}
+          ${colors.gray("## Summary")}
           * Bytes: ${numF(meta.full)}
 
           ${assetSizes}

diff --git a/src/lib/actions/versions.ts b/src/lib/actions/versions.ts
@@ -1,4 +1,4 @@
-import * as chalk from "chalk";
+import * as colors from "picocolors";
 import { dirname, join, relative, sep } from "path";
 import semverCompare = require("semver-compare");
 
@@ -538,15 +538,15 @@ class VersionsTemplate extends Template {
     return Promise.resolve()
       .then(() => this.action.getData() as Promise<IVersionsData>)
       .then(({ meta, assets }) => {
-        const versAsset = (name: string) => chalk`{gray ## \`${name}\`}`;
+        const versAsset = (name: string) => colors.gray(`## \`${name}\``);
         const versPkgs = (name: string) => Object.keys(assets[name].packages)
           .sort(sort)
-          .map((pkgName) => this.trim(chalk`
-            * {cyan ${pkgName}}
+          .map((pkgName) => this.trim(`
+            * ${colors.cyan(pkgName)}
               ${Object.keys(assets[name].packages[pkgName])
                 .sort(semverCompare)
-                .map((version) => this.trim(chalk`
-                  * {gray ${version}}
+                .map((version) => this.trim(`
+                  * ${colors.gray(version)}
                     ${Object.keys(assets[name].packages[pkgName][version])
                       .sort(sort)
                       .map((filePath) => {
@@ -555,12 +555,12 @@ class VersionsTemplate extends Template {
                           modules,
                         } = assets[name].packages[pkgName][version][filePath];
 
-                        return this.trim(chalk`
-                        * {green ${shortPath(filePath)}}
+                        return this.trim(`
+                        * ${colors.green(shortPath(filePath))}
                           * Num deps: ${numF(skews.length)}, files: ${numF(modules.length)}
                           ${skews
                             .map((pkgParts) => pkgParts.map((part, i) => Object.assign({}, part, {
-                              name: chalk[i < pkgParts.length - 1 ? "gray" : "cyan"](part.name),
+                              name: colors[i < pkgParts.length - 1 ? "gray" : "cyan"](part.name),
                             })))
                             .map(pkgNamePath)
                             .sort(sort)
@@ -580,11 +580,11 @@ class VersionsTemplate extends Template {
           .join("\n");
         const versions = (name: string) => `${versAsset(name)}\n${versPkgs(name)}\n`;
 
-        const report = this.trim(chalk`
-          {cyan inspectpack --action=versions}
-          {gray =============================}
+        const report = this.trim(`
+          ${colors.cyan("inspectpack --action=versions")}
+          ${colors.gray("=============================")}
 
-          {gray ## Summary}
+          ${colors.gray("## Summary")}
           * Packages with skews:      ${numF(meta.packages.num)}
           * Total resolved versions:  ${numF(meta.resolved.num)}
           * Total installed packages: ${numF(meta.installed.num)}

diff --git a/src/lib/util/strings.ts b/src/lib/util/strings.ts
@@ -1,5 +1,5 @@
-import * as chalk from "chalk";
+import * as colors from "picocolors";
 
-export const numF = (val: string | number) => chalk.bold.cyan(val.toString());
+export const numF = (val: string | number) => colors.bold(colors.cyan(val.toString()));
 
 export const sort = (a: string, b: string) => a.localeCompare(b);
diff --git a/src/plugin/duplicates.ts b/src/plugin/duplicates.ts
@@ -1,4 +1,4 @@
-import * as chalk from "chalk";
+import * as colors from "picocolors";
 import semverCompare = require("semver-compare");
 import { actions } from "../lib";
 import { IDuplicatesData, IDuplicatesFiles } from "../lib/actions/duplicates";
@@ -52,10 +52,10 @@ interface IPackageNames {
 // ----------------------------------------------------------------------------
 // Helpers
 // ----------------------------------------------------------------------------
-const identical = (val: string) => chalk`{bold.magenta ${val}}`;
-const similar = (val: string) => chalk`{bold.blue ${val}}`;
-const warning = (val: string) => chalk`{bold.yellow ${val}}`;
-const error = (val: string) => chalk`{bold.red ${val}}`;
+const identical = (val: string) => colors.magenta(val);
+const similar = (val: string) => colors.blue(val);
+const warning = (val: string) => colors.yellow(val);
+const error = (val: string) => colors.red(val);
 
 // `~/different-foo/~/foo` + highlight last component.
 const shortPath = (filePath: string, pkgName: string) => {
@@ -64,7 +64,7 @@ const shortPath = (filePath: string, pkgName: string) => {
   // Color last part of package name.
   const lastPkgIdx = short.lastIndexOf(pkgName);
   if (lastPkgIdx > -1) {
-    short = chalk`${short.substring(0, lastPkgIdx)}{cyan ${pkgName}}`;
+    short = `${short.substring(0, lastPkgIdx)}${colors.cyan(pkgName)}`;
   }
 
   return short;
@@ -194,7 +194,7 @@ export const _getDuplicatesVersionsData = (
   if (extraSources !== foundSources) {
     addWarning(error(
       `Missing sources: Expected ${numF(extraSources)}, found ${numF(foundSources)}.\n` +
-      chalk`{white Found map:} {gray ${JSON.stringify(foundDupFilesMap)}}\n`,
+      `${colors.white("Found map:")} ${colors.gray(JSON.stringify(foundDupFilesMap))}\n`,
     ));
   }
 
@@ -249,12 +249,12 @@ export class DuplicatesPlugin {
     ])
       .then((datas) => {
         const [dupData, pkgDataOrig] = datas;
-        const header = chalk`{bold.underline Duplicate Sources / Packages}`;
+        const header = colors.bold(colors.underline("Duplicate Sources / Packages"));
 
         // No duplicates.
         if (dupData.meta.extraFiles.num === 0) {
           // tslint:disable no-console
-          console.log(chalk`\n${header} - {green No duplicates found. 🚀}\n`);
+          console.log(`\n${header} - ${colors.green("No duplicates found. 🚀")}\n`);
           return;
         }
 
@@ -266,11 +266,11 @@ export class DuplicatesPlugin {
 
         // Have duplicates. Report summary.
         // tslint:disable max-line-length
-        addMsg(chalk`${header} - ${fmt("Duplicates found! ⚠️")}
+        addMsg(`${header} - ${fmt("Duplicates found! ⚠️")}
 
-* {yellow.bold.underline Duplicates}: Found ${numF(dupData.meta.extraFiles.num)} ${similar("similar")} files across ${numF(dupData.meta.extraSources.num)} code sources (both ${identical("identical")} + similar)
+* ${colors.yellow(colors.bold(colors.underline("Duplicates")))}: Found ${numF(dupData.meta.extraFiles.num)} ${similar("similar")} files across ${numF(dupData.meta.extraSources.num)} code sources (both ${identical("identical")} + similar)
   accounting for ${numF(dupData.meta.extraSources.bytes)} bundled bytes.
-* {yellow.bold.underline Packages}: Found ${numF(pkgData.meta.packages.num)} packages with ${numF(pkgData.meta.resolved.num)} {underline resolved}, ${numF(pkgData.meta.installed.num)} {underline installed}, and ${numF(pkgData.meta.depended.num)} {underline depended} versions.
+* ${colors.yellow(colors.bold(colors.underline("Packages")))}: Found ${numF(pkgData.meta.packages.num)} packages with ${numF(pkgData.meta.resolved.num)} ${colors.underline("resolved")}, ${numF(pkgData.meta.installed.num)} ${colors.underline("installed")}, and ${numF(pkgData.meta.depended.num)} ${colors.underline("depended")} versions.
 `);
         // tslint:enable max-line-length
 
@@ -288,7 +288,7 @@ export class DuplicatesPlugin {
 
           // Only add asset name when duplicates.
           if (pkgNames.length) {
-            addMsg(chalk`{gray ## ${dupAssetName}}`);
+            addMsg(colors.gray(`## ${dupAssetName}`));
           }
 
           pkgNames.forEach((pkgName) => {
@@ -308,15 +308,15 @@ export class DuplicatesPlugin {
                 let installs = Object.keys(packages[pkgName][version]).map((installed) => {
                   const skews = packages[pkgName][version][installed].skews
                     .map((pkgParts) => pkgParts.map((part, i) => Object.assign({}, part, {
-                      name: chalk[i < pkgParts.length - 1 ? "gray" : "cyan"](part.name),
+                      name: colors[i < pkgParts.length - 1 ? "gray" : "cyan"](part.name),
                     })))
                     .map(pkgNamePath)
                     .sort(sort);
 
                   numPkgDepended += skews.length;
 
                   if (!verbose) {
-                    return chalk`  {green ${version}} {gray ${shortPath(installed, pkgName)}}
+                    return `  ${colors.green(version)} ${colors.gray(shortPath(installed, pkgName))}
     ${skews.join("\n    ")}`;
                   }
 
@@ -325,27 +325,27 @@ export class DuplicatesPlugin {
                     .filter(Boolean)
                     .map((mod) => {
                       const note = mod.isIdentical ? identical("I") : similar("S");
-                      return chalk`{gray ${mod.baseName}} (${note}, ${numF(mod.bytes)})`;
+                      return `${colors.gray(mod.baseName)} (${note}, ${numF(mod.bytes)})`;
                     });
 
-                  return chalk`    {gray ${shortPath(installed, pkgName)}}
-      {white * Dependency graph}
+                  return `    ${colors.gray(shortPath(installed, pkgName))}
+      ${colors.white("* Dependency graph")}
         ${skews.join("\n        ")}
-      {white * Duplicated files in }{gray ${dupAssetName}}
+      ${colors.white("* Duplicated files in ")}${colors.gray(dupAssetName)}
         ${duplicates.join("\n        ")}
 `;
                 });
 
                 if (verbose) {
-                  installs = [chalk`  {green ${version}}`].concat(installs);
+                  installs = [`  ${colors.green(version)}`].concat(installs);
                 }
 
                 return installs;
               })
               .reduce((m, a) => m.concat(a), []); // flatten.
 
             // tslint:disable-next-line max-line-length
-            addMsg(chalk`{cyan ${pkgName}} (Found ${numF(numPkgResolved)} {underline resolved}, ${numF(numPkgInstalled)} {underline installed}, ${numF(numPkgDepended)} {underline depended}. Latest {green ${latestVersion || "NONE"}}.)`);
+            addMsg(`${colors.cyan(pkgName)} (Found ${numF(numPkgResolved)} ${colors.underline("resolved")}, ${numF(numPkgInstalled)} ${colors.underline("installed")}, ${numF(numPkgDepended)} ${colors.underline("depended")}. Latest ${colors.green(latestVersion || "NONE")}.)`);
             versions.forEach(addMsg);
 
             if (!verbose) {
@@ -354,10 +354,10 @@ export class DuplicatesPlugin {
           });
         });
         // tslint:disable max-line-length
-        addMsg(chalk`
-* {gray.bold.underline Understanding the report}: Need help with the details? See:
+        addMsg(`
+* ${colors.gray(colors.bold(colors.underline("Understanding the report")))}: Need help with the details? See:
   https://github.com/FormidableLabs/inspectpack/#diagnosing-duplicates
-* {gray.bold.underline Fixing bundle duplicates}: An introductory guide:
+* ${colors.gray(colors.bold(colors.underline("Fixing bundle duplicates")))}: An introductory guide:
   https://github.com/FormidableLabs/inspectpack/#fixing-bundle-duplicates
 `.trimLeft());
         // tslint:enable max-line-length

diff --git a/test/bin/inspectpack.spec.ts b/test/bin/inspectpack.spec.ts
@@ -7,7 +7,7 @@ const SIMPLE_STATS = require.resolve("../fixtures/simple/dist-development-5/stat
 const DUP_ESM_STATS = require.resolve("../fixtures/duplicates-esm/dist-development-5/stats.json");
 
 const exec = (args: string[]) => execa("node", [IP_PATH].concat(args), {
-  env: { ...process.env, FORCE_COLOR: "0" }
+  env: { ...process.env, NO_COLOR: "true" }
 });
 
 describe("bin/inspectpack", () => {

diff --git a/test/fixtures/packages/check-bundle.js b/test/fixtures/packages/check-bundle.js
@@ -3,7 +3,7 @@
 const { stat } = require("fs");
 const { resolve, join } = require("path");
 
-const chalk = require("chalk");
+const colors = require("picocolors");
 const pify = require("pify");
 
 /**
@@ -26,7 +26,7 @@ if (!WEBPACK_VERSION) {
 
 const main = () => {
   const fixture = `${WEBPACK_CWD}/dist-${WEBPACK_MODE}-${WEBPACK_VERSION}/bundle.js`;
-  log(chalk `\n[{yellow.bold Checking fixture}] ${fixture}\n`);
+  log(`\n[${colors.yellow(colors.bold("Checking fixture"))}] ${fixture}\n`);
 
   const fixturePath = resolve(join(__dirname, ".."), fixture);
   return exists(fixturePath)
@@ -39,6 +39,6 @@ const main = () => {
 
 main()
   .catch((err) => {
-    log(chalk `\n[{red.bold Missing fixture}] ${err.message}\n`);
+    log(`\n[${colors.red(colors.bold("Missing fixture"))}] ${err.message}\n`);
     process.exit(1);
   });
diff --git a/test/fixtures/packages/webpack.js b/test/fixtures/packages/webpack.js
@@ -1,5 +1,5 @@
 const { dirname } = require("path");
-const chalk = require("chalk");
+const colors = require("picocolors");
 
 /**
  * Runtime switcher for all webpack versions.
@@ -12,7 +12,7 @@ if (!WEBPACK_VERSION) {
 }
 
 const fixture = `${WEBPACK_CWD}/dist-${WEBPACK_MODE}-${WEBPACK_VERSION}/bundle.js`;
-log(chalk `\n[{green.bold Building fixture}] ${fixture}\n`);
+log(`\n[${colors.green(colors.bold("Building fixture"))}] ${fixture}\n`);
 
 // Change process directory to the actual install, so that node_modules
 // resolution will use the nested stuff **first**.

diff --git a/test/lib/actions/duplicates.spec.ts b/test/lib/actions/duplicates.spec.ts
@@ -1,5 +1,4 @@
 import { expect } from "chai";
-import * as chalk from "chalk";
 import { join, sep } from "path";
 
 import { IAction, TemplateFormat } from "../../../src/lib/actions/base";
@@ -327,18 +326,6 @@ describe("lib/actions/duplicates", () => {
   });
 
   describe("text", () => {
-    let origChalkLevel: chalk.Level;
-
-    beforeEach(() => {
-      // Stash and disable chalk for tests.
-      origChalkLevel = chalk.level;
-      (chalk as any).level = 0;
-    });
-
-    afterEach(() => {
-      (chalk as any).level = origChalkLevel;
-    });
-
     it("displays duplicates correctly for scoped packages", () => {
       return scopedInstance.template.text()
         .then((textStr) => {