feat: use picocolors instead of chalk (#2377)

Co-authored-by: Artem Zakharchenko <[email protected]>

Author: Namchee

.github/workflows/ci.yml

@@ -198,14 +198,6 @@ jobs:
           node-version: 18
           cache: 'pnpm'
 
-      - name: Restore build cache
-        uses: actions/cache@v4
-        with:
-          path: ./lib
-          key: ${{ runner.os }}-node-20-build-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-node-20-build-
-
       - name: Install dependencies
         run: pnpm install
 

cli/init.js

@@ -1,6 +1,6 @@
 const fs = require('fs')
 const path = require('path')
-const chalk = require('chalk')
+const colors = require('picocolors')
 const confirm = require('@inquirer/confirm').default
 const invariant = require('./invariant')
 const { SERVICE_WORKER_BUILD_PATH } = require('../config/constants')
@@ -34,7 +34,7 @@ module.exports = async function init(args) {
     // will equal to false.
     else if (args.save == null) {
       console.log(`\
-      ${chalk.cyan(
+      ${colors.cyan(
         'INFO',
       )} In order to ease the future updates to the worker script,
       we recommend saving the path to the worker directory in your package.json.`)
@@ -141,20 +141,20 @@ async function copyWorkerScript(destination, cwd) {
  */
 function printSuccessMessage(paths) {
   console.log(`
-${chalk.green('Worker script successfully copied!')}
-${paths.map((path) => chalk.gray(`  - ${path}\n`))}
+${colors.green('Worker script successfully copied!')}
+${paths.map((path) => colors.gray(`  - ${path}\n`))}
 Continue by describing the network in your application:
 
 
-${chalk.cyan.bold('https://mswjs.io/docs/getting-started')}
+${colors.red(colors.bold('https://mswjs.io/docs/getting-started'))}
 `)
 }
 
 function printFailureMessage(pathsWithErrors) {
   console.error(`\
-${chalk.red('Copying the worker script failed at following paths:')}
+${colors.red('Copying the worker script failed at following paths:')}
 ${pathsWithErrors
-  .map(([path, error]) => chalk.gray(`  - ${path}`) + '\n' + `  ${error}`)
+  .map(([path, error]) => colors.gray(`  - ${path}`) + '\n' + `  ${error}`)
   .join('\n\n')}
   `)
 }
@@ -167,7 +167,7 @@ function saveWorkerDirectory(packageJsonPath, publicDir) {
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
 
   console.log(
-    chalk.gray('Updating "msw.workerDirectory" at "%s"...'),
+    colors.gray('Updating "msw.workerDirectory" at "%s"...'),
     packageJsonPath,
   )
 
@@ -200,7 +200,7 @@ function saveWorkerDirectory(packageJsonPath, publicDir) {
 function promptWorkerDirectoryUpdate(message, packageJsonPath, publicDir) {
   return confirm({
     theme: {
-      prefix: chalk.yellowBright('?'),
+      prefix: colors.yellowBright('?'),
     },
     message,
   }).then((answer) => {

cli/invariant.js

@@ -1,8 +1,8 @@
-const chalk = require('chalk')
+const colors = require('picocolors')
 
 module.exports = function invariant(predicate, message, ...args) {
   if (!predicate) {
-    console.error(chalk.red(message), ...args)
+    console.error(colors.red(message), ...args)
     process.exit(1)
   }
 }

package.json

@@ -149,12 +149,12 @@
     "@open-draft/until": "^2.1.0",
     "@types/cookie": "^0.6.0",
     "@types/statuses": "^2.0.4",
-    "chalk": "^4.1.2",
     "graphql": "^16.8.1",
     "headers-polyfill": "^4.0.2",
     "is-node-process": "^1.2.0",
     "outvariant": "^1.4.3",
     "path-to-regexp": "^6.3.0",
+    "picocolors": "^1.1.1",
     "strict-event-emitter": "^0.5.1",
     "type-fest": "^4.26.1",
     "yargs": "^17.7.2"

pnpm-lock.yaml

@@ -37,8 +37,17 @@ afterAll(async () => {
   await fsMock.cleanup()
 })
 
-async function init(inlineArgs: Array<string>) {
-  return fsMock.exec(`node ${cliPath} init ${inlineArgs.join(' ')}`)
+async function init(inlineArgs: Array<string>): ReturnType<typeof fsMock.exec> {
+  const result = await fsMock.exec(
+    `node ${cliPath} init ${inlineArgs.join(' ')}`,
+  )
+
+  return {
+    ...result,
+    // Strip stdout from color unicode characters:
+    stdout: result.stdout.replace(/\x1b\[\d+m/gi, ''),
+    stderr: result.stderr.replace(/\x1b\[\d+m/gi, ''),
+  }
 }
 
 test('copies the script to a given path without saving', async () => {

test/e2e/cli-init.node.test.ts

@@ -95,7 +95,7 @@ const reactNativeConfig: Options = {
   name: 'react-native',
   platform: 'node',
   entry: ['./src/native/index.ts'],
-  external: ['chalk', 'util', 'events', mswCore, ecosystemDependencies],
+  external: ['picocolors', 'util', 'events', mswCore, ecosystemDependencies],
   format: ['esm', 'cjs'],
   outDir: './lib/native',
   bundle: true,