v10/packages/react/skins.compiler.config.ts

import { defineConfig, transform } from '@videojs/compiler';
import { tailwind } from '@videojs/compiler/tailwind';

const CORE_COMPONENTS_SOURCE = '@videojs/core/components';
const ICON_COMPONENTS_SOURCE = '@videojs/icons/components';
const SOURCE_TAILWIND_SOURCE = './tailwind/video.tailwind';
const GENERATED_TAILWIND_SOURCE = '@videojs/skins/default/tailwind/video.tailwind';

export default defineConfig({
  input: {
    'default-video': '../skins/src/default/video.skin.tsx',
  },
  output: {
    dir: 'src/presets/video',
    entryFileNames: '[name].generated.tailwind.tsx',
    banner: '// Generated by @videojs/compiler. Do not edit.\n',
  },
  plugins: [
    transform(({ ref, match, create, edit }) => {
      const cn = ref.import('@videojs/utils/style', 'cn');
      const ReactNode = ref.import('react', 'ReactNode', { type: true });

      return [
        edit.import.rewrite({
          [CORE_COMPONENTS_SOURCE]: coreComponentImport,
          [ICON_COMPONENTS_SOURCE]: '@/icons',
          [SOURCE_TAILWIND_SOURCE]: GENERATED_TAILWIND_SOURCE,
        }),
        tailwind({ mode: 'preserve' }),
        edit.jsx.element({
          match: match.jsx.tag('Tooltip.Trigger'),
          transform: edit.jsx.childAsProp('render'),
        }),
        edit.jsx.element({
          match: match.jsx.tag('Controls.Root'),
          transform: edit.jsx.addAttribute('data-controls', ''),
        }),
        edit.jsx.attribute({
          match: match.all(match.jsx.attribute('className'), match.jsx.value.array()),
          transform: ({ value }) => create.expr.call(cn, create.jsx.arrayElements(value)),
        }),
        edit.interface.property({
          match: match.all(match.interface.name(/Props$/), match.interface.property('children')),
          transform: edit.interface.setType(() =>
            create.type.union(create.type.ref(ReactNode), create.type.undefined())
          ),
        }),
      ];
    }),
  ],
});

function coreComponentImport(name: string): { source: string; name: string } {
  return {
    source: name === 'Container' ? '@/player/context' : `@/ui/${componentModuleName(name)}`,
    name,
  };
}

function componentModuleName(name: string): string {
  return name
    .replace(/^AirPlay/, 'Airplay')
    .replace(/^PiP/, 'Pip')
    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
    .toLowerCase();
}