fix(packages): adopt cn for class name merging - #2641
Merged
Conversation
…try skins Shadcn's `utils` registry item for Tailwind v4 projects now re-exports `cn` from the new `cn` package. The install fixture's `--overwrite` let that item replace the fixture helper, and the Sandbox copied it without installing the package, so Vite failed to resolve `cn` and the sandbox build broke. Write the helper built from `clsx` and `tailwind-merge` again before copying the installed lib. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for vjs-registry ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
@videojs/cdn
@videojs/core
@videojs/element
@videojs/html
@videojs/media
@videojs/react
@videojs/spf
@videojs/store
@videojs/utils
@videojs/cloudflare-video
@videojs/dash-video
@videojs/hlsjs-video
@videojs/mux-audio
@videojs/mux-video
@videojs/native-hls-video
@videojs/shaka-video
@videojs/spotify-audio
@videojs/tiktok-video
@videojs/twitch-video
@videojs/vimeo-video
@videojs/wistia-video
@videojs/youtube-video
@videojs/google-cast
@videojs/mux-data
commit: |
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (18)
Players (5)
Skins (29)
UI Components (62)
⚛️ @videojs/react — no changesPresets (7)
Media (22)
Extensions (2)
Players (5)
Skins (18)
UI Components (39)
🧩 @videojs/core — no changesEntries (76)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (13)
📦 @videojs/cdn — no changes📦 @videojs/cloudflare-video — no changes📦 @videojs/dash-video — no changes📦 @videojs/google-cast — no changes📦 @videojs/hlsjs-video — no changes📦 @videojs/media — no changesEntries (3)
📦 @videojs/mux — no changes📦 @videojs/mux-audio — no changesEntries (2)
📦 @videojs/mux-data — no changes📦 @videojs/mux-video — no changesEntries (2)
📦 @videojs/native-hls-video — no changes📦 @videojs/shaka-video — no changes📦 @videojs/spf — no changesEntries (7)
📦 @videojs/spotify-audio — no changes📦 @videojs/tiktok-video — no changes📦 @videojs/twitch-video — no changes📦 @videojs/vimeo-video — no changes📦 @videojs/wistia-video — no changesEntries (2)
📦 @videojs/youtube-video — no changesℹ️ How to interpretEach entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately. Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles. Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded. Run |
…stall Shadcn's `utils` registry item now re-exports `cn` from the `cn` package, so the registry skins pull that package in. Emit `ClassValue` from `cn` instead of `clsx` in the React registry items, merge utilities with `cn`'s `twMerge` in vjsc, and give the Sandbox the `cn` dependency the installed helper needs instead of rewriting it after `shadcn add`.
mihar-22
changed the title
mihar-22
changed the title
sampotts
approved these changes
Sep 7, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Sandbox build broke because Shadcn's
utilsregistry item now shipsexport { cn } from "cn", and the Sandbox copied that helper without thecnpackage. Rather than keep a privateclsx+tailwind-mergehelper, this adoptscnas the class-merging engine across the registry, the compiler, and the Sandbox.Changes
ClassValuefromcn, so consumers only need the package Shadcn already installs for@/lib/utils;clsxdrops out of every item's dependency listcn'stwMerge; the emitted registry output is byte-identical to thetailwind-mergebuildcnand installs the registry skins with Shadcn's own helper instead of rewritinglib/utils.tsaftershadcn addclsxandtailwind-mergeare removed from@videojs/skins,vjsc, and the Sandbox; the site keeps its own themedtwMergefor nowcnis pinned to^0.2.5because the workspace's 24-hourminimumReleaseAgestill blocks0.2.6.Why it looked green elsewhere
The Sandbox
setuptask is cached on its scripts, templates, and the built registry. Branches that touch none of those restore the pre-cngenerated tree and never run the CLI, which is why CI and most Vercel deploys still passed. Any skins, template, or sandbox-script change busts that cache and hits the failure, as PR #2640 did.Testing
pnpm build:sandboxpasses; both generatedlib/utils.tsfiles areexport { cn } from "cn"and no generated file importsclsxcn'stwMergehashes identically to thetailwind-mergebuild across all React and HTML itemspnpm -F vjsc test,pnpm -F @videojs/skins test,pnpm -F @videojs/sandbox test,pnpm typecheckNote
Medium Risk
Touches style compilation (
twMergein vjsc) and generated registry/Sandbox install paths; behavior is intended to stay equivalent to the prior merge stack.Overview
Replaces the
clsx+tailwind-mergestack with thecnpackage in the Sandbox,@videojs/skins, andvjsc, matching current Shadcn registry@/lib/utils(export { cn } from "cn").The Sandbox sync fixture now depends on
cnand seedssrc/lib/utils.tswith that re-export instead of generating a localtwMerge(clsx(...))helper. Registry React build wiring treatscnlike the oldclsximport (primitives bundling,ClassNameValuetyped fromcn).vjscmerges authored utility groups viatwMergefromcnrather thantailwind-merge.packages/skins/src/utils.tssourcesClassValuefromcnwhile still re-exporting runtimecnfrom@videojs/utils/style.Reviewed by Cursor Bugbot for commit 1bfa7c3. Bugbot is set up for automated code reviews on this repo. Configure here.