Skip to content

fix(cdn): keep the light-DOM global rules out of the skin sheets - #2628

Draft
mihar-22 wants to merge 1 commit into
mainfrom
fix/cdn-skin-sheets-global
Draft

fix(cdn): keep the light-DOM global rules out of the skin sheets#2628
mihar-22 wants to merge 1 commit into
mainfrom
fix/cdn-skin-sheets-global

Conversation

@mihar-22

@mihar-22 mihar-22 commented Sep 3, 2026

Copy link
Copy Markdown
Member

What this does

Restores the shadow-sheet behavior the old html cdn build had: preset skin sheets on the CDN no longer embed global.css.

Why

html inlines every @import into its published define/**/*.css, so skin.css carries global.css verbatim. @videojs/cdn copies those sheets as-is, which put the light-DOM rules (media-container video, caption-track tweaks) into video.css and friends. Linked inside a declarative shadow root, they applied there. Flagged by Bugbot on #2598.

Sheet Before After
video.css, audio.css, live-*.css, *-minimal.css skin rules + global.css skin rules only
global.css light-DOM rules unchanged
background.css never imported the global sheet unchanged

How

  • copyCssPlugin gains a rewrite(content, file) hook applied after inlining and before minifying.
  • The cdn strips the exact resolved text of define/global.css from define/<preset>/*.css, the same content html wrote to global.css.
  • check-cdn-skins asserts every skin sheet lacks a global-only rule and global.css keeps it.

Validation

pnpm build:cdn, pnpm -F @videojs/cdn check:cdn (self-contained + 8 skins), cdn tests, lint, workspace check.

🤖 Generated with Claude Code

@vercel

vercel Bot commented Sep 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
v10-sandbox Ready Ready Preview Sep 3, 2026 9:10pm UTC

Request Review

html's build inlines every `@import` into its published sheets, so each preset
skin sheet carries `global.css`. The cdn copies those sheets as-is, so `video.css`
and its siblings gained the light-DOM rules (`media-container video`, the caption
track tweaks) that used to be omitted, and a sheet linked inside a declarative
shadow root applied them there.

The copy plugin gains a `rewrite` hook, the cdn strips the exact inlined text of
`define/global.css` from the preset sheets, and `check-cdn-skins` asserts that
no skin sheet carries a global-only rule while `global.css` still does.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@netlify

netlify Bot commented Sep 3, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit f9f0c01
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a99e1dfe8455000080cd839
😎 Deploy Preview https://deploy-preview-2628--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial Lazy
/video (default) 62.68 kB 56.87 kB
/video (default + hls) 64.47 kB 56.87 kB
/video (minimal) 63.04 kB 56.87 kB
/video (minimal + hls) 64.81 kB 56.87 kB
/audio (default) 47.02 kB 56.87 kB
/audio (minimal) 47.23 kB 56.87 kB
/background 11.57 kB 56.87 kB
Media (18)
Entry Initial
/media/mux-video 3.02 kB
/media/mux-audio 2.69 kB
/media/background-video 1.16 kB
/media/cloudflare-video 2.89 kB
/media/dash-video 2.62 kB
/media/hls-audio 22.05 kB
/media/hls-background-video 16.80 kB
/media/hls-video 27.98 kB
/media/hlsjs-video 2.62 kB
/media/mux-background-video 16.83 kB
/media/native-hls-video 7.59 kB
/media/shaka-video 2.62 kB
/media/spotify-audio 3.01 kB
/media/tiktok-video 3.12 kB
/media/twitch-video 2.93 kB
/media/vimeo-video 2.90 kB
/media/wistia-video 604 B
/media/youtube-video 2.90 kB
Players (5)
Entry Initial Lazy
/video/player 9.70 kB 56.87 kB
/audio/player 6.14 kB 56.87 kB
/background/player 4.46 kB 56.87 kB
/live-video/player 9.06 kB 56.87 kB
/live-audio/player 6.15 kB 56.87 kB
Skins (29)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.65 kB
/video/skin.css css 7.46 kB
/video/minimal-skin js 61.46 kB 56.87 kB
/video/minimal-skin2 js 8.09 kB
/video/skin js 61.34 kB 56.87 kB
/video/skin2 js 7.95 kB
/audio/minimal-skin.css css 5.53 kB
/audio/skin.css css 5.34 kB
/audio/minimal-skin js 45.76 kB 56.87 kB
/audio/minimal-skin2 js 5.83 kB
/audio/skin js 45.52 kB 56.87 kB
/audio/skin2 js 5.65 kB
/background/skin.css css 139 B
/background/skin js 9.81 kB 56.87 kB
/background/skin2 js 187 B
/live-video/minimal-skin.css css 6.21 kB
/live-video/skin.css css 6.18 kB
/live-video/minimal-skin js 49.42 kB 56.87 kB
/live-video/minimal-skin2 js 6.55 kB
/live-video/skin js 49.42 kB 56.87 kB
/live-video/skin2 js 6.58 kB
/live-audio/minimal-skin.css css 4.39 kB
/live-audio/skin.css css 4.37 kB
/live-audio/minimal-skin js 35.39 kB 56.87 kB
/live-audio/minimal-skin2 js 4.64 kB
/live-audio/skin js 35.40 kB 56.87 kB
/live-audio/skin2 js 4.63 kB
/global.css css 190 B
/shared.css css 118 B
UI Components (62)
Entry Initial Lazy
/ui/airplay-button 11.26 kB 56.87 kB
/ui/alert-dialog 8.79 kB 56.87 kB
/ui/audio-track-radio-group 11.38 kB 56.87 kB
/ui/buffering-indicator 8.61 kB 56.87 kB
/ui/captions-button 11.51 kB 56.87 kB
/ui/captions-radio-group 11.46 kB 56.87 kB
/ui/cast-button 11.25 kB 56.87 kB
/ui/container 9.47 kB 56.87 kB
/ui/controls 8.77 kB 56.87 kB
/ui/controls-backdrop 1.69 kB 56.87 kB
/ui/controls-content 1.67 kB 56.87 kB
/ui/dialog 8.73 kB 56.87 kB
/ui/dialog-backdrop 1.70 kB 56.87 kB
/ui/dialog-close 2.06 kB 56.87 kB
/ui/dialog-description 1.69 kB 56.87 kB
/ui/dialog-popup 1.90 kB 56.87 kB
/ui/dialog-title 1.70 kB 56.87 kB
/ui/error-dialog 12.38 kB 56.87 kB
/ui/fullscreen-button 11.27 kB 56.87 kB
/ui/gesture 9.56 kB 56.87 kB
/ui/hotkey 9.97 kB 56.87 kB
/ui/live-button 9.74 kB 56.87 kB
/ui/menu 18.45 kB 56.87 kB
/ui/menu-checkbox-item 1.97 kB 56.87 kB
/ui/menu-content 7.52 kB 56.87 kB
/ui/menu-group 2.09 kB 56.87 kB
/ui/menu-group-label 1.64 kB
/ui/menu-item 2.29 kB 56.87 kB
/ui/menu-item-indicator 1.37 kB 56.87 kB
/ui/menu-radio-group 3.01 kB 56.87 kB
/ui/menu-radio-item 2.13 kB 56.87 kB
/ui/menu-separator 1.30 kB 56.87 kB
/ui/mute-button 11.28 kB 56.87 kB
/ui/pip-button 11.22 kB 56.87 kB
/ui/play-button 11.23 kB 56.87 kB
/ui/playback-rate-button 11.32 kB 56.87 kB
/ui/playback-rate-radio-group 11.37 kB 56.87 kB
/ui/popover 8.57 kB 56.87 kB
/ui/poster 8.67 kB 56.87 kB
/ui/quality-radio-group 11.97 kB 56.87 kB
/ui/seek-button 11.27 kB 56.87 kB
/ui/seek-indicator 12.69 kB 56.87 kB
/ui/seek-indicator-value 1.10 kB
/ui/slider 11.65 kB 56.87 kB
/ui/slider-preview 2.01 kB 56.87 kB
/ui/status-announcer 10.59 kB 56.87 kB
/ui/status-indicator 13.02 kB 56.87 kB
/ui/status-indicator-value 1.10 kB
/ui/thumbnail 9.84 kB 56.87 kB
/ui/time 10.79 kB 56.87 kB
/ui/time-slider 12.99 kB 56.87 kB
/ui/time-slider-chapter-title 8.79 kB 56.87 kB
/ui/time-slider-chapters 9.63 kB 56.87 kB
/ui/title 8.17 kB 56.87 kB
/ui/tooltip 9.95 kB 56.87 kB
/ui/tooltip-label 1.21 kB
/ui/tooltip-shortcut 1.18 kB
/ui/volume-indicator 13.01 kB 56.87 kB
/ui/volume-indicator-fill 1.11 kB
/ui/volume-indicator-value 1.10 kB
/ui/volume-popover 14.74 kB 56.87 kB
/ui/volume-slider 12.31 kB 56.87 kB
⚛️ @videojs/react — no changes
Presets (7)
Entry Initial Lazy
/video (default) 50.60 kB 56.87 kB
/video (default + hls) 50.85 kB 56.87 kB
/video (minimal) 50.74 kB 56.87 kB
/video (minimal + hls) 50.94 kB 56.87 kB
/audio (default) 39.53 kB 56.87 kB
/audio (minimal) 39.57 kB 56.87 kB
/background 581 B 56.87 kB
Media (22)
Entry Initial
/media/mux-video/hls-js 986 B
/media/mux-video/spf 23.03 kB
/media/mux-audio/hls-js 733 B
/media/mux-audio/spf 19.49 kB
/media/background-video 402 B
/media/cloudflare-video 914 B
/media/dash-video 710 B
/media/hls-audio 20.32 kB
/media/hls-background-video 16.46 kB
/media/hls-video 26.33 kB
/media/hlsjs-video 711 B
/media/mux-audio 726 B
/media/mux-background-video 16.45 kB
/media/mux-video 980 B
/media/native-hls-video 5.76 kB
/media/shaka-video 711 B
/media/spotify-audio 902 B
/media/tiktok-video 908 B
/media/twitch-video 929 B
/media/vimeo-video 887 B
/media/wistia-video 619 B
/media/youtube-video 891 B
Extensions (2)
Entry Initial
/extensions/google-cast 1.59 kB
/extensions/mux-data 1.63 kB
Players (5)
Entry Initial Lazy
/video/player 7.56 kB 56.87 kB
/audio/player 4.00 kB 56.87 kB
/background/player 2.27 kB 56.87 kB
/live-video/player 6.95 kB 56.87 kB
/live-audio/player 3.99 kB 56.87 kB
Skins (18)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.52 kB
/video/skin.css css 7.34 kB
/video/minimal-skin js 50.59 kB 56.87 kB
/video/skin js 50.49 kB 56.87 kB
/audio/minimal-skin.css css 5.37 kB
/audio/skin.css css 5.18 kB
/audio/minimal-skin js 39.47 kB 56.87 kB
/audio/skin js 39.41 kB 56.87 kB
/background/skin.css css 90 B
/background/skin js 277 B
/live-video/minimal-skin.css css 6.07 kB
/live-video/skin.css css 6.05 kB
/live-video/minimal-skin js 42.56 kB 56.87 kB
/live-video/skin js 42.52 kB 56.87 kB
/live-audio/minimal-skin.css css 4.24 kB
/live-audio/skin.css css 4.21 kB
/live-audio/minimal-skin js 30.37 kB 56.87 kB
/live-audio/skin js 30.35 kB 56.87 kB
UI Components (39)
Entry Initial Lazy
/ui/airplay-button 10.45 kB 56.87 kB
/ui/alert-dialog 4.73 kB 56.87 kB
/ui/audio-track 7.94 kB 56.87 kB
/ui/audio-track-radio-group 9.48 kB 56.87 kB
/ui/buffering-indicator 7.80 kB 56.87 kB
/ui/captions-button 10.44 kB 56.87 kB
/ui/captions-radio-group 9.59 kB 56.87 kB
/ui/cast-button 10.44 kB 56.87 kB
/ui/controls 7.71 kB 56.87 kB
/ui/dialog 4.75 kB 56.87 kB
/ui/error-dialog 11.80 kB 56.87 kB
/ui/fullscreen-button 10.40 kB 56.87 kB
/ui/gesture 7.99 kB 56.87 kB
/ui/hotkey 8.38 kB 56.87 kB
/ui/live-button 8.80 kB 56.87 kB
/ui/menu 19.45 kB 56.87 kB
/ui/mute-button 10.44 kB 56.87 kB
/ui/pip-button 10.39 kB 56.87 kB
/ui/play-button 10.37 kB 56.87 kB
/ui/playback-rate 7.99 kB 56.87 kB
/ui/playback-rate-button 10.37 kB 56.87 kB
/ui/playback-rate-radio-group 9.53 kB 56.87 kB
/ui/popover 8.16 kB 56.87 kB
/ui/poster 7.57 kB 56.87 kB
/ui/quality 8.42 kB 56.87 kB
/ui/quality-radio-group 9.95 kB 56.87 kB
/ui/seek-button 10.41 kB 56.87 kB
/ui/seek-indicator 11.98 kB 56.87 kB
/ui/slider 12.76 kB 56.87 kB
/ui/status-announcer 10.10 kB 56.87 kB
/ui/status-indicator 12.29 kB 56.87 kB
/ui/thumbnail 8.73 kB 56.87 kB
/ui/time 9.77 kB 56.87 kB
/ui/time-slider 14.17 kB 56.87 kB
/ui/title 7.28 kB 56.87 kB
/ui/tooltip 8.93 kB 56.87 kB
/ui/volume-indicator 12.33 kB 56.87 kB
/ui/volume-popover 14.20 kB 56.87 kB
/ui/volume-slider 12.14 kB 56.87 kB
🧩 @videojs/core — no changes
Entries (76)
Entry Initial Lazy
. 13.15 kB
/dom 22.53 kB 56.87 kB
/vjsc 1.82 kB
/i18n 3.23 kB 56.87 kB
/i18n/locales/all 34.97 kB
/i18n/locales/ar 1.22 kB
/i18n/locales/az 1.09 kB
/i18n/locales/bg 1.29 kB
/i18n/locales/bn 1.23 kB
/i18n/locales/bs 1.00 kB
/i18n/locales/ca 1.07 kB
/i18n/locales/cs 1.07 kB
/i18n/locales/cy 1.02 kB
/i18n/locales/da 1006 B
/i18n/locales/de 1.09 kB
/i18n/locales/el 1.49 kB
/i18n/locales/en 785 B
/i18n/locales/es 1018 B
/i18n/locales/et 1.05 kB
/i18n/locales/eu 1.03 kB
/i18n/locales/fa 1.22 kB
/i18n/locales/fi 1.04 kB
/i18n/locales/fr 1.07 kB
/i18n/locales/gd 1.10 kB
/i18n/locales/gl 1022 B
/i18n/locales/he 1.14 kB
/i18n/locales/hi 1.30 kB
/i18n/locales/hr 1.02 kB
/i18n/locales/hu 1.10 kB
/i18n/locales/id 919 B
/i18n/locales/it 1.01 kB
/i18n/locales/ja 1.18 kB
/i18n/locales/ko 1.14 kB
/i18n/locales/lt 1.02 kB
/i18n/locales/lv 1.09 kB
/i18n/locales/mr 1.30 kB
/i18n/locales/nb 987 B
/i18n/locales/ne 1.29 kB
/i18n/locales/nl 1.00 kB
/i18n/locales/nn 987 B
/i18n/locales/oc 1.08 kB
/i18n/locales/pl 1.14 kB
/i18n/locales/pt 1.03 kB
/i18n/locales/pt-BR 1.03 kB
/i18n/locales/pt-PT 1.01 kB
/i18n/locales/ro 1.07 kB
/i18n/locales/ru 1.40 kB
/i18n/locales/sk 1.10 kB
/i18n/locales/sl 1.04 kB
/i18n/locales/sr 1.07 kB
/i18n/locales/sv 1.01 kB
/i18n/locales/te 1.32 kB
/i18n/locales/th 1.29 kB
/i18n/locales/tr 1.08 kB
/i18n/locales/uk 1.41 kB
/i18n/locales/vi 1.11 kB
/i18n/locales/zh 1.02 kB
/i18n/locales/zh-CN 1.02 kB
/i18n/locales/zh-TW 1.02 kB
/i18n/text/airplay 101 B
/i18n/text/buttons 137 B
/i18n/text/captions 93 B
/i18n/text/cast 114 B
/i18n/text/common 90 B
/i18n/text/container 75 B
/i18n/text/errors 285 B
/i18n/text/fullscreen 98 B
/i18n/text/live 126 B
/i18n/text/menu 249 B
/i18n/text/pip 101 B
/i18n/text/playback 80 B
/i18n/text/seek 105 B
/i18n/text/slider 65 B
/i18n/text/status 222 B
/i18n/text/time 280 B
/i18n/text/volume 133 B
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 1.05 kB
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.72 kB
/html 703 B
/react 365 B
🔧 @videojs/utils — no changes
Entries (13)
Entry Initial
/array 271 B
/dom 5.02 kB
/events 320 B
/function 386 B
/i18n 249 B
/jwt 176 B
/object 535 B
/predicate 297 B
/percent 281 B
/string 239 B
/style 212 B
/time 976 B
/number 199 B
📦 @videojs/cdn — no changes
📦 @videojs/cloudflare-video — no changes
📦 @videojs/dash-video — no changes
📦 @videojs/google-cast — no changes
📦 @videojs/hlsjs-video — no changes
📦 @videojs/media — no changes
Entries (3)
Entry Initial
. 1.12 kB
/dom 4.11 kB
/media-tracks 2.05 kB
📦 @videojs/mux — no changes
📦 @videojs/mux-audio — no changes
Entries (2)
Entry Initial
. 135.55 kB
/spf 20.84 kB
📦 @videojs/mux-data — no changes
📦 @videojs/mux-video — no changes
Entries (2)
Entry Initial
. 135.59 kB
/spf 26.70 kB
📦 @videojs/native-hls-video — no changes
📦 @videojs/shaka-video — no changes
📦 @videojs/spf — no changes
Entries (7)
Entry Initial
. 4.55 kB
/dom 6.60 kB
/hls 22.06 kB
/media-tracks 504 B
/hls-background-video 15.89 kB
/hls-audio 19.83 kB
/hls-video 25.89 kB
📦 @videojs/spotify-audio — no changes
📦 @videojs/tiktok-video — no changes
📦 @videojs/twitch-video — no changes
📦 @videojs/vimeo-video — no changes
📦 @videojs/wistia-video — no changes
Entries (2)
Entry Initial
. 1.91 kB
/helpers 1.81 kB
📦 @videojs/youtube-video — no changes

ℹ️ How to interpret

Each entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately.

Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles.

Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded.

Run pnpm size locally to check current initial sizes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant