feat(react): add Tailwind v4 compiled CSS for skins with vjs prefix (#114)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Darius Cepulis <dcepulis@mux.com>

website/package.json

@@ -3,9 +3,8 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "compile-vjs-styles": "node scripts/compile-vjs-styles.js",
-    "dev": "npm run compile-vjs-styles && astro dev",
-    "build": "npm run compile-vjs-styles && astro build",
+    "dev": " astro dev",
+    "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
     "test": "vitest run",
@@ -43,7 +42,6 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "^4.1.14",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -54,9 +52,6 @@
     "@vitest/ui": "^3.2.4",
     "babel-plugin-react-compiler": "1.0.0",
     "jsdom": "^27.0.0",
-    "postcss": "^8.4.49",
-    "postcss-nested": "^7.0.2",
-    "postcss-prefix-selector": "^1.16.1",
     "vitest": "^3.2.4"
   }
 }

website/scripts/compile-vjs-styles.js

@@ -1,71 +0,0 @@
-#!/usr/bin/env node
-
-import { execSync } from 'node:child_process';
-import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import process from 'node:process';
-import { fileURLToPath } from 'node:url';
-import postcss from 'postcss';
-import nested from 'postcss-nested';
-import prefixSelector from 'postcss-prefix-selector';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const rootDir = join(__dirname, '..');
-
-const inputFile = 'src/styles/vjs-input.css';
-const tempFile = 'src/styles/vjs-temp.css';
-const outputFile = 'src/styles/vjs.css';
-
-console.log('🎨 Compiling VJS styles...');
-
-try {
-  // Step 1: Run Tailwind CLI
-  console.log('  → Running Tailwind CSS compiler...');
-  execSync(
-    `npx @tailwindcss/cli -i ${inputFile} -o ${tempFile}`,
-    { cwd: rootDir, stdio: 'inherit' },
-  );
-
-  // Step 2: Read compiled CSS
-  const tempPath = join(rootDir, tempFile);
-  const css = readFileSync(tempPath, 'utf-8');
-
-  // Step 3: Post-process with PostCSS to scope selectors
-  console.log('  → Scoping selectors to .vjs...');
-  const result = await postcss([
-    nested(),
-    prefixSelector({
-      prefix: '.vjs',
-      transform(prefix, selector, prefixedSelector) {
-        // this is supposed to happen automatically, but isn't... idk
-        if (selector === 'body' || selector === 'html' || selector === ':root') {
-          return prefix;
-        } else if (selector === ':host') {
-          return selector;
-        } else {
-          return prefixedSelector;
-        }
-      },
-    }),
-  ]).process(css, { from: tempFile, to: outputFile });
-
-  // Step 3.5: For reasons I don't fully understand, we're getting duplicate .vjs classes
-  //           e.g., .vjs .vjs or .vjs .vjs .vjs
-  //           let's just regex them to oblivion
-  result.css = result.css.replace(/(\.vjs\s+)+/g, '.vjs ');
-
-  // Step 4: Write output
-  const outputPath = join(rootDir, outputFile);
-  writeFileSync(outputPath, result.css, 'utf-8');
-
-  // Step 5: Clean up temp file
-  if (existsSync(tempPath)) {
-    unlinkSync(tempPath);
-  }
-
-  console.log(`✅ VJS styles compiled to ${outputFile}`);
-} catch (error) {
-  console.error('❌ Failed to compile VJS styles:', error.message);
-  process.exit(1);
-}

website/src/components/home/HeroVideo.tsx

@@ -2,7 +2,8 @@ import { useStore } from '@nanostores/react';
 import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@vjs-10/react';
 import { skin } from '@/stores/homePageDemos';
 import { PLAYBACK_ID } from './config';
-import '@/styles/vjs.css';
+import '@vjs-10/react/skins/frosted.css';
+import '@vjs-10/react/skins/minimal.css';
 
 export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
   // Subscribe to skin store for future skin switching functionality

website/src/styles/vjs-input.css

@@ -1,11 +0,0 @@
-@import 'tailwindcss';
-
-@source "../../../packages/react";
-
-/* theme inline tells tailwind to reference the value of these properties */
-@theme inline {
-  --font-*: initial;
-  /* --font-instrument-sans and --font-ibm-plex-mono are defined in Base.astro */
-  --font-sans: var(--font-instrument-sans);
-  --font-mono: var(--font-ibm-plex-mono);
-}