fix(deps): replace chalk with lightweight picocolors

Oops and I got carried away and fixed a lot of types along the way.

Author: serhalp

package-lock.json

@@ -90,7 +90,6 @@
     "ascii-table": "0.0.9",
     "backoff": "2.5.0",
     "boxen": "8.0.1",
-    "chalk": "5.4.1",
     "chokidar": "3.6.0",
     "ci-info": "4.1.0",
     "clean-deep": "3.4.0",
@@ -153,6 +152,7 @@
     "parallel-transform": "1.2.0",
     "parse-github-url": "1.0.3",
     "parse-gitignore": "2.0.0",
+    "picocolors": "^1.1.1",
     "prettyjson": "1.2.5",
     "pump": "3.0.2",
     "raw-body": "3.0.0",

package.json

@@ -1,30 +1,11 @@
 import process from 'process'
 
-import chalk from 'chalk'
+import pc from 'picocolors'
 
 import { createMainCommand } from '../dist/commands/index.js'
 import { generateAutocompletion } from '../dist/lib/completion/index.js'
 
-const id = (message) => message
-
-/**
- *
- * @param {string} message
- * @param {Array<chalk['Color'] | chalk['Modifiers']>} styles
- * @returns
- */
-const format = (message, styles) => {
-  let func = id
-  try {
-    func = chalk
-    styles.forEach((style) => {
-      func = func[style]
-    })
-  } catch {}
-  return func(message)
-}
-
-const postInstall = async () => {
+const postInstall = () => {
   // yarn plug and play seems to have an issue with reading an esm file by building up the cache.
   // as yarn pnp analyzes everything inside the postinstall
   // yarn pnp executes it out of a .yarn folder .yarn/unplugged/netlify-cli-file-fb026a3a6d/node_modules/netlify-cli/scripts/postinstall.js
@@ -35,25 +16,18 @@ const postInstall = async () => {
   }
 
   console.log('')
-  console.log(await format('Success! Netlify CLI has been installed!', ['greenBright', 'bold', 'underline']))
+  console.log(pc.greenBright(pc.bold(pc.underline('Success! Netlify CLI has been installed!'))))
   console.log('')
   console.log('Your device is now configured to use Netlify CLI to deploy and manage your Netlify sites.')
   console.log('')
   console.log('Next steps:')
   console.log('')
-  console.log(
-    `  ${await format('netlify init', [
-      'cyanBright',
-      'bold',
-    ])}     Connect or create a Netlify site from current directory`,
-  )
-  console.log(
-    `  ${await format('netlify deploy', ['cyanBright', 'bold'])}   Deploy the latest changes to your Netlify site`,
-  )
+  console.log(`  ${pc.cyanBright(pc.bold('netlify init'))}     Connect or create a Netlify site from current directory`)
+  console.log(`  ${pc.cyanBright(pc.bold('netlify deploy'))}   Deploy the latest changes to your Netlify site`)
   console.log('')
-  console.log(`For more information on the CLI run ${await format('netlify help', ['cyanBright', 'bold'])}`)
-  console.log(`Or visit the docs at ${await format('https://cli.netlify.com', ['cyanBright', 'bold'])}`)
+  console.log(`For more information on the CLI run ${pc.cyanBright(pc.bold('netlify help'))}`)
+  console.log(`Or visit the docs at ${pc.cyanBright(pc.bold('https://cli.netlify.com'))}`)
   console.log('')
 }
 
-await postInstall()
+postInstall()

scripts/postinstall.js

@@ -1,5 +1,5 @@
 import { createMainCommand } from '../../../dist/commands/index.js'
-import { sortOptions } from '../../../dist/utils/command-helpers.js'
+import { compareOptions } from '../../../dist/utils/command-helpers.js'
 
 const program = createMainCommand()
 
@@ -19,7 +19,7 @@ const parseCommand = function (command) {
 
   const flags = command.options
     .filter((option) => !option.hidden)
-    .sort(sortOptions)
+    .sort(compareOptions)
     .reduce((prev, cur) => {
       const name = cur.long.replace('--', '')
       const contentType = cur.argChoices ? cur.argChoices.join(' | ') : 'string'

site/scripts/util/generate-command-data.js

@@ -2,7 +2,7 @@ import AsciiTable from 'ascii-table'
 import { OptionValues } from 'commander'
 import { methods } from 'netlify'
 
-import { chalk, error, exit, log, logJson } from '../../utils/command-helpers.js'
+import { picocolors, error, exit, log, logJson } from '../../utils/command-helpers.js'
 import BaseCommand from '../base-command.js'
 
 export const apiCommand = async (apiMethod: string, options: OptionValues, command: BaseCommand) => {
@@ -18,7 +18,7 @@ export const apiCommand = async (apiMethod: string, options: OptionValues, comma
     log(table.toString())
     log()
     log('Above is a list of available API methods')
-    log(`To run a method use "${chalk.cyanBright('netlify api methodName')}"`)
+    log(`To run a method use "${picocolors.cyanBright('netlify api methodName')}"`)
     exit()
   }
 

src/commands/api/api.ts

@@ -1,4 +1,4 @@
-import { chalk } from '../../utils/command-helpers.js'
+import { picocolors } from '../../utils/command-helpers.js'
 import BaseCommand from '../base-command.js'
 
 export const createApiCommand = (program: BaseCommand) =>
@@ -7,7 +7,7 @@ export const createApiCommand = (program: BaseCommand) =>
     .argument('[apiMethod]', 'Open API method to run')
     .description(
       `Run any Netlify API method
-For more information on available methods checkout https://open-api.netlify.com/ or run '${chalk.grey(
+For more information on available methods checkout https://open-api.netlify.com/ or run '${picocolors.gray(
         'netlify api --list',
       )}'`,
     )

src/commands/api/index.ts

@@ -19,7 +19,7 @@ import { getAgent } from '../lib/http-agent.js'
 import {
   NETLIFY_CYAN,
   USER_AGENT,
-  chalk,
+  picocolors,
   error,
   exit,
   getToken,
@@ -28,7 +28,7 @@ import {
   normalizeConfig,
   padLeft,
   pollForToken,
-  sortOptions,
+  compareOptions,
   warn,
 } from '../utils/command-helpers.js'
 import { FeatureFlags } from '../utils/feature-flags.js'
@@ -106,7 +106,7 @@ async function selectWorkspace(project: Project, filter?: string): Promise<strin
 
   if (!selected) {
     log()
-    log(chalk.cyan(`We've detected multiple sites inside your repository`))
+    log(picocolors.cyan(`We've detected multiple sites inside your repository`))
 
     if (isCI) {
       throw new Error(
@@ -128,7 +128,7 @@ async function selectWorkspace(project: Project, filter?: string): Promise<strin
         (project.workspace?.packages || [])
           .filter((pkg) => pkg.path.includes(input))
           .map((pkg) => ({
-            name: `${pkg.name ? `${chalk.bold(pkg.name)}  ` : ''}${pkg.path}  ${chalk.dim(
+            name: `${pkg.name ? `${picocolors.bold(pkg.name)}  ` : ''}${pkg.path}  ${picocolors.dim(
               `--filter ${pkg.name || pkg.path}`,
             )}`,
             value: pkg.path,
@@ -287,7 +287,7 @@ export default class BaseCommand extends Command {
 
         if (description) {
           const pad = termWidth + HELP_SEPARATOR_WIDTH
-          const fullText = `${bang}${term.padEnd(pad - (isCommand ? 2 : 0))}${chalk.grey(description)}`
+          const fullText = `${bang}${term.padEnd(pad - (isCommand ? 2 : 0))}${picocolors.gray(description)}`
           return helper.wrap(fullText, helpWidth - HELP_INDENT_WIDTH, pad)
         }
 
@@ -304,34 +304,34 @@ export default class BaseCommand extends Command {
 
       // on the parent help command the version should be displayed
       if (this.name() === 'netlify') {
-        output = [...output, chalk.bold('VERSION'), formatHelpList([formatItem(USER_AGENT)]), '']
+        output = [...output, picocolors.bold('VERSION'), formatHelpList([formatItem(USER_AGENT)]), '']
       }
 
       // Usage
-      output = [...output, chalk.bold('USAGE'), helper.commandUsage(command), '']
+      output = [...output, picocolors.bold('USAGE'), helper.commandUsage(command), '']
 
       // Arguments
       const argumentList = helper
         .visibleArguments(command)
         .map((argument) => formatItem(helper.argumentTerm(argument), helper.argumentDescription(argument)))
       if (argumentList.length !== 0) {
-        output = [...output, chalk.bold('ARGUMENTS'), formatHelpList(argumentList), '']
+        output = [...output, picocolors.bold('ARGUMENTS'), formatHelpList(argumentList), '']
       }
 
       if (command.#noBaseOptions === false) {
         // Options
         const optionList = helper
           .visibleOptions(command)
-          .sort(sortOptions)
+          .sort(compareOptions)
           .map((option) => formatItem(helper.optionTerm(option), helper.optionDescription(option)))
         if (optionList.length !== 0) {
-          output = [...output, chalk.bold('OPTIONS'), formatHelpList(optionList), '']
+          output = [...output, picocolors.bold('OPTIONS'), formatHelpList(optionList), '']
         }
       }
 
       // Description
       if (commandDescription.length !== 0) {
-        output = [...output, chalk.bold('DESCRIPTION'), formatHelpList(commandDescription), '']
+        output = [...output, picocolors.bold('DESCRIPTION'), formatHelpList(commandDescription), '']
       }
 
       // Aliases
@@ -340,13 +340,13 @@ export default class BaseCommand extends Command {
       if (command._aliases.length !== 0) {
         // @ts-expect-error TS(2551) FIXME: Property '_aliases' does not exist on type 'Comman... Remove this comment to see the full error message
         const aliases = command._aliases.map((alias) => formatItem(`${parentCommand.name()} ${alias}`, null, true))
-        output = [...output, chalk.bold('ALIASES'), formatHelpList(aliases), '']
+        output = [...output, picocolors.bold('ALIASES'), formatHelpList(aliases), '']
       }
 
       if (command.examples.length !== 0) {
         output = [
           ...output,
-          chalk.bold('EXAMPLES'),
+          picocolors.bold('EXAMPLES'),
           formatHelpList(command.examples.map((example) => `${HELP_$} ${example}`)),
           '',
         ]
@@ -356,7 +356,7 @@ export default class BaseCommand extends Command {
         formatItem(cmd.name(), helper.subcommandDescription(cmd).split('\n')[0], true),
       )
       if (commandList.length !== 0) {
-        output = [...output, chalk.bold('COMMANDS'), formatHelpList(commandList), '']
+        output = [...output, picocolors.bold('COMMANDS'), formatHelpList(commandList), '']
       }
 
       return [...output, ''].join('\n')
@@ -410,7 +410,6 @@ export default class BaseCommand extends Command {
     const authLink = `${webUI}/authorize?response_type=ticket&ticket=${ticket.id}`
 
     log(`Opening ${authLink}`)
-    // @ts-expect-error TS(2345) FIXME: Argument of type '{ url: string; }' is not assigna... Remove this comment to see the full error message
     await openBrowser({ url: authLink })
 
     const accessToken = await pollForToken({
@@ -448,11 +447,11 @@ export default class BaseCommand extends Command {
 
     // Log success
     log()
-    log(`${chalk.greenBright('You are now logged into your Netlify account!')}`)
+    log(`${picocolors.greenBright('You are now logged into your Netlify account!')}`)
     log()
-    log(`Run ${chalk.cyanBright('netlify status')} for account details`)
+    log(`Run ${picocolors.cyanBright('netlify status')} for account details`)
     log()
-    log(`To see all available commands run: ${chalk.cyanBright('netlify help')}`)
+    log(`To see all available commands run: ${picocolors.cyanBright('netlify help')}`)
     log()
     return accessToken
   }

src/commands/base-command.ts

@@ -1,6 +1,6 @@
 import { getStore } from '@netlify/blobs'
 
-import { chalk, error as printError, log } from '../../utils/command-helpers.js'
+import { picocolors, error as printError, log } from '../../utils/command-helpers.js'
 import { promptBlobDelete } from '../../utils/prompts/blob-delete-prompts.js'
 
 /**
@@ -24,8 +24,12 @@ export const blobsDelete = async (storeName: string, key: string, _options: Reco
   try {
     await store.delete(key)
 
-    log(`${chalk.greenBright('Success')}: Blob ${chalk.yellow(key)} deleted from store ${chalk.yellow(storeName)}`)
+    log(
+      `${picocolors.greenBright('Success')}: Blob ${picocolors.yellow(key)} deleted from store ${picocolors.yellow(
+        storeName,
+      )}`,
+    )
   } catch {
-    return printError(`Could not delete blob ${chalk.yellow(key)} from store ${chalk.yellow(storeName)}`)
+    return printError(`Could not delete blob ${picocolors.yellow(key)} from store ${picocolors.yellow(storeName)}`)
   }
 }

src/commands/blobs/blobs-delete.ts

@@ -4,7 +4,7 @@ import { resolve } from 'path'
 import { getStore } from '@netlify/blobs'
 import { OptionValues } from 'commander'
 
-import { chalk, error as printError } from '../../utils/command-helpers.js'
+import { picocolors, error as printError } from '../../utils/command-helpers.js'
 import BaseCommand from '../base-command.js'
 
 interface Options extends OptionValues {
@@ -26,11 +26,11 @@ export const blobsGet = async (storeName: string, key: string, options: Options,
   try {
     blob = await store.get(key)
   } catch {
-    return printError(`Could not retrieve blob ${chalk.yellow(key)} from store ${chalk.yellow(storeName)}`)
+    return printError(`Could not retrieve blob ${picocolors.yellow(key)} from store ${picocolors.yellow(storeName)}`)
   }
 
   if (blob === null) {
-    return printError(`Blob ${chalk.yellow(key)} does not exist in store ${chalk.yellow(storeName)}`)
+    return printError(`Blob ${picocolors.yellow(key)} does not exist in store ${picocolors.yellow(storeName)}`)
   }
 
   if (output) {

src/commands/blobs/blobs-get.ts

@@ -2,7 +2,7 @@ import { getStore } from '@netlify/blobs'
 import AsciiTable from 'ascii-table'
 import { OptionValues } from 'commander'
 
-import { chalk, error as printError, log, logJson } from '../../utils/command-helpers.js'
+import { picocolors, error as printError, log, logJson } from '../../utils/command-helpers.js'
 import BaseCommand from '../base-command.js'
 
 interface Options extends OptionValues {
@@ -31,7 +31,7 @@ export const blobsList = async (storeName: string, options: Options, command: Ba
     }
 
     if (blobs.length === 0 && directories.length === 0) {
-      return log(`Netlify Blobs store ${chalk.yellow(storeName)} is empty`)
+      return log(`Netlify Blobs store ${picocolors.yellow(storeName)} is empty`)
     }
 
     const table = new AsciiTable(`Netlify Blobs (${storeName})`)
@@ -48,6 +48,6 @@ export const blobsList = async (storeName: string, options: Options, command: Ba
 
     log(table.toString())
   } catch {
-    return printError(`Could not list blobs from store ${chalk.yellow(storeName)}`)
+    return printError(`Could not list blobs from store ${picocolors.yellow(storeName)}`)
   }
 }