Skip to content

CLI: Replace chalk with util.styleText wrapper - #3106

Merged
bcotrim merged 2 commits into
trunkfrom
stu-1472-replace-chalk-with-styletext
Apr 17, 2026
Merged

CLI: Replace chalk with util.styleText wrapper#3106
bcotrim merged 2 commits into
trunkfrom
stu-1472-replace-chalk-with-styletext

Conversation

@bcotrim

@bcotrim bcotrim commented Apr 15, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

Claude Code drafted the wrapper, tests, and call-site updates. I reviewed the generated code (including a self-review pass that caught a color-depth detection bug in the hex path) and verified behavior manually with FORCE_COLOR=1/3 and NO_COLOR=1.

Proposed Changes

Drops the chalk dependency from apps/cli in favor of Node's built-in util.styleText (Node 20+), as suggested on e18e.dev. Since Studio's CLI requires Node ≥22, styleText is fully available.

  • Adds tools/common/lib/chalk.ts: a thin Proxy-based wrapper that exposes a chalk-compatible surface (named styles, chained access like chalk.bold.red, aliased leaves, chalk.hex(...) / chalk.bgHex(...)) backed by util.styleText. Hex colors use raw 24-bit ANSI escapes since styleText doesn't support them, gated on process.stdout.getColorDepth() so terminals without truecolor degrade cleanly. Honors NO_COLOR / FORCE_COLOR / TTY detection.
  • Adds tools/common/lib/tests/chalk.test.ts: 7 unit tests covering named, chained, aliased, nested, hex fg, hex bg + named, and truecolor stripping.
  • Swaps import chalk from 'chalk'import chalk from '@studio/common/lib/chalk' across the 6 files in apps/cli that use it. No call-site logic changed.
  • Removes chalk from apps/cli/package.json.

Not included

tools/benchmark-site-editor and tools/compare-perf still depend on chalk. They're standalone dev tools (not bundled into the shipped CLI or desktop app), run via ts-node, and have their own tsconfigs that don't resolve the shared wrapper cleanly. I attempted the migration but rolled it back since there's no user-visible benefit and the type resolution was fiddly. Leaving them as-is.

Testing Instructions

  1. Pull the branch and run npm install (chalk will be removed from apps/cli).
  2. Build the CLI: npm run cli:build
  3. Run the wrapper unit tests: npx vitest run tools/common/lib/tests/chalk.test.ts → should show 7 passed.
  4. Smoke test in a real terminal:
    • Launch node apps/cli/dist/cli/main.mjs code and verify the AI chat TUI renders with colors (this exercises the largest chalk surface — apps/cli/ai/ui.ts).
    • Trigger the update notifier banner and verify the yellow border + colored version numbers render correctly.
    • Run studio code sessions (or equivalent) to verify the session list styling.
  5. Verify env var handling:
    • NO_COLOR=1 node apps/cli/dist/cli/main.mjs <cmd> → no ANSI escapes in output.
    • FORCE_COLOR=3 node apps/cli/dist/cli/main.mjs <cmd> | cat → full truecolor escapes emitted even though stdout is piped.
    • Piping to a file should emit no escapes by default (non-TTY).
  6. Cross-platform: please verify on Windows (cmd, PowerShell, Windows Terminal) that colors render — especially the hex/bgHex paths in the AI chat TUI banner.

Verified locally

  • npm run cli:build clean
  • apps/cli typecheck: no new errors
  • ✅ Unit tests: 7/7 passing
  • FORCE_COLOR=3 + NO_COLOR=1 behavior matches chalk

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
  • Does the CLI build cleanly (`npm run cli:build`)?
  • Have you tested on macOS and Windows?
  • Have you added or updated tests where appropriate?
@bcotrim bcotrim self-assigned this Apr 15, 2026
@bcotrim
bcotrim requested a review from a team April 15, 2026 21:04
@wpmobilebot

wpmobilebot commented Apr 15, 2026

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing f013c03 vs trunk

app-size

Metric trunk f013c03 Diff Change
App Size (Mac) 1283.06 MB 1283.07 MB +0.02 MB ⚪ 0.0%

site-editor

Metric trunk f013c03 Diff Change
load 1597 ms 1917 ms +320 ms 🔴 20.0%

site-startup

Metric trunk f013c03 Diff Change
siteCreation 8114 ms 8138 ms +24 ms ⚪ 0.0%
siteStartup 4940 ms 4955 ms +15 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@gcsecsey gcsecsey left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @bcotrim for working on this, changes LGTM and work well.

The chalk dependency is now removed:

Before After
Image Image

And the color behavior also works as described:

Flag Output
none Image
NO_COLOR=1 Image
FORCE_COLOR=3 Image
@bcotrim

bcotrim commented Apr 17, 2026

Copy link
Copy Markdown
Contributor Author

@gcsecsey thanks for the review, nice catch on the npm ls! 🙌
I couldn't find any usage of chalk in the pi-tui dependency, so I patched it. Our CLI bundle should not include chalk at all now.

Would you mind doing another review, just to be extra safe?

@gcsecsey gcsecsey left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for following up on it and patching pi-tui @bcotrim!

With these changes, the installation and the CLI colors still work well. 👍

Image
@bcotrim
bcotrim merged commit c88b0dc into trunk Apr 17, 2026
10 checks passed
@bcotrim
bcotrim deleted the stu-1472-replace-chalk-with-styletext branch April 17, 2026 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants