From bc8adaa508802e9db95953e32963fe0e88107acf Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Wed, 13 Aug 2025 12:28:29 -0700
Subject: [PATCH] feat(react): enable automatic CSS injection for
 MediaSkinDefault component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Configure rollup to inject CSS directly into JavaScript bundles instead of extracting to separate files
- Remove CSS export from package.json as styles are now auto-included
- Update react-demo to remove manual CSS import requirement
- Enable seamless component usage: import { MediaSkinDefault } from '@vjs-10/react' now automatically includes styles

This provides the expected developer experience for React component libraries where
importing a component automatically brings its required styles without manual CSS imports.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 examples/react-demo/src/main.tsx      | 1 -
 packages/react/react/package.json     | 3 +--
 packages/react/react/rollup.config.js | 8 +++++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx
index e01e5a6d..bf2b2b85 100644
--- a/examples/react-demo/src/main.tsx
+++ b/examples/react-demo/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { MediaProvider, Video, MediaSkinDefault } from '@vjs-10/react';
-import '@vjs-10/react/style.css';
 
 const DemoPlayer = () => {
   return (
diff --git a/packages/react/react/package.json b/packages/react/react/package.json
index 69690db6..326e53be 100644
--- a/packages/react/react/package.json
+++ b/packages/react/react/package.json
@@ -10,8 +10,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    },
-    "./style.css": "./dist/index.css"
+    }
   },
   "files": [
     "dist"
diff --git a/packages/react/react/rollup.config.js b/packages/react/react/rollup.config.js
index cf1cca0b..8963d658 100644
--- a/packages/react/react/rollup.config.js
+++ b/packages/react/react/rollup.config.js
@@ -26,10 +26,10 @@ module.exports = [
       commonjs(),
       postcss({
         modules: true,
-        extract: 'index.css',
+        extract: false, // Don't extract CSS to separate file
+        inject: true,   // Inject CSS into JS bundle
         minimize: false,
         sourceMap: true,
-        inject: false, // Don't inject CSS, extract it
       }),
       typescript({
         tsconfig: 'tsconfig.json',
@@ -60,8 +60,10 @@ module.exports = [
       commonjs(),
       postcss({
         modules: true,
-        extract: false, // Don't extract CSS for CJS build to avoid conflicts
+        extract: false, // Don't extract CSS for CJS build
+        inject: true,   // Inject CSS into JS bundle
         minimize: false,
+        sourceMap: true,
       }),
       typescript({
         tsconfig: 'tsconfig.json',