178 lines
4.9 KiB
Markdown
178 lines
4.9 KiB
Markdown
|
# picocolors
|
|||
|
|
|||
|
The tiniest and the fastest library for terminal output formatting with ANSI colors.
|
|||
|
|
|||
|
```javascript
|
|||
|
import pc from "picocolors"
|
|||
|
|
|||
|
console.log(
|
|||
|
pc.green(`How are ${pc.italic(`you`)} doing?`)
|
|||
|
)
|
|||
|
```
|
|||
|
|
|||
|
- **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`](https://no-color.org/) 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](https://github.com/ai/nanocolors) by [@ai](https://github.com/ai)
|
|||
|
- [Colorette](https://github.com/jorgebucaran/colorette) by [@jorgebucaran](https://github.com/jorgebucaran)
|
|||
|
- [Kleur](https://github.com/lukeed/kleur) by [@lukeed](https://github.com/lukeed)
|
|||
|
- [Colors.js](https://github.com/Marak/colors.js) by [@Marak](https://github.com/Marak)
|
|||
|
- [Chalk](https://github.com/chalk/chalk) by [@sindresorhus](https://github.com/sindresorhus)
|
|||
|
|
|||
|
## Benchmarks
|
|||
|
|
|||
|
The space in node_modules including sub-dependencies:
|
|||
|
|
|||
|
```diff
|
|||
|
$ node ./benchmarks/size.js
|
|||
|
Data from packagephobia.com
|
|||
|
chalk 101 kB
|
|||
|
cli-color 1249 kB
|
|||
|
ansi-colors 25 kB
|
|||
|
kleur 21 kB
|
|||
|
colorette 17 kB
|
|||
|
nanocolors 16 kB
|
|||
|
+ picocolors 7 kB
|
|||
|
```
|
|||
|
|
|||
|
Library loading time:
|
|||
|
|
|||
|
```diff
|
|||
|
$ node ./benchmarks/loading.js
|
|||
|
chalk 6.167 ms
|
|||
|
cli-color 31.431 ms
|
|||
|
ansi-colors 1.585 ms
|
|||
|
kleur 2.008 ms
|
|||
|
kleur/colors 0.773 ms
|
|||
|
colorette 2.476 ms
|
|||
|
nanocolors 0.833 ms
|
|||
|
+ picocolors 0.466 ms
|
|||
|
```
|
|||
|
|
|||
|
Benchmark for simple use case:
|
|||
|
|
|||
|
```diff
|
|||
|
$ node ./benchmarks/simple.js
|
|||
|
chalk 24,066,342 ops/sec
|
|||
|
cli-color 938,700 ops/sec
|
|||
|
ansi-colors 4,532,542 ops/sec
|
|||
|
kleur 20,343,122 ops/sec
|
|||
|
kleur/colors 35,415,770 ops/sec
|
|||
|
colorette 34,244,834 ops/sec
|
|||
|
nanocolors 33,443,265 ops/sec
|
|||
|
+ picocolors 33,271,645 ops/sec
|
|||
|
```
|
|||
|
|
|||
|
Benchmark for complex use cases:
|
|||
|
|
|||
|
```diff
|
|||
|
$ node ./benchmarks/complex.js
|
|||
|
chalk 969,915 ops/sec
|
|||
|
cli-color 131,639 ops/sec
|
|||
|
ansi-colors 342,250 ops/sec
|
|||
|
kleur 611,880 ops/sec
|
|||
|
kleur/colors 1,129,526 ops/sec
|
|||
|
colorette 1,747,277 ops/sec
|
|||
|
nanocolors 1,251,312 ops/sec
|
|||
|
+ picocolors 2,024,086 ops/sec
|
|||
|
```
|
|||
|
|
|||
|
## Usage
|
|||
|
|
|||
|
Picocolors provides an object which includes a variety of text coloring and formatting functions
|
|||
|
|
|||
|
```javascript
|
|||
|
import pc from "picocolors"
|
|||
|
```
|
|||
|
|
|||
|
The object includes following coloring functions: `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `gray`.
|
|||
|
|
|||
|
```javascript
|
|||
|
console.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`.
|
|||
|
|
|||
|
```javascript
|
|||
|
console.log(
|
|||
|
pc.bgBlack(
|
|||
|
pc.white(`Tom appeared on the sidewalk with a bucket of whitewash and a long-handled brush.`)
|
|||
|
)
|
|||
|
)
|
|||
|
```
|
|||
|
|
|||
|
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`.
|
|||
|
|
|||
|
```javascript
|
|||
|
for (let task of tasks) {
|
|||
|
console.log(`${pc.bold(task.name)} ${pc.dim(task.durationMs + "ms")}`)
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
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
|
|||
|
|
|||
|
```javascript
|
|||
|
import pc from "picocolors"
|
|||
|
|
|||
|
if (pc.isColorSupported) {
|
|||
|
console.log("Yay! This script can use colors and formatters")
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
- `createColors(enabled)` — a function that returns a new API object with manually defined color support configuration
|
|||
|
|
|||
|
```javascript
|
|||
|
import pc from "picocolors"
|
|||
|
|
|||
|
let { red, bgWhite } = pc.createColors(options.enableColors)
|
|||
|
```
|
|||
|
|
|||
|
## Replacing `chalk`
|
|||
|
|
|||
|
1. Replace package name in import:
|
|||
|
|
|||
|
```diff
|
|||
|
- import chalk from 'chalk'
|
|||
|
+ import pico from 'picocolors'
|
|||
|
```
|
|||
|
|
|||
|
2. Replace variable:
|
|||
|
|
|||
|
```diff
|
|||
|
- chalk.red(text)
|
|||
|
+ pico.red(text)
|
|||
|
```
|
|||
|
|
|||
|
3. Replace chains to nested calls:
|
|||
|
|
|||
|
```diff
|
|||
|
- chalk.red.bold(text)
|
|||
|
+ pico.red(pico.bold(text))
|
|||
|
```
|
|||
|
|
|||
|
4. You can use [`colorize-template`](https://github.com/usmanyunusov/colorize-template)
|
|||
|
to replace chalk’s tagged template literal.
|
|||
|
|
|||
|
```diff
|
|||
|
+ import { createColorize } from 'colorize-template'
|
|||
|
|
|||
|
+ let colorize = createColorize(pico)
|
|||
|
- chalk.red.bold`full {yellow ${"text"}}`
|
|||
|
+ colorize`{red.bold full {yellow ${"text"}}}`
|
|||
|
```
|