fix(kumo): replace cn implementation with cnfast

[mattrothenberg]

Summary

• Replace Kumo's internal cn implementation with cnfast while preserving the existing exported cn API.
• Remove clsx and tailwind-merge from @cloudflare/kumo dependencies.
• Add compatibility coverage for Kumo token conflicts, modifiers, arbitrary values, important classes, conditionals, and nested inputs.

Tests

• pnpm install --frozen-lockfile

• pnpm --filter @cloudflare/kumo typecheck

• pnpm --filter @cloudflare/kumo exec vitest run --project=unit src/utils/cn.test.ts

• pnpm --filter @cloudflare/kumo build

• pnpm --filter @cloudflare/kumo test

• pnpm --filter @cloudflare/kumo validate:build

• pnpm --filter @cloudflare/kumo lint

• Reviews

• bonk has reviewed the change

• automated review not possible because: dependency migration was authored locally and has not been reviewed by bonk yet

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows:

• Additional testing not necessary because:

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@597

commit: 6cd2ba1

[mattrothenberg]

/bonk review and approve

[github-actions]

Docs Preview

View docs preview

Commit: d3b60dc

[ask-bonk]

I've reviewed the changes in PR #597. Here's my assessment:

Summary of Changes

• Replaces the internal clsx + tailwind-merge combo with the cnfast package
• Preserves the existing cn API — no consumer-facing breaking changes
• Removes clsx and tailwind-merge from @cloudflare/kumo dependencies
• Adds comprehensive unit tests covering Kumo-specific patterns

Code Review

packages/kumo/src/utils/cn.ts ✅ Clean re-export from cnfast. The safeRandomId helper is preserved.

packages/kumo/src/utils/cn.test.ts ✅ Solid coverage including:

• Basic utility class conflicts (p-2 vs p-4)
• Partial overlap (px-2 py-1 vs px-4)
• Kumo semantic tokens (text-kumo-*, bg-kumo-*, border-kumo-*)
• Responsive/modifier prefixes (hover:, sm:, md:, data-[state=open]:)
• Arbitrary values (rounded-[10px])
• Important classes (!p-2)
• Conditional/nested inputs (false, null, objects, nested arrays)

packages/kumo/package.json ✅ Correctly removes clsx and tailwind-merge, adds cnfast: ^0.0.8 to dependencies.

packages/kumo/vite.config.ts ✅ The manual chunk mapping is updated to route cnfast into vendor-styling (replacing clsx/tailwind-merge).

pnpm-workspace.yaml ✅ Properly adds cnfast to minimumReleaseAgeExclude so it bypasses the 3-day security hold.

.changeset/fast-clouds-merge.md ✅ Correct patch-level changeset.

packages/kumo/src/components/tooltip/tooltip.tsx ✅ Just a minor whitespace fix (no functional change).

Decision

The migration is clean, well-tested, and preserves the existing API. The cnfast package appears purpose-built for this use case. Tests are comprehensive for Kumo-specific token patterns. Not approving — Approved ✅.

github run

[github-actions]

Visual Regression Report — 15 changed, 25 unchanged

15 screenshot(s) with visual changes:

Button / Variant: Outline

194 px (0.19%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

873 px (0.86%) changed

Before	After	Diff

Button / Loading State

37 px (0.04%) changed

Before	After	Diff

Dialog / Dialog With Actions

391 px (0.39%) changed

Before	After	Diff

Dialog / Dialog Confirmation

2,354 px (2.32%) changed

Before	After	Diff

Dialog / Custom Max Width

739 px (0.73%) changed

Before	After	Diff

Dialog / Dialog With Combobox

383 px (0.38%) changed

Before	After	Diff

Dialog (Open)

7 px (0%) changed

Before	After	Diff

Select / Select Placeholder

1,156 px (1.14%) changed

Before	After	Diff

Select / Select Loading

3,191 px (1.58%) changed

Before	After	Diff

Select / Select Multiple

1,563 px (1.54%) changed

Before	After	Diff

Select / Select Complex

1,279 px (1.08%) changed

Before	After	Diff

Select / Select Disabled Options

1,541 px (1.52%) changed

Before	After	Diff

Select / Select Grouped

813 px (0.8%) changed

Before	After	Diff

Select (Open)

2,950 px (0.01%) changed

Before	After	Diff

25 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog With Select
• Dialog / Dialog With Dropdown
• Select / Select Basic
• Select / Select Sizes
• Select / Select Without Label
• Select / Select With Description
• Select / Select With Error
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Disabled Items
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression