fix(kumo): replace cn implementation with cnfast (#597)

Author: mattrothenberg

.changeset/fast-clouds-merge.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Replace the internal class merging implementation with cnfast.

packages/kumo/package.json

@@ -472,11 +472,10 @@
     "@base-ui/react": "^1.6.0",
     "@shikijs/langs": "^4.0.0",
     "@shikijs/themes": "^4.0.0",
-    "clsx": "^2.1.1",
+    "cnfast": "^0.0.8",
     "motion": "^12.34.1",
     "react-day-picker": "^9.13.2",
-    "shiki": "^4.0.0",
-    "tailwind-merge": "^3.4.0"
+    "shiki": "^4.0.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "catalog:",

packages/kumo/src/components/tooltip/tooltip.tsx

@@ -169,7 +169,7 @@ export function Tooltip({
         className={cn(
           // Defensive resets when rendering as button wrapper (not render/asChild)
           // These prevent global button styles from polluting the trigger
-          // Consumer styles passed via className will override these (tailwind-merge)
+          // Consumer styles passed via className will override these.
           !shouldUseRender &&
             "inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]",
           // Tooltip triggers are disclosure elements, not actions — override

packages/kumo/src/utils/cn.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import { cn } from "./cn";
+
+describe("cn", () => {
+  it.each([
+    [["p-2", "p-4"], "p-4"],
+    [["px-2 py-1", "px-4"], "py-1 px-4"],
+    [["text-kumo-default", "text-kumo-subtle"], "text-kumo-subtle"],
+    [["bg-kumo-base", "bg-kumo-elevated"], "bg-kumo-elevated"],
+    [["border-kumo-line", "border-kumo-strong"], "border-kumo-strong"],
+    [["hover:bg-kumo-base", "hover:bg-kumo-elevated"], "hover:bg-kumo-elevated"],
+    [["sm:p-2", "sm:p-4", "md:p-6"], "sm:p-4 md:p-6"],
+    [
+      ["data-[state=open]:bg-kumo-base", "data-[state=open]:bg-kumo-elevated"],
+      "data-[state=open]:bg-kumo-elevated",
+    ],
+    [["rounded-[10px]", "rounded-[12px]"], "rounded-[12px]"],
+    [["!p-2", "p-4"], "!p-2 p-4"],
+    [["p-2", "!p-4"], "p-2 !p-4"],
+    [["base", false, null, undefined, { active: true, disabled: false }], "base active"],
+    [[["flex", ["gap-2", "gap-4"]]], "flex gap-4"],
+  ])("merges classes without changing expected output for case %#", (inputs, expected) => {
+    expect(cn(...inputs)).toBe(expected);
+  });
+});

packages/kumo/src/utils/cn.ts

@@ -1,9 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export { cn } from "cnfast";
 
 const toHex = (n: number) => n.toString(16).padStart(2, "0");
 

packages/kumo/vite.config.ts

@@ -301,8 +301,8 @@ export default defineConfig(({ mode }) => {
           manualChunks: (id) => {
             // Vendor chunks for large dependencies
             if (id.includes("node_modules")) {
-              // clsx + tailwind-merge utilities
-              if (id.includes("clsx") || id.includes("tailwind-merge")) {
+              // Class merging utilities
+              if (id.includes("cnfast")) {
                 return "vendor-styling";
               }
               // Floating UI positioning libraries