Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace chalk with picocolors #132

Open
Fuzzyma opened this issue Nov 19, 2024 · 12 comments
Open

Replace chalk with picocolors #132

Fuzzyma opened this issue Nov 19, 2024 · 12 comments

Comments

@Fuzzyma
Copy link
Collaborator

Fuzzyma commented Nov 19, 2024

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#1340
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#656
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
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
Copy link

alexparish commented Nov 26, 2024

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
Copy link
Collaborator Author

Fuzzyma commented Nov 26, 2024

@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
Copy link
Collaborator

43081j commented Nov 27, 2024

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
Copy link

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
Copy link
Collaborator

43081j commented Nov 28, 2024

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

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

@Fuzzyma
Copy link
Collaborator Author

Fuzzyma commented Nov 29, 2024

@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
Copy link
Collaborator

43081j commented Nov 29, 2024

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
Copy link

@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
Copy link
Collaborator Author

Fuzzyma commented Dec 5, 2024

@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
Copy link
Collaborator Author

Fuzzyma commented Dec 9, 2024

@Fuzzyma
Copy link
Collaborator Author

Fuzzyma commented Dec 10, 2024

@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
Copy link
Collaborator

43081j commented Dec 10, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants