refactor(Video): Remove SCSS from Video by aresnik11 · Pull Request #3390 · Codecademy/gamut

aresnik11 · 2026-06-30T15:18:39Z

Overview

The Video component was the last consumer of a standalone SCSS file (vds_base_theme.scss) for styling the Vidstack player. This PR removes that SCSS dependency, splitting its contents into two more idiomatic sources:

vidstack-vendor.css — the three third-party Vidstack @imports (default theme + video/audio layouts), imported as plain CSS.
styles.ts — our custom Vidstack overrides (YouTube overlay, control buttons, sliders, tooltips, keyframes), converted to an Emotion css template (vdsBaseThemeStyles) and applied through Gloabal inside the existing VariableProvider component.

This aligns the Video component with the rest of Gamut's Emotion-based styling and removes the last SCSS file from the package.

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1662
Version plan added/updated (or not needed)
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing instructions

Verify the Vidstack player looks and behaves identically to main — the goal is a no-visual-change refactor.

Run Storybook and open the Video stories.
For a standard (mp4/HLS) video, confirm:
- Custom control bar renders with correct button styling and border radius.
- Play/pause, volume slider, and time slider (scrubber) look correct.
- Hovering a control shows the tooltip with the correct arrow/caret and enter/exit fade animation.
For a YouTube video, confirm the YouTube logo / copy-link overlay is still cropped out (the iframe.vds-youtube height override) both before and after playback starts.
Confirm the poster/placeholder image and captions/text tracks still render as expected. (Note: not sure why the video only buffers on preview/prod but it seems to work locally)

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-06-30T15:19:58Z

View your CI Pipeline Execution ↗ for commit 373994b

☁️ Nx Cloud last updated this comment at 2026-07-15 19:35:24 UTC

codecov · 2026-06-30T15:22:24Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.08%. Comparing base (c9200cc) to head (373994b).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3390      +/-   ##
==========================================
- Coverage   90.55%   90.08%   -0.47%     
==========================================
  Files         398      271     -127     
  Lines        6586     5671     -915     
  Branches     2141     1910     -231     
==========================================
- Hits         5964     5109     -855     
+ Misses        613      553      -60     
  Partials        9        9

