picocolors

The tiniest and the fastest library for terminal output formatting with ANSI colors.

1import pc from "picocolors"
2
3console.log(
4  pc.green(`How are ${pc.italic(`you`)} doing?`)
5)

• No dependencies.
• 14 times smaller and 2 times faster than chalk.
• Used by popular tools like PostCSS, SVGO, Stylelint, and Browserslist.
• Node.js v6+ & browsers support. Support for both CJS and ESM projects.
• TypeScript type declarations included.
• NO_COLOR friendly.

Motivation

With picocolors we are trying to draw attention to the node_modules size problem and promote performance-first culture.

Prior Art

Credits go to the following projects:

• Nanocolors by @ai
• Colorette by @jorgebucaran
• Kleur by @lukeed
• Colors.js by @Marak
• Chalk by @sindresorhus

Benchmarks

The space in node_modules including sub-dependencies:

1$ node ./benchmarks/size.js
2Data from packagephobia.com
3  chalk       101 kB
4  cli-color  1249 kB
5  ansi-colors  25 kB
6  kleur        21 kB
7  colorette    17 kB
8  nanocolors   16 kB
9+ picocolors    7 kB

Library loading time:

1$ node ./benchmarks/loading.js
2  chalk          6.167 ms
3  cli-color     31.431 ms
4  ansi-colors    1.585 ms
5  kleur          2.008 ms
6  kleur/colors   0.773 ms
7  colorette      2.476 ms
8  nanocolors     0.833 ms
9+ picocolors     0.466 ms

Benchmark for simple use case:

1$ node ./benchmarks/simple.js
2  chalk         24,066,342 ops/sec
3  cli-color        938,700 ops/sec
4  ansi-colors    4,532,542 ops/sec
5  kleur         20,343,122 ops/sec
6  kleur/colors  35,415,770 ops/sec
7  colorette     34,244,834 ops/sec
8  nanocolors    33,443,265 ops/sec
9+ picocolors    33,271,645 ops/sec

Benchmark for complex use cases:

1$ node ./benchmarks/complex.js
2  chalk            969,915 ops/sec
3  cli-color        131,639 ops/sec
4  ansi-colors      342,250 ops/sec
5  kleur            611,880 ops/sec
6  kleur/colors   1,129,526 ops/sec
7  colorette      1,747,277 ops/sec
8  nanocolors     1,251,312 ops/sec
9+ picocolors     2,024,086 ops/sec

Usage

Picocolors provides an object which includes a variety of text coloring and formatting functions

1import pc from "picocolors"

The object includes following coloring functions: black, red, green, yellow, blue, magenta, cyan, white, gray.

1console.log(`I see a ${pc.red("red door")} and I want it painted ${pc.black("black")}`)

The object also includes following background color modifier functions: bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite and bright variants bgBlackBright, bgRedBright, bgGreenBright, bgYellowBright, bgBlueBright, bgMagentaBright, bgCyanBright, bgWhiteBright.

1console.log(
2  pc.bgBlack(
3    pc.white(`Tom appeared on the sidewalk with a bucket of whitewash and a long-handled brush.`)
4  )
5)

Besides colors, the object includes following formatting functions: dim, bold, hidden, italic, underline, strikethrough, reset, inverse and bright variants blackBright, redBright, greenBright, yellowBright, blueBright, magentaBright, cyanBright, whiteBright.

1for (let task of tasks) {
2  console.log(`${pc.bold(task.name)} ${pc.dim(task.durationMs + "ms")}`)
3}

The library provides additional utilities to ensure the best results for the task:

• isColorSupported — boolean, explicitly tells whether or not the colors or formatting appear on the screen

  1import pc from "picocolors"
  2
  3if (pc.isColorSupported) {
  4  console.log("Yay! This script can use colors and formatters")
  5}

• createColors(enabled) — a function that returns a new API object with manually defined color support configuration

  1import pc from "picocolors"
  2
  3let { red, bgWhite } = pc.createColors(options.enableColors)

Replacing chalk

1. Replace package name in import:

   1- import chalk from 'chalk'
   2+ import pico from 'picocolors'

2. Replace variable:

   1- chalk.red(text)
   2+ pico.red(text)

3. Replace chains to nested calls:

   1- chalk.red.bold(text)
   2+ pico.red(pico.bold(text))

4. You can use colorize-template to replace chalk’s tagged template literal.

   1+ import { createColorize } from 'colorize-template'
   2
   3+ let colorize = createColorize(pico)
   4- chalk.red.bold`full {yellow ${"text"}}`
   5+ colorize`{red.bold full {yellow ${"text"}}}`