Migrate sanity-plugin-mux-input styling to vanilla-extract - #1848
Open
stipsan wants to merge 1 commit into
Open
Conversation
…illa-extract Converts every styled-components usage in the plugin (withFocusRing HOC, VideoThumbnail, VideoInBrowser, InputBrowser, ImportVideosFromMux, FileInputMenuItem, FileInputButton, DraggableWatermark, ConfigureApi, PlayerActionsMenu, Player, UploadProgress, Uploader, VideoReferences) to colocated .css.ts files using vanilla-extract, preserving visual fidelity: - Static styles become style() rules, wrapped in thin component layers where callers need the same API. - Theme-dependent styles (withFocusRing, FileButton, VideoReferences) read useTheme_v2() and bridge values through createVar()/assignInlineVars(). - Descendant/third-party selectors use globalStyle() scoped to a wrapper class; the position:static override in ImportVideosFromMux uses the && specificity trick instead of !important. - Switches tsdown.config.ts to vanillaExtract, registers the Vite plugin in vitest.config.ts, and updates package.json dependencies (drops the styled-components peer/devDependency, adds @vanilla-extract/css, @vanilla-extract/dynamic, @sanity/vanilla-extract-vite-plugin, clsx). - Removes the now-unused styled-components DefaultTheme augmentation.
🦋 Changeset detectedLatest commit: 7bf49e3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ E2E Tests🟢 25 passed • 🟡 1 flaky • view full report • view run Studio: https://plugins-e2e-test-studio-k54sbekoz.sanity.dev Datasets: |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
stipsan
marked this pull request as ready for review
August 6, 2026 08:42
stipsan
requested review from
Copilot and
pedrobonamin
and removed request for
a team
August 6, 2026 08:42
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates sanity-plugin-mux-input from legacy styled-components styling to zero-runtime vanilla-extract, including theme-aware dynamic styling via useTheme_v2() + createVar()/assignInlineVars(), and wires the plugin’s ./bundle.css export + test/build tooling accordingly.
Changes:
- Replaces
styled-componentsusage across the plugin with colocated.css.tsfiles (plus small wrapper components to preserve JSX APIs). - Updates build/test configuration to support vanilla-extract (
tsdown.config.ts,vitest.config.ts) and adds the./bundle.cssexport + snapshot update. - Removes
styled-componentspeer/dev dependency and adds vanilla-extract + helper deps, plus a changeset.
Reviewed changes
Copilot reviewed 34 out of 36 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Lockfile updates reflecting dependency graph changes (vanilla-extract deps added; other next resolutions updated). |
| plugins/sanity-plugin-mux-input/vitest.config.ts | Registers vanillaExtractPlugin() and disables runtime styles in tests. |
| plugins/sanity-plugin-mux-input/tsdown.config.ts | Enables vanillaExtract: true for CSS bundling/export wiring. |
| plugins/sanity-plugin-mux-input/test/exports.test.ts | Updates exports snapshot to include ./bundle.css. |
| plugins/sanity-plugin-mux-input/src/sanity-ui.d.ts | Removes styled-components theme augmentation (no longer needed). |
| plugins/sanity-plugin-mux-input/src/components/withFocusRing/withFocusRing.tsx | Reimplements focus-ring styling using vanilla-extract vars + inline var assignment. |
| plugins/sanity-plugin-mux-input/src/components/withFocusRing/withFocusRing.ts | Removes the prior styled-components implementation. |
| plugins/sanity-plugin-mux-input/src/components/withFocusRing/withFocusRing.css.ts | Adds vanilla-extract styles/vars backing the focus ring behavior. |
| plugins/sanity-plugin-mux-input/src/components/VideoThumbnail.tsx | Replaces styled <img> with a class-backed <img>. |
| plugins/sanity-plugin-mux-input/src/components/VideoThumbnail.css.ts | Adds vanilla-extract styles for the thumbnail image. |
| plugins/sanity-plugin-mux-input/src/components/VideoInBrowser.tsx | Replaces styled play button with class-backed <button>. |
| plugins/sanity-plugin-mux-input/src/components/VideoInBrowser.css.ts | Adds vanilla-extract styles for play-button overlay/hover behavior. |
| plugins/sanity-plugin-mux-input/src/components/VideoDetails/VideoReferences.tsx | Replaces styled container with a wrapper component + theme-driven vars. |
| plugins/sanity-plugin-mux-input/src/components/VideoDetails/VideoReferences.css.ts | Adds vanilla-extract global styles scoped to the container. |
| plugins/sanity-plugin-mux-input/src/components/UploadProgress.tsx | Replaces styled wrappers with small wrapper components that attach classes. |
| plugins/sanity-plugin-mux-input/src/components/UploadProgress.css.ts | Adds vanilla-extract styles + a scoped code descendant rule. |
| plugins/sanity-plugin-mux-input/src/components/Uploader.styled.tsx | Removes styled-components hidden input; uses a vanilla-extract class instead. |
| plugins/sanity-plugin-mux-input/src/components/Uploader.css.ts | Adds vanilla-extract styling for the hidden input element. |
| plugins/sanity-plugin-mux-input/src/components/PlayerActionsMenu.tsx | Replaces styled lock UI elements with class-backed Card/Button. |
| plugins/sanity-plugin-mux-input/src/components/PlayerActionsMenu.css.ts | Adds vanilla-extract styles for lock UI positioning/appearance. |
| plugins/sanity-plugin-mux-input/src/components/Player.styled.tsx | Replaces styled TopControls with a class-backed component. |
| plugins/sanity-plugin-mux-input/src/components/Player.css.ts | Adds vanilla-extract styles for TopControls + scoped button rule. |
| plugins/sanity-plugin-mux-input/src/components/InputBrowser.tsx | Replaces styled dialog wrapper with a class-backed wrapper component. |
| plugins/sanity-plugin-mux-input/src/components/InputBrowser.css.ts | Adds vanilla-extract globalStyle to force full-height dialog layout. |
| plugins/sanity-plugin-mux-input/src/components/ImportVideosFromMux.tsx | Replaces styled checkbox override with a vanilla-extract class. |
| plugins/sanity-plugin-mux-input/src/components/ImportVideosFromMux.css.ts | Adds vanilla-extract styles/globalStyle for checkbox positioning + overlay. |
| plugins/sanity-plugin-mux-input/src/components/FileInputMenuItem.styled.tsx | Replaces styled MenuItem focus styling with theme vars + class styles. |
| plugins/sanity-plugin-mux-input/src/components/FileInputMenuItem.css.ts | Adds vanilla-extract focus/descendant input styles. |
| plugins/sanity-plugin-mux-input/src/components/FileInputButton.tsx | Replaces styled label/input with class-backed DOM elements. |
| plugins/sanity-plugin-mux-input/src/components/FileInputButton.css.ts | Adds vanilla-extract styles for the hidden input + label wrapper. |
| plugins/sanity-plugin-mux-input/src/components/DraggableWatermark.tsx | Replaces styled range/overlay with class-backed elements and css.ts styling. |
| plugins/sanity-plugin-mux-input/src/components/DraggableWatermark.css.ts | Adds vanilla-extract styles for the range input and overlay (incl. thumb styling). |
| plugins/sanity-plugin-mux-input/src/components/ConfigureApi.styled.tsx | Replaces styled logo wrapper with a class-backed <span>. |
| plugins/sanity-plugin-mux-input/src/components/ConfigureApi.css.ts | Adds vanilla-extract styles for the logo wrapper. |
| plugins/sanity-plugin-mux-input/package.json | Adds ./bundle.css export, removes styled-components peer/devDep, adds vanilla-extract deps and clsx. |
| .changeset/mux-input-vanilla-extract.md | Adds a patch changeset for the plugin migration. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 7bf49e3. Configure here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Migrates
sanity-plugin-mux-input's styling fromstyled-components(legacy) to vanilla-extract, following themigrate-styled-components-to-vanilla-extractskill's procedure.Every
styled-componentsusage in the plugin is converted to a colocated.css.tsfile, preserving visual fidelity:style()rules, wrapped in a thin component layer where callers need the same import/JSX API (PlayButton,TopControls,CardWrapper/FlexWrapper/LeftSection/CodeWrapperinUploadProgress,StyledDialoginInputBrowser,FileButton,RangeInput/WatermarkOverlayinDraggableWatermark).withFocusRing,FileButton,VideoReferences'sContainer) now readuseTheme_v2()and bridge the runtime values throughcreateVar()+assignInlineVars()instead of interpolatingprops.themein a styled template.Checkbox's internalinput,Dialog's internalDialogCard/Card,MenuItem's internalinput, the watermark range input's vendor-prefixed thumb pseudo-elements) useglobalStyle()scoped to a wrapper class.position: static !importantoverride onImportVideosFromMux's checkbox now uses the&&specificity trick instead of!important.h2 { font-size: [object Object] }rule in the oldVideoReferencesContainer(interpolating a theme font-size object directly into CSS, which is invalid CSS and was silently dropped by the browser) is removed — it never had a rendering effect and there are noh2elements in the subtree.Config / dependency changes
tsdown.config.ts:styledComponents: true→vanillaExtract: true(auto-wires the./bundle.cssexport).vitest.config.ts: registersvanillaExtractPlugin()anddisableRuntimeStylesinsetupFiles.package.json: drops thestyled-componentspeer + devDependency (verified inpnpm-lock.yamlthat@sanity/uistill resolves to a single sharedstyled-components@6.4.4instance across the monorepo — no fork); adds@vanilla-extract/css+@sanity/vanilla-extract-vite-plugin(devDependencies),@vanilla-extract/dynamic(runtime dependency), andclsx(for mergingclassNameper the styling skill's encapsulation pattern).src/sanity-ui.d.ts(thestyled-componentsDefaultThemeaugmentation is no longer needed).Testing
pnpm format,pnpm lint,pnpm knip,pnpm build,pnpm test runall pass for the whole monorepo (only unrelatedtest-studio#builddeploy step fails, due to a pre-existing prerelease-Sanity-version/auto-updates-CDN issue unrelated to this change)../bundle.cssexport.pnpm dev) that: the upload card renders with its focus ring intact, the "Select video" browse dialog is full height with the hover play-button overlay working, and the "Configure API" dialog shows the Mux logo inline before "API Credentials".Upload card with dashed border and Upload/Select buttons
Select video browse dialog, full height, with white play button overlay on thumbnail hover
Configure API dialog with the Mux logo inline before the API Credentials title
To show artifacts inline, enable in settings.