unocss-preset-vidstack

UnoCSS preset for Vidstack Player.

Usage

pnpm i -D unocss-preset-vidstack unocss

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetVidstack } from 'unocss-preset-vidstack'

export default defineConfig({
  presets: [
    // ...
    presetVidstack({
      webComponents: true
    }),
  ],
  variants: [
    // https://www.vidstack.io/docs/wc/player/styling/tailwind#hocus
    (matcher) => {
      if (!matcher.startsWith('hocus:'))
        return matcher
      return {
        matcher: matcher.replace(/^hocus:/, ''),
        selector: s => `${s}:hover, ${s}:focus-visible`,
      }
    },
  ],
})

License

MIT License © 2023 canstand