fix(html): remove redundant CDN CSS files and inline background skin styles (#1071)

packages/html/package.json

@@ -93,7 +93,7 @@
   },
   "scripts": {
     "build": "tsdown",
-    "build:cdn": "tsdown --config tsdown.cdn.config.ts && node scripts/cdn-copy-css.js",
+    "build:cdn": "tsdown --config tsdown.cdn.config.ts",
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
     "test": "vitest run",

packages/html/scripts/cdn-copy-css.js

@@ -1,29 +0,0 @@
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { transform } from 'lightningcss';
-
-const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const htmlDist = resolve(root, 'dist/default/define');
-const outDir = resolve(root, 'cdn');
-
-const cssFiles = [
-  { src: 'video/skin.css', dest: 'video.css' },
-  { src: 'video/minimal-skin.css', dest: 'video-minimal.css' },
-  { src: 'audio/skin.css', dest: 'audio.css' },
-  { src: 'audio/minimal-skin.css', dest: 'audio-minimal.css' },
-  { src: 'background/skin.css', dest: 'background.css' },
-];
-
-for (const { src, dest } of cssFiles) {
-  const srcPath = resolve(htmlDist, src);
-  const destPath = resolve(outDir, dest);
-  const raw = readFileSync(srcPath);
-
-  const { code } = transform({ filename: srcPath, code: raw, minify: true });
-
-  mkdirSync(dirname(destPath), { recursive: true });
-  writeFileSync(destPath, code);
-
-  console.log(`  ${dest} (${raw.length} → ${code.length})`);
-}

packages/html/src/define/background/skin.ts

@@ -1,6 +1,17 @@
 import { ReactiveElement } from '@videojs/element';
 import { namedNodeMapToObject } from '@videojs/utils/dom';
 import { safeDefine } from '../safe-define';
+import styles from './skin.css?inline';
+
+const STYLES_ID = '__media-background-styles';
+
+function ensureBackgroundStyles(): void {
+  if (document.getElementById(STYLES_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLES_ID;
+  style.textContent = styles;
+  document.head.appendChild(style);
+}
 
 function getTemplateHTML(_attrs: Record<string, string>) {
   return /*html*/ `
@@ -20,6 +31,8 @@ export class BackgroundVideoSkinElement extends ReactiveElement {
   constructor() {
     super();
 
+    ensureBackgroundStyles();
+
     if (!this.shadowRoot) {
       this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);
       this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));

packages/sandbox/templates/cdn/main.ts

@@ -33,7 +33,6 @@ async function loadCdnPreset(preset: Preset, skin: Skin) {
       else await import('@videojs/html/cdn/audio');
       break;
     case 'background-video':
-      await import('@videojs/html/background/skin.css');
       await import('@videojs/html/cdn/background');
       break;
   }

packages/sandbox/templates/html-background-video/main.ts

@@ -1,5 +1,4 @@
 import '@app/styles.css';
-import '@videojs/html/background/skin.css';
 import '@videojs/html/background/player';
 import '@videojs/html/background/skin';
 import '@videojs/html/background/video';

site/src/components/home/Demo/baseCode.ts

@@ -8,7 +8,6 @@ export function generateHTMLCode(skin: Skin): string {
   const cdnFile = skin === 'default' ? 'video' : 'video-minimal';
 
   return `<script type="module" src="${CDN_BASE}/${cdnFile}.js"></script>
-<link rel="stylesheet" href="${CDN_BASE}/${cdnFile}.css" />
 
 <video-player>
   <${skinTag}>

site/src/components/installation/HTMLUsageCodeBlock.tsx

@@ -121,15 +121,13 @@ function generateJS(useCase: UseCase, skin: Skin, renderer: Renderer): string {
     const mediaImport = mediaSubpath ? `\nimport '@videojs/html/media/${mediaSubpath}';` : '';
     return `import '@videojs/html/background/player';
 import '@videojs/html/background/skin';
-import '@videojs/html/background/skin.css';
 import '@videojs/html/background/video';${mediaImport}`;
   }
   const { group, skinFile } = getSkinImportParts(skin);
   const mediaSubpath = getMediaImportSubpath(renderer);
   const mediaImport = mediaSubpath ? `\nimport '@videojs/html/media/${mediaSubpath}';` : '';
   return `import '@videojs/html/${group}/player';
-import '@videojs/html/${group}/${skinFile}';
-import '@videojs/html/${group}/${skinFile}.css';${mediaImport}`;
+import '@videojs/html/${group}/${skinFile}';${mediaImport}`;
 }
 
 export default function HTMLUsageCodeBlock() {

site/src/content/docs/concepts/overview.mdx

@@ -172,7 +172,6 @@ function Hero() {
   import '@videojs/html/background/player';
   import '@videojs/html/background/video';
   import '@videojs/html/background/skin';
-  import '@videojs/html/background/skin.css';
 </script>
 
 <background-video-player>

site/src/content/docs/concepts/presets.mdx

@@ -35,7 +35,6 @@ function Hero() {
   import '@videojs/html/background/player';
   import '@videojs/html/background/video';
   import '@videojs/html/background/skin';
-  import '@videojs/html/background/skin.css';
 </script>
 
 <background-video-player>

site/src/utils/installation/__tests__/cdn-code.test.ts

@@ -4,23 +4,20 @@ import { generateCdnCode } from '../cdn-code';
 describe('generateCdnCode', () => {
   it('generates video preset CDN tags for html5-video', () => {
     expect(generateCdnCode('default-video', 'video', 'html5-video')).toEqual(
-      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.css" />`
+      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>`
     );
   });
 
   it('includes hls media bundle when renderer is hls', () => {
     expect(generateCdnCode('default-video', 'minimal-video', 'hls')).toEqual(
       `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/media/hls-video.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.css" />`
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/media/hls-video.js"></script>`
     );
   });
 
   it('generates background preset CDN tags', () => {
     expect(generateCdnCode('background-video', 'video', 'background-video')).toEqual(
-      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.css" />`
+      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.js"></script>`
     );
   });
 });

site/src/utils/installation/cdn-code.ts

@@ -27,6 +27,5 @@ export function generateCdnCode(useCase: UseCase, skin: Skin, renderer: Renderer
     scriptLines.push(`<script type="module" src="${CDN_BASE}/media/${mediaSubpath}.js"></script>`);
   }
 
-  return `${scriptLines.join('\n')}
-<link rel="stylesheet" href="${CDN_BASE}/${name}.css" />`;
+  return scriptLines.join('\n');
 }