Replace cli-color (#4374)

lib/plugins/text/color.js

@@ -0,0 +1,30 @@
+const ansi = {
+  reset: '\u001B[0m',
+  bold: '\u001B[1m',
+  green: '\u001B[32m',
+  yellow: '\u001B[33m',
+  red: '\u001B[31m',
+  blackBright: '\u001B[90m'
+};
+
+function stripAnsi(str) {
+  // eslint-disable-next-line no-control-regex
+  return str.replaceAll(/\u001B\[[0-9;]*[A-Za-z]/g, '');
+}
+
+export function colorise(str, clr) {
+  if (!clr || !ansi[clr]) return str;
+  return ansi[clr] + str + ansi.reset;
+}
+
+export function makeBold(str) {
+  return ansi.bold + str + ansi.reset;
+}
+
+export function getStrippedLength(str) {
+  return stripAnsi(str).length;
+}
+
+export function blackBright(str) {
+  return colorise(str, 'blackBright');
+}

lib/plugins/text/textBuilder.js

@@ -1,13 +1,10 @@
-import clic from 'cli-color';
-
 import { plural, short, cap } from '../../support/helpers/index.js';
 import summaryBoxesSetup from '../html/setup/summaryBoxes.js';
+import { colorise, makeBold, getStrippedLength, blackBright } from './color.js';
 
-const { getStrippedLength, blackBright, bold } = clic;
 const tableOptions = {
   stringLength: getStrippedLength
 };
-const drab = blackBright;
 
 function table(rows, options = {}) {
   const { stringLength = str => str.length } = options;
@@ -54,7 +51,7 @@ function getColor(label) {
 
 function getHeader(context, options) {
   const noPages = options.urls.length;
-  return drab(
+  return blackBright(
     [
       `${plural(noPages, 'page')} analysed for ${short(context.name, 30)} `,
       `(${plural(options.browsertime.iterations, 'run')}, `,
@@ -82,9 +79,9 @@ export function renderSummary(metrics, context, options) {
   let out = getHeader(context, options);
   let rows = getBoxes(metrics, options.html).map(b => {
     const marker = getMarker(b.label),
-      c = getColor(b.label);
+      clr = getColor(b.label);
 
-    return [clic[c](marker), clic[c](b.name), bold(b.median)];
+    return [colorise(marker, clr), colorise(b.name, clr), makeBold(b.median)];
   });
   rows.unshift(
     ['', 'Score / Metric', 'Median'],
@@ -100,20 +97,25 @@ export function renderBriefSummary(metrics, context, options) {
     reqs = '',
     rum = '';
   getBoxes(metrics, options.html).map(b => {
-    let c = getColor(b.label),
-      value = b.median,
-      name;
-    c = clic[c] || noop;
+    const clr = getColor(b.label);
+    let value = b.median;
+    let name;
+    const colorFn = clr ? str => colorise(str, clr) : noop;
     if (/score$/i.test(b.url)) {
       name = abbr(b.name.replace('score', ''));
-      scores.push(c(`${name}:${value}`));
+      scores.push(colorFn(`${name}:${value}`));
     } else if ('pageSize' === b.url) {
       value = value.replace(' ', ''); // 10 KB -> 10KB
       size = `${value}`;
     } else if (/total requests/i.test(b.name)) {
       reqs = `${value} reqs`;
     }
   });
-  lines.push(drab('Score: ') + scores.reverse().join(', '), size, reqs, rum);
+  lines.push(
+    blackBright('Score: ') + scores.reverse().join(', '),
+    size,
+    reqs,
+    rum
+  );
   options.summary = { out: `${out}\n` + lines.join(' / ') };
 }

package.json

@@ -89,7 +89,6 @@
     "axe-core": "4.10.2",
     "browsertime": "23.5.0",
     "coach-core": "8.1.1",
-    "cli-color": "2.0.4",
     "concurrent-queue": "7.0.2",
     "dayjs": "1.11.11",
     "fast-crc32c": "2.0.0",