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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants