Replace `chalk` with `picocolors`

[Fuzzyma]

A lot of usecases of chalk can be migrated to the smaller picocolors package.
Here is a list of the top 100 dependents sorted by downloads last month.

#	Downloads	Traffic	Package	Issues
1	278.15M	3726.36 GB	@jest/types	jestjs/jest#15197
2	217.74M	2917.03 GB	jest-util
3	215.76M	2890.56 GB	@babel/highlight	#132 (comment)
4	192.12M	2573.78 GB	eslint	eslint/eslint#18686
5	159.30M	2134.13 GB	jest-message-util
6	155.36M	2081.40 GB	jest-diff
7	143.20M	1918.47 GB	jest-matcher-utils
8	122.68M	1643.54 GB	@jest/transform
9	117.05M	1568.11 GB	ora
10	115.92M	1552.92 GB	@jest/console
11	111.85M	1498.46 GB	jest-resolve
12	108.97M	1459.88 GB	jest-validate
13	108.29M	1450.73 GB	jest-watcher
14	108.04M	1447.42 GB	babel-jest
15	104.57M	1400.89 GB	jest-snapshot
16	102.14M	1368.34 GB	jest-config
17	101.60M	1361.14 GB	jest-runtime
18	100.00M	1339.75 GB	jest-each
19	99.28M	1330.03 GB	jest-runner
20	98.10M	1314.30 GB	jest-cli
21	97.88M	1311.27 GB	@jest/reporters
22	96.66M	1294.93 GB	@jest/core
23	86.34M	1156.70 GB	jest-circus
24	72.11M	966.08 GB	@testing-library/dom	testing-library/dom-testing-library#1341
25	67.28M	901.40 GB	jake	jakejs/jake#433
26	56.64M	758.83 GB	fork-ts-checker-webpack-plugin	TypeStrong/fork-ts-checker-webpack-plugin#852
27	53.21M	712.88 GB	boxen
28	52.93M	709.04 GB	create-jest
29	51.49M	689.83 GB	@testing-library/jest-dom	testing-library/jest-dom#659
30	45.39M	608.03 GB	lint-staged
31	32.82M	439.72 GB	jest-jasmine2
32	32.67M	437.74 GB	ts-loader
33	27.16M	363.84 GB	update-notifier
34	26.52M	355.35 GB	npm
35	25.31M	339.02 GB	tsconfig-paths-webpack-plugin
36	24.88M	333.29 GB	concurrently
37	23.99M	321.45 GB	coa
38	23.81M	319.02 GB	cypress
39	21.75M	291.39 GB	jest-watch-typeahead
40	21.09M	282.53 GB	nx
41	18.66M	250.03 GB	babel-code-frame
42	18.40M	246.51 GB	react-dev-utils
43	17.26M	231.29 GB	@commitlint/types
44	17.06M	228.51 GB	@commitlint/load
45	16.69M	223.63 GB	msw	mswjs/msw#2377
46	16.14M	216.24 GB	webpack-log
47	15.36M	205.74 GB	cli-highlight
48	14.76M	197.69 GB	@commitlint/format
49	14.25M	190.96 GB	@nuxtjs/opencollective
50	12.60M	168.81 GB	npm-run-all
51	11.66M	156.26 GB	@ardatan/relay-compiler
52	11.60M	155.43 GB	metro
53	11.48M	153.84 GB	react-native
54	11.48M	153.79 GB	@graphql-codegen/cli
55	11.35M	152.03 GB	critters
56	11.31M	151.50 GB	@react-native-community/cli-tools
57	11.24M	150.60 GB	@wdio/logger
58	11.05M	148.07 GB	@graphql-tools/prisma-loader
59	10.83M	145.10 GB	vue-loader
60	10.65M	142.61 GB	http-server
61	10.47M	140.26 GB	chalk-template
62	10.24M	137.19 GB	@react-native-community/cli-platform-android
63	10.16M	136.07 GB	patch-package
64	10.05M	134.63 GB	pm2
65	9.72M	130.21 GB	@react-native-community/cli
66	9.47M	126.82 GB	marked-terminal
67	9.29M	124.45 GB	@nx/js
68	9.21M	123.44 GB	@nx/workspace
69	9.18M	123.05 GB	tslint
70	9.08M	121.66 GB	wait-port
71	8.63M	115.57 GB	typeorm
72	8.55M	114.54 GB	args
73	8.02M	107.49 GB	@react-native-community/cli-doctor
74	7.97M	106.75 GB	@react-native-community/cli-config
75	7.93M	106.18 GB	listr-verbose-renderer
76	7.92M	106.12 GB	@react-native-community/cli-clean
77	7.90M	105.77 GB	@nestjs/cli
78	7.61M	102.01 GB	@expo/config-plugins
79	7.43M	99.52 GB	listr-update-renderer
80	7.30M	97.82 GB	@react-native/community-cli-plugin
81	7.27M	97.40 GB	@react-native-community/cli-hermes
82	7.17M	96.01 GB	signale
83	7.15M	95.82 GB	find-process
84	6.35M	85.14 GB	@pm2/agent
85	6.03M	80.81 GB	node-sass
86	5.77M	77.34 GB	@datadog/datadog-ci
87	5.75M	77.03 GB	serve
88	5.67M	75.92 GB	gulp-cli
89	5.63M	75.41 GB	inquirer-checkbox-plus-prompt
90	5.57M	74.65 GB	@nx/jest
91	5.57M	74.59 GB	mochawesome-report-generator
92	5.52M	73.94 GB	@sentry/nextjs
93	5.52M	73.90 GB	@cucumber/cucumber
94	5.48M	73.47 GB	cli-tableau
95	5.46M	73.13 GB	lerna
96	5.45M	72.95 GB	@react-native-community/cli-platform-apple
97	5.38M	72.04 GB	@lerna/create
98	5.27M	70.56 GB	mochawesome
99	5.20M	69.69 GB	@nx/eslint-plugin
100	4.94M	66.23 GB	@serverless/utils