Flag	Coverage Δ
main	`?`
pull-request	`90.08% <100.00%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ajr-video-no-scss

Update vidstack-vendor.css to use the webpack ~ module resolution prefix, which tells webpack to resolve imports from node_modules. This ensures the CSS imports are correctly resolved in both Storybook and consumer builds like Codecademy. Fixes module resolution error: "Can't resolve './@vidstack/react/..." when Codecademy's webpack processes the CSS file from the gamut dist output. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

… beak Applying vdsBaseThemeStyles as a styled() argument on VariableProvider scoped every .vds-* selector under the player's generated class, which broke the tooltip beak (rendered as a full diamond). Render the overrides via <Global> instead so they apply at document level, matching the original flat cascade and reaching portaled .vds-* nodes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

codecademydev · 2026-07-15T19:36:24Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`72.2.5-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.11-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.16-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-kit`	`3.0.9-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.35-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-styles`	`20.0.3-alpha.8d657c.0`	npm	diff
`@codecademy/gamut-tests`	`6.0.6-alpha.8d657c.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.8d657c.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.8d657c.0`	npm	diff

github-actions · 2026-07-15T19:38:16Z

🚀 Styleguide deploy preview ready!

Preview URL: https://6a57e1a272036b070750e7ea--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a57e1a272036b070750e7ea

dreamwasp

on mono, i was seeing that the tayra examples don't have the Closed Caption buttons on the ones on prod do. idk if thats just a weird tayra issue but wanted to mention it

dreamwasp · 2026-07-20T18:02:28Z

      style={{ width, height }}
      variables={vdsVariables}
    >
+      <Global styles={vdsBaseThemeStyles} />


the only thing about this i find awkward is that is there's more than one Video component rendered on a page this Global sheet gets injected over & over so maybe just a check/hook to only render one per page makes sense

tho this may be deduped by emotion itself? idk just something to think about

related Q: does it have to be a Global?
is the intention that these styles get inherited by MediaPlayer?

hmm good q. so originally i had them being added to the VariableProvider (you can see in this commit 373994b) but the styles werent working bc the classnames didnt match

Applying vdsBaseThemeStyles as a styled() argument on VariableProvider
scoped every .vds-* selector under the player's generated class, which
broke the tooltip beak (rendered as a full diamond). Render the overrides
via instead so they apply at document level, matching the
original flat cascade and reaching portaled .vds-* nodes.

aresnik11 · 2026-07-20T20:49:12Z

on mono, i was seeing that the tayra examples don't have the Closed Caption buttons on the ones on prod do. idk if thats just a weird tayra issue but wanted to mention it

ill look into it but im guessing the captions get inserted from Percipio video data that doesnt work on previews/staging. that would be the same reason i had to force the VidstackPlayer to render in the mono PR

jakemhiller · 2026-07-20T20:53:59Z

+@import "~@vidstack/react/player/styles/default/theme.css";
+@import "~@vidstack/react/player/styles/default/layouts/video.css";
+@import "~@vidstack/react/player/styles/default/layouts/audio.css";


I think importing these via JS imports is technically more compatible with tools like vite. the ~/* syntax is a webpack/css-loader thing that isn't directly supported in those tools without config changes, but directly importing CSS into JS is supported.

good call! doing it via JS broke the Storybook page (styles weren't getting applied) but let me see if I can fix that separately

remove scss

56da2f2

aresnik11 and others added 4 commits June 30, 2026 13:28

clean up

ec33ca2

Merge branch 'main' into ajr-video-no-scss

d15e495

release plan

5308052

Merge branch 'ajr-video-no-scss' of github.com:Codecademy/gamut into …

04e8b96

…ajr-video-no-scss

aresnik11 changed the title ~~remove scss~~ refactor(Video): Remove SCSS from Video Jul 6, 2026

aresnik11 and others added 5 commits July 7, 2026 15:32

Merge branch 'main' into ajr-video-no-scss

4cbfa62

add new video stories

573e728

undo storybook changes

a88008f

aresnik11 marked this pull request as ready for review July 16, 2026 20:09

aresnik11 requested a review from a team as a code owner July 16, 2026 20:09

aresnik11 requested review from LinKCoding and dreamwasp July 16, 2026 20:10

dreamwasp reviewed Jul 20, 2026

View reviewed changes

jakemhiller reviewed Jul 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(Video): Remove SCSS from Video#3390

refactor(Video): Remove SCSS from Video#3390
aresnik11 wants to merge 10 commits into
mainfrom
ajr-video-no-scss

aresnik11 commented Jun 30, 2026 •

edited

Loading

Uh oh!

nx-cloud Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

codecademydev commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

dreamwasp left a comment

Uh oh!

dreamwasp Jul 20, 2026

Uh oh!

dreamwasp Jul 20, 2026

Uh oh!

LinKCoding Jul 20, 2026

Uh oh!

aresnik11 Jul 20, 2026

Uh oh!

aresnik11 commented Jul 20, 2026

Uh oh!

jakemhiller Jul 20, 2026 •

edited

Loading

Uh oh!

aresnik11 Jul 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

aresnik11 commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing instructions

PR Links and Envs

Uh oh!

nx-cloud Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecademydev commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

dreamwasp Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

dreamwasp Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

aresnik11 Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

aresnik11 commented Jul 20, 2026

Uh oh!

jakemhiller Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aresnik11 Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

aresnik11 commented Jun 30, 2026 •

edited

Loading

nx-cloud Bot commented Jun 30, 2026 •

edited

Loading

codecov Bot commented Jun 30, 2026 •

edited

Loading

jakemhiller Jul 20, 2026 •

edited

Loading