Replace `chalk` with `picocolors` #16359

nicolo-ribaudo · 2024-03-16T20:31:48Z

Q	A
Fixed Issues?	Closes #14213
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

I was checking https://npmgraph.js.org/?q=%40babel%2Fcore#hide= and I noticed that we have both chalk and picocolors (through browserslist) in our dependency tree.

This PR replaces chalk with picocolors, to avoid two libraries that do the same thing. picocolors supports Node.js 6+, so we can start using it also in Babel 7, but it's much smaller:

5kb smaller than the latest chalk version (https://bundlephobia.com/package/picocolors@1.0.0 vs https://bundlephobia.com/package/chalk@5.3.0)
20kb smaller than chalk 2 (vs https://bundlephobia.com/package/chalk@2.4.2)

This reduces our @babel/standalone unminified size from 5128kB to 5072kB.

There is just a footnote to all of this: we cannot actually drop chalk in Babel 7, because @babel/highlight exports a getChalk function that just returns it. However, given that:

picocolors it's likely in the dependencies tree
when it's not (e.g. a package directly using @babel/highlight), picocolor only adds 2% to chalk's size
if the getChalk function is not used, it's dead code and bundlers can hopefully eliminate it

I decided to go ahead and also use picocolors for Babel 7, rather than branching everywhere on process.env.BABEL_8_BREAKING.

cc @fisker @sosukesuzuki I know that Prettier does some magic to remove chalk from Babel when bundling, this might affect it.

babel-bot · 2024-03-16T20:34:14Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/56541

nicolo-ribaudo · 2024-03-17T11:17:41Z

Some snapshot tests in Jest are failing:

-     </><red><bold>></intensity></color><gray> 1 |</color> <cyan>throw</color> <cyan>new</color> <yellow>Error</color>(<green>"Whoops!"</color>)<yellow>;</color></>
-     </> <gray>   |</color>       <red><bold>^</intensity></color></>
+     </><red><bold>></intensity></color><gray> 1 |</color> <cyan>throw</color> <cyan>new</color> <yellow>Error</color>(<green>"Whoops!"</color>)<yellow>;</color>
+      <gray>   |</color>       <red><bold>^</intensity></color></>

(wow, serializing ANSI escapes like this is super helpful)

I think this difference (the missing </> "terminate all styles" at the end of the first line and beginning of the second) is ok, because both <color> styles and <intensity> (<bold>) are explicitly terminated already.

nicolo-ribaudo · 2024-03-19T09:23:35Z

I'll merge with CI red, release and then open a PR to Jest -- it's much easier than working it around her 😬

nicolo-ribaudo · 2024-03-19T11:32:44Z

jestjs/jest#14976

SimenB · 2024-03-19T14:37:04Z

(wow, serializing ANSI escapes like this is super helpful)

https://www.npmjs.com/package/jest-serializer-ansi-escapes fwiw 🙂

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@babel/traverse](https://babel.dev/docs/en/next/babel-traverse) ([source](https://github.com/babel/babel)) | resolutions | minor | [`7.23.9` -> `7.24.1`](https://renovatebot.com/diffs/npm/@babel%2ftraverse/7.23.9/7.24.1) | --- ### Release Notes <details> <summary>babel/babel (@babel/traverse)</summary> ### [`v7.24.1`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7241-2024-03-19) [Compare Source](babel/babel@v7.24.0...v7.24.1) ##### 🐛 Bug Fix - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators` - [#16350](babel/babel#16350) Fix decorated class computed keys ordering ([@JLHwung](https://github.com/JLHwung)) - [#16344](babel/babel#16344) Fix decorated class static field private access ([@JLHwung](https://github.com/JLHwung)) - `babel-plugin-proposal-decorators`, `babel-plugin-proposal-json-modules`, `babel-plugin-transform-async-generator-functions`, `babel-plugin-transform-regenerator`, `babel-plugin-transform-runtime`, `babel-preset-env` - [#16329](babel/babel#16329) Respect `moduleName` for `@babel/runtime/regenerator` imports ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-transform-class-properties` - [#16331](babel/babel#16331) Fix decorator memoiser binding kind ([@JLHwung](https://github.com/JLHwung)) - `babel-helper-create-class-features-plugin`, `babel-helper-replace-supers`, `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties` - [#16325](babel/babel#16325) Fix decorator evaluation private environment ([@JLHwung](https://github.com/JLHwung)) ##### 📝 Documentation - [#16319](babel/babel#16319) Update SECURITY.md ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 🏠 Internal - `babel-code-frame`, `babel-highlight` - [#16359](babel/babel#16359) Replace `chalk` with `picocolors` ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-fixtures`, `babel-helpers`, `babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-transform-unicode-sets-regex`, `babel-preset-env`, `babel-preset-flow` - [#16352](babel/babel#16352) Run Babel transform tests on old node if possible ([@JLHwung](https://github.com/JLHwung)) - `babel-helpers`, `babel-plugin-transform-async-generator-functions`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-class-static-block`, `babel-plugin-transform-modules-commonjs`, `babel-plugin-transform-modules-systemjs`, `babel-plugin-transform-regenerator`, `babel-plugin-transform-runtime`, `babel-preset-env`, `babel-runtime-corejs3`, `babel-runtime`, `babel-standalone` - [#16323](babel/babel#16323) Allow separate helpers to be excluded in Babel 8 ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-module-imports`, `babel-plugin-proposal-import-wasm-source`, `babel-plugin-proposal-json-modules`, `babel-plugin-proposal-record-and-tuple`, `babel-plugin-transform-react-jsx-development`, `babel-plugin-transform-react-jsx` - [#16349](babel/babel#16349) Support merging imports in import injector ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-create-class-features-plugin`, `babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression`, `babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining`, `babel-plugin-bugfix-v8-static-class-fields-redefine-readonly`, `babel-plugin-external-helpers`, `babel-plugin-proposal-async-do-expressions`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-destructuring-private`, `babel-plugin-proposal-do-expressions`, `babel-plugin-proposal-duplicate-named-capturing-groups-regex`, `babel-plugin-proposal-explicit-resource-management`, `babel-plugin-proposal-export-default-from`, `babel-plugin-proposal-function-bind`, `babel-plugin-proposal-function-sent`, `babel-plugin-proposal-import-attributes-to-assertions`, `babel-plugin-proposal-import-defer`, `babel-plugin-proposal-import-wasm-source`, `babel-plugin-proposal-json-modules`, `babel-plugin-proposal-optional-chaining-assign`, `babel-plugin-proposal-partial-application`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-proposal-record-and-tuple`, `babel-plugin-proposal-regexp-modifiers`, `babel-plugin-proposal-throw-expressions`, `babel-plugin-syntax-async-do-expressions`, `babel-plugin-syntax-decimal`, `babel-plugin-syntax-decorators`, `babel-plugin-syntax-destructuring-private`, `babel-plugin-syntax-do-expressions`, `babel-plugin-syntax-explicit-resource-management`, `babel-plugin-syntax-export-default-from`, `babel-plugin-syntax-flow`, `babel-plugin-syntax-function-bind`, `babel-plugin-syntax-function-sent`, `babel-plugin-syntax-import-assertions`, `babel-plugin-syntax-import-attributes`, `babel-plugin-syntax-import-defer`, `babel-plugin-syntax-import-reflection`, `babel-plugin-syntax-import-source`, `babel-plugin-syntax-jsx`, `babel-plugin-syntax-module-blocks`, `babel-plugin-syntax-optional-chaining-assign`, `babel-plugin-syntax-partial-application`, `babel-plugin-syntax-pipeline-operator`, `babel-plugin-syntax-record-and-tuple`, `babel-plugin-syntax-throw-expressions`, `babel-plugin-syntax-typescript`, `babel-plugin-transform-arrow-functions`, `babel-plugin-transform-async-generator-functions`, `babel-plugin-transform-async-to-generator`, `babel-plugin-transform-block-scoped-functions`, `babel-plugin-transform-block-scoping`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-class-static-block`, `babel-plugin-transform-classes`, `babel-plugin-transform-computed-properties`, `babel-plugin-transform-destructuring`, `babel-plugin-transform-dotall-regex`, `babel-plugin-transform-duplicate-keys`, `babel-plugin-transform-dynamic-import`, `babel-plugin-transform-exponentiation-operator`, `babel-plugin-transform-export-namespace-from`, `babel-plugin-transform-flow-comments`, `babel-plugin-transform-flow-strip-types`, `babel-plugin-transform-for-of`, `babel-plugin-transform-function-name`, `babel-plugin-transform-instanceof`, `babel-plugin-transform-jscript`, `babel-plugin-transform-json-strings`, `babel-plugin-transform-literals`, `babel-plugin-transform-logical-assignment-operators`, `babel-plugin-transform-member-expression-literals`, `babel-plugin-transform-modules-amd`, `babel-plugin-transform-modules-commonjs`, `babel-plugin-transform-modules-systemjs`, `babel-plugin-transform-modules-umd`, `babel-plugin-transform-new-target`, `babel-plugin-transform-nullish-coalescing-operator`, `babel-plugin-transform-numeric-separator`, `babel-plugin-transform-object-assign`, `babel-plugin-transform-object-rest-spread`, `babel-plugin-transform-object-set-prototype-of-to-assign`, `babel-plugin-transform-object-super`, `babel-plugin-transform-optional-catch-binding`, `babel-plugin-transform-optional-chaining`, `babel-plugin-transform-parameters`, `babel-plugin-transform-private-methods`, `babel-plugin-transform-private-property-in-object`, `babel-plugin-transform-property-literals`, `babel-plugin-transform-property-mutators`, `babel-plugin-transform-proto-to-assign`, `babel-plugin-transform-react-constant-elements`, `babel-plugin-transform-react-display-name`, `babel-plugin-transform-react-inline-elements`, `babel-plugin-transform-react-jsx-compat`, `babel-plugin-transform-react-jsx-self`, `babel-plugin-transform-react-jsx-source`, `babel-plugin-transform-react-pure-annotations`, `babel-plugin-transform-regenerator`, `babel-plugin-transform-reserved-words`, `babel-plugin-transform-runtime`, `babel-plugin-transform-shorthand-properties`, `babel-plugin-transform-spread`, `babel-plugin-transform-sticky-regex`, `babel-plugin-transform-strict-mode`, `babel-plugin-transform-template-literals`, `babel-plugin-transform-typeof-symbol`, `babel-plugin-transform-typescript`, `babel-plugin-transform-unicode-escapes`, `babel-plugin-transform-unicode-property-regex`, `babel-plugin-transform-unicode-regex`, `babel-plugin-transform-unicode-sets-regex`, `babel-preset-env`, `babel-preset-flow`, `babel-preset-react`, `babel-preset-typescript` - [#16332](babel/babel#16332) Test Babel 7 plugins compatibility with Babel 8 core ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-compat-data`, `babel-plugin-transform-object-rest-spread`, `babel-preset-env` - [#16318](babel/babel#16318) \[babel 8] Fix `@babel/compat-data` package.json ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 🔬 Output optimization - `babel-helper-replace-supers`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes`, `babel-plugin-transform-parameters`, `babel-plugin-transform-runtime` - [#16345](babel/babel#16345) Optimize the use of `assertThisInitialized` after `super()` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes` - [#16343](babel/babel#16343) Use simpler `assertThisInitialized` more often ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-object-rest-spread`, `babel-traverse` - [#16342](babel/babel#16342) Consider well-known and registered symbols as literals ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-core`, `babel-plugin-external-helpers`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-function-bind`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes`, `babel-plugin-transform-flow-comments`, `babel-plugin-transform-flow-strip-types`, `babel-plugin-transform-function-name`, `babel-plugin-transform-modules-systemjs`, `babel-plugin-transform-parameters`, `babel-plugin-transform-private-property-in-object`, `babel-plugin-transform-react-jsx`, `babel-plugin-transform-runtime`, `babel-plugin-transform-spread`, `babel-plugin-transform-typescript`, `babel-preset-env` - [#16326](babel/babel#16326) Reduce the use of class names ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) ### [`v7.24.0`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7240-2024-02-28) [Compare Source](babel/babel@v7.23.9...v7.24.0) ##### 🚀 New Feature - `babel-standalone` - [#11696](babel/babel#11696) Export babel tooling packages in `@babel/standalone` ([@ajihyf](https://github.com/ajihyf)) - `babel-core`, `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-transform-class-properties` - [#16267](babel/babel#16267) Implement `noUninitializedPrivateFieldAccess` assumption ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-syntax-decorators`, `babel-plugin-transform-class-properties`, `babel-runtime-corejs2`, `babel-runtime-corejs3`, `babel-runtime` - [#16242](babel/babel#16242) Support decorator 2023-11 normative updates ([@JLHwung](https://github.com/JLHwung)) - `babel-preset-flow` - [#16309](babel/babel#16309) \[babel 7] Allow setting `ignoreExtensions` in Flow preset ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - [#16284](babel/babel#16284) Add `experimental_useHermesParser` option in `preset-flow` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-import-to-platform-api`, `babel-plugin-proposal-import-wasm-source`, `babel-plugin-proposal-json-modules`, `babel-standalone` - [#16172](babel/babel#16172) Add transform support for JSON modules imports ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-plugin-transform-runtime` - [#16241](babel/babel#16241) Add back `moduleName` option to `@babel/plugin-transform-runtime` ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-parser`, `babel-types` - [#16277](babel/babel#16277) Allow import attributes for `TSImportType` ([@sosukesuzuki](https://github.com/sosukesuzuki)) ##### 🐛 Bug Fix - `babel-plugin-proposal-do-expressions`, `babel-traverse` - [#16305](babel/babel#16305) fix: avoid `popContext` on unvisited node paths ([@JLHwung](https://github.com/JLHwung)) - `babel-helper-create-class-features-plugin`, `babel-plugin-transform-private-methods`, `babel-plugin-transform-private-property-in-object` - [#16312](babel/babel#16312) Fix class private properties when `privateFieldsAsSymbols` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-plugin-transform-private-methods` - [#16307](babel/babel#16307) Fix the support of `arguments` in private `get/set` method ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-proposal-decorators` - [#16287](babel/babel#16287) Reduce decorator static property size ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators` - [#16281](babel/babel#16281) Fix evaluation order of decorators with cached receiver ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - [#16279](babel/babel#16279) Fix decorator this memoization ([@JLHwung](https://github.com/JLHwung)) - [#16266](babel/babel#16266) Preserve `static` on decorated private `accessor` ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - [#16258](babel/babel#16258) fix: handle decorated async private method and generator ([@JLHwung](https://github.com/JLHwung)) - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators`, `babel-plugin-transform-async-generator-functions`, `babel-plugin-transform-private-methods`, `babel-plugin-transform-private-property-in-object`, `babel-plugin-transform-typescript`, `babel-preset-env` - [#16275](babel/babel#16275) Fix class private properties when `privateFieldsAsProperties` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helpers` - [#16268](babel/babel#16268) Do not consider `arguments` in a helper as a global reference ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helpers`, `babel-plugin-proposal-decorators` - [#16270](babel/babel#16270) Handle symbol key class elements decoration ([@JLHwung](https://github.com/JLHwung)) - [#16265](babel/babel#16265) Do not define `access.get` for public setter decorators ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 💅 Polish - `babel-core`, `babel-helper-create-class-features-plugin`, `babel-preset-env` - [#12428](babel/babel#12428) Suggest using `BABEL_SHOW_CONFIG_FOR` for config problems ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 🏠 Internal - `babel-helper-transform-fixture-test-runner` - [#16278](babel/babel#16278) Continue writing `output.js` when `exec.js` throws ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) ##### 🔬 Output optimization - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators` - [#16306](babel/babel#16306) Avoid intermediate functions for private accessors with decs ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-transform-class-properties` - [#16294](babel/babel#16294) More aggressively inline decorators in the static block ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-transform-private-methods` - [#16283](babel/babel#16283) Do not use `classPrivateMethodGet` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-helpers`, `babel-plugin-proposal-decorators` - [#16287](babel/babel#16287) Reduce decorator static property size ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties` - [#16280](babel/babel#16280) Reduce element decorator temp variables ([@JLHwung](https://github.com/JLHwung)) - `babel-helper-create-class-features-plugin`, `babel-helper-fixtures`, `babel-helpers`, `babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-destructuring-private`, `babel-plugin-proposal-optional-chaining-assign`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-class-static-block`, `babel-plugin-transform-private-methods`, `babel-plugin-transform-private-property-in-object`, `babel-preset-env`, `babel-runtime-corejs2`, `babel-runtime-corejs3`, `babel-runtime` - [#16261](babel/babel#16261) Do not use descriptors for private class elements ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) - `babel-helpers`, `babel-plugin-proposal-decorators` - [#16263](babel/babel#16263) Reduce helper size for decorator 2023-11 ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.vylpes.xyz/RabbitLabs/random-bunny/pulls/156 Co-authored-by: Renovate Bot <renovate@vylpes.com> Co-committed-by: Renovate Bot <renovate@vylpes.com>

nicolo-ribaudo added 2 commits March 16, 2024 21:30

Replace chalk with picocolors

ede3374

Remove chalk workarounds fro babel.config.js

8f7ea7d

nicolo-ribaudo added the PR: Internal 🏠 A type of pull request used for our changelog categories label Mar 16, 2024

liuxingbaoyu approved these changes Mar 17, 2024

View reviewed changes

fisker approved these changes Mar 17, 2024

View reviewed changes

JLHwung approved these changes Mar 17, 2024

View reviewed changes

nicolo-ribaudo merged commit f356584 into babel:main Mar 19, 2024
50 of 51 checks passed

nicolo-ribaudo deleted the chalk-to-picocolors branch March 19, 2024 09:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace `chalk` with `picocolors` #16359

Replace `chalk` with `picocolors` #16359

nicolo-ribaudo commented Mar 16, 2024

babel-bot commented Mar 16, 2024

nicolo-ribaudo commented Mar 17, 2024

nicolo-ribaudo commented Mar 19, 2024

nicolo-ribaudo commented Mar 19, 2024

SimenB commented Mar 19, 2024

Replace chalk with picocolors #16359

Replace chalk with picocolors #16359

Conversation

nicolo-ribaudo commented Mar 16, 2024

babel-bot commented Mar 16, 2024

nicolo-ribaudo commented Mar 17, 2024

nicolo-ribaudo commented Mar 19, 2024

nicolo-ribaudo commented Mar 19, 2024

SimenB commented Mar 19, 2024

Replace `chalk` with `picocolors` #16359

Replace `chalk` with `picocolors` #16359