feat(skin): add audio skins for HTML and React presets (#772)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

build/plugins/copy-css-plugin.mjs

@@ -0,0 +1,31 @@
+import { globSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { resolveImports } from './resolve-css-imports.mjs';
+
+/**
+ * @param {{ skinsDir: string; outDir: string }} options
+ */
+export function copyCssPlugin(options) {
+  const { skinsDir, outDir } = options;
+
+  return {
+    name: 'copy-css',
+    buildStart() {
+      for (const file of globSync('src/**/*.css')) {
+        this.addWatchFile(file);
+      }
+      for (const file of globSync(join(skinsDir, '**/*.css'))) {
+        this.addWatchFile(file);
+      }
+    },
+    writeBundle() {
+      for (const file of globSync('src/**/*.css')) {
+        const content = readFileSync(file, 'utf-8');
+        const resolved = resolveImports(content, dirname(file), skinsDir);
+        const outFile = join(outDir, file.replace(/^src\//, ''));
+        mkdirSync(dirname(outFile), { recursive: true });
+        writeFileSync(outFile, resolved);
+      }
+    },
+  };
+}

build/plugins/inline-css-plugin.mjs

@@ -0,0 +1,45 @@
+import { readFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import { resolveImports } from './resolve-css-imports.mjs';
+
+const INLINE_PREFIX = 'inline-css:';
+
+const INLINE_SUFFIX = '?inline';
+
+/**
+ * Rolldown/tsdown plugin that inlines `.css?inline` imports as JavaScript
+ * modules exporting the resolved CSS string. Mirrors the Vite `?inline`
+ * convention so the same source works in both Vite dev and tsdown builds.
+ *
+ * @param {{ skinsDir: string; rootDir?: string }} options
+ */
+export function inlineCssPlugin(options) {
+  const { skinsDir, rootDir = process.cwd() } = options;
+
+  return {
+    name: 'inline-css',
+
+    resolveId(source, importer) {
+      if (!source.endsWith(INLINE_SUFFIX)) return null;
+
+      const cssPath = source.slice(0, -INLINE_SUFFIX.length);
+      const abs = resolve(dirname(importer), cssPath);
+      const rel = relative(rootDir, abs);
+
+      // Use .js extension so rolldown doesn't apply its CSS loader.
+      return { id: `${INLINE_PREFIX}${rel.replace(/\.css$/, '.js')}`, moduleSideEffects: false };
+    },
+
+    load(id) {
+      if (!id.startsWith(INLINE_PREFIX)) return null;
+
+      // Map back to the .css file path.
+      const rel = id.slice(INLINE_PREFIX.length).replace(/\.js$/, '.css');
+      const file = resolve(rootDir, rel);
+      const raw = readFileSync(file, 'utf-8');
+      const resolved = resolveImports(raw, dirname(file), skinsDir);
+
+      return { code: `export default ${JSON.stringify(resolved)};`, moduleSideEffects: false };
+    },
+  };
+}

build/plugins/resolve-css-imports.mjs

@@ -0,0 +1,27 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+/**
+ * Resolves `@import` directives in CSS content, inlining referenced files.
+ *
+ * @param {string} content - The CSS content to resolve.
+ * @param {string} baseDir - The directory to resolve relative imports from.
+ * @param {string} skinsDir - The directory to resolve `@videojs/skins` imports from.
+ * @returns {string} The resolved CSS content.
+ */
+export function resolveImports(content, baseDir, skinsDir) {
+  return content.replace(/@import\s+['"]([^'"]+)['"]\s*;/g, (_, importPath) => {
+    let file;
+
+    if (importPath.startsWith('@videojs/skins/')) {
+      file = resolve(skinsDir, importPath.replace('@videojs/skins/', ''));
+    } else if (importPath.startsWith('.')) {
+      file = resolve(baseDir, importPath);
+    } else {
+      return _;
+    }
+
+    const nested = readFileSync(file, 'utf-8');
+    return resolveImports(nested, dirname(file), skinsDir);
+  });
+}