[alexparish]

I've looked at making this update for lint-staged but hit a stumbling block.

lint-staged makes use of supportsColor - bundled and exported by chalk - but picocolors doesn't offer an equivalent. I suppose I could use the supports-color package but then I'd be adding a dependency. Have others come across this situation?

[Fuzzyma]

@alexparish I would go for the package directly.
It's not a perfect solution but it's something.

I don't think we have a micro lib for this use case yet. Maybe ask on the discord if anyone wants to write one :D

[43081j]

Reading through the source, supports-color does more than the basics (e.g. supporting cli flags etc)

We could use it for now, but I think the way to go is having a small library of colour related utils. We should avoid creating micro packages, and should aim for an alternative that groups utils in that space I think

[KristjanESPERANTO]

ansis might also be a good choice, it's smaller than chalk and has even more features: https://github.com/webdiscus/ansis?tab=readme-ov-file#compare

[43081j]

Apparently you can use node's own built in function for colour detection now:

https://nodejs.org/api/tty.html#writestreamhascolorscount-env

[Fuzzyma]

@43081j supports-color seems to check way more than this tho. Tons of env vars are being checked. I guess a lot of that accumulated over the past.

[43081j]

It does. Part of where it has gone off the rails IMO

We should be checking if a terminal supports colours through the "official" methods. The rest seem like edge cases people have stuck on over time

E.g. it checks cli args. It shouldn't, some other library or the consumer should do that

I think part of migrating away from it should be to investigate (per project) if any of that is actually needed and do it from outside if so (but I suspect it isn't)

[stianjensen]

@babel/highlight can perhaps be removed from this list now (or marked somehow). Since it has been inlined into @babel/code-frame where picocolors is now also used:
babel/babel@c369676

So the remaining work is just prompting dependents to upgrade their babel, I suppose.

[Fuzzyma]

@stianjensen yeah we had a discussion about that on the discord. People need to update their @babel/codeframe in order to get rid of @babel/highlight. I will link to your comment as "issue"

[Fuzzyma]

eslint-community/eslint-formatter-codeframe#79

[Fuzzyma]

@webdiscus happy to discuss this on our discord (https://chat.e18e.dev/). Please refrain from commenting on PRs to push this discussion especially when your arguments don't apply in the PRs case and all work is already done by a community member.

[43081j]

This comes down to preference in the end

Both ansis and picocolors are fast and small (and faster than each other in different cases).

Most migrations have been to picocolors so far. If a maintainer particularly wants the syntax ansis uses, that's when we'd switch.

Both are recommended by the community. Though the first choice is generally picocolors. Anyhow, fuzzy is right, we should use the discord if we want to discuss it more (so others can more easily get involved)