fix(packages): adopt cn for class name merging

apps/sandbox/package.json

@@ -34,8 +34,7 @@
     "@videojs/vimeo-video": "workspace:*",
     "@videojs/wistia-video": "workspace:*",
     "@videojs/youtube-video": "workspace:*",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.5.0"
+    "cn": "^0.2.5"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",

apps/sandbox/scripts/sync-source-owned-skins.ts

@@ -132,9 +132,8 @@ async function writeFixture(root: string, address: string, alias: string): Promi
       '@videojs/core': '*',
       '@videojs/html': '10.0.0-beta.32',
       '@videojs/react': '10.0.0-beta.32',
-      clsx: '*',
+      cn: '*',
       react: '*',
-      'tailwind-merge': '*',
     },
   };
   const components = {
@@ -179,10 +178,7 @@ async function writeFixture(root: string, address: string, alias: string): Promi
   await writeFile(resolve(root, 'components.json'), `${JSON.stringify(components, null, 2)}\n`);
   await writeFile(resolve(root, 'tsconfig.json'), `${JSON.stringify(tsconfig, null, 2)}\n`);
   await writeFile(resolve(root, 'src/index.css'), '@import "./components/videojs/styles/theme.css";\n');
-  await writeFile(
-    resolve(root, 'src/lib/utils.ts'),
-    `import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n`
-  );
+  await writeFile(resolve(root, 'src/lib/utils.ts'), "export { cn } from 'cn';\n");
 }
 
 async function runCommand(

packages/skins/build/packages/react.ts

@@ -173,7 +173,7 @@ function collectSharedSourcePaths(skins: readonly SkinRoot[]): ReadonlySet<strin
 }
 
 function reactFrameworkImport(specifier: string): string | undefined {
-  if (specifier === '@videojs/react' || radioGroupImports.has(specifier) || specifier === 'clsx') {
+  if (specifier === '@videojs/react' || radioGroupImports.has(specifier) || specifier === 'cn') {
     return `${packageRoot}/internal/skin-primitives.ts`;
   }
 

packages/skins/build/target/react.tsx

@@ -139,7 +139,7 @@ export const reactComponentTarget: ComponentTarget<CoreSchema> = defineComponent
       },
     },
     types: {
-      ClassNameValue: { from: 'clsx', name: 'ClassValue' },
+      ClassNameValue: { from: 'cn', name: 'ClassValue' },
       PropsOf: { from: 'react', name: 'ComponentProps' },
       VjscNode: { from: 'react', name: 'ReactNode' },
       VjscElement: { from: 'react', name: 'ReactElement' },

packages/skins/package.json

@@ -33,7 +33,7 @@
     "@videojs/icons": "workspace:*",
     "@videojs/utils": "workspace:*",
     "@vitejs/plugin-react": "^6.0.4",
-    "clsx": "^2.1.1",
+    "cn": "^0.2.5",
     "dashjs": "^5.2.0",
     "hls.js": "^1.6.7",
     "mux-embed": "5.17.10",

packages/skins/src/utils.ts

@@ -1,4 +1,4 @@
-import type { ClassValue } from 'clsx';
+import type { ClassValue } from 'cn';
 
 export { cn } from '@videojs/utils/style';
 

packages/vjsc/package.json

@@ -87,13 +87,13 @@
     "@oxc-project/types": "0.146.0",
     "@tailwindcss/node": "4.2.1",
     "@videojs/utils": "workspace:*",
+    "cn": "^0.2.5",
     "lightningcss": "^1.32.0",
     "magic-string": "^1.2.2",
     "oxc-parser": "0.146.0",
     "oxc-walker": "^1.1.1",
     "rolldown": "~1.2.5",
     "shadcn": "^4.16.2",
-    "tailwind-merge": "^3.5.0",
     "tailwindcss": "4.2.1"
   },
   "devDependencies": {

packages/vjsc/src/styles/resolved.ts

@@ -2,8 +2,8 @@ import { realpath } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { twMerge } from 'cn';
 import { type OutputChunk, rolldown } from 'rolldown';
-import { twMerge } from 'tailwind-merge';
 
 import { toArray } from '../utils/array';
 import { splitClassNames } from './class-names';