Migrate sanity-plugin-asset-source-unsplash styling to vanilla-extract - #1846
Open
stipsan wants to merge 1 commit into
Open
Migrate sanity-plugin-asset-source-unsplash styling to vanilla-extract#1846stipsan wants to merge 1 commit into
stipsan wants to merge 1 commit into
Conversation
Migrates the plugin off styled-components onto vanilla-extract (zero-runtime CSS), following the monorepo's styling migration playbook: - SearchInput's animated spinner icon: keyframes() + style() wrapper - UnsplashAssetSource's Dialog height override: globalStyle() scoped under a wrapper class (targets the Dialog's internal DialogCard/Card structure) - UnsplashCreditLine's link/card: style() + globalStyle() for the hover/focus-driven Text underline, and createVar()/assignInlineVars() to bridge the live @sanity/ui theme's fg/bg colors (replacing the styled-components theme read via getTheme_v2) Also: - tsdown.config.ts: styledComponents -> vanillaExtract - vitest.config.ts: register vanillaExtractPlugin() + disableRuntimeStyles - package.json: add vanilla-extract build/runtime deps, drop the styled-components peerDependency (kept as a devDependency to keep the sanity/@sanity/ui peer variant aligned with the rest of the workspace) - remove the now-unused styled-components DefaultTheme augmentation
🦋 Changeset detectedLatest commit: 5033a15 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.
1 Skipped Deployment
|
✅ E2E Tests🟢 26 passed • view full report • view run Studio: https://plugins-e2e-test-studio-cjc5d41dr.sanity.dev Datasets: |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
stipsan
marked this pull request as ready for review
August 6, 2026 08:44
stipsan
requested review from
Copilot and
pedrobonamin
and removed request for
a team and
Copilot
August 6, 2026 08:44
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
2 participants
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-asset-source-unsplash's styling fromstyled-componentsto vanilla-extract (zero-runtime CSS), following themigrate-styled-components-to-vanilla-extractskill's playbook.Changes
SearchInput: the animated spinner icon (styled(SpinnerIcon)+keyframes) becomes akeyframes()+style()rule inSearchInput.css.ts, with a thin wrapper component keeping the same call site.UnsplashAssetSource: thestyled(Dialog)descendant-selector override (forcing the internal[data-ui='DialogCard'] > [data-ui='Card']toheight: 100%) becomes aglobalStyle()scoped under a local wrapper class, since that structure is rendered internally by@sanity/ui'sDialog, not by this plugin.UnsplashCreditLine: the link/card becomestyle()+globalStyle()(for the hover/focus-drivenTextunderline, again targeting a@sanity/ui-rendered descendant), with the live theme'sfg/bgcolors bridged viacreateVar()+assignInlineVars()fromuseTheme_v2()(replacing the styled-components theme read viagetTheme_v2({sanity: theme.sanity})).tsdown.config.ts:styledComponents: true→vanillaExtract: true.vitest.config.ts: registersvanillaExtractPlugin()+disableRuntimeStyles.package.json: adds the vanilla-extract build/runtime deps (@sanity/vanilla-extract-vite-plugin,@vanilla-extract/cssas devDependencies;@vanilla-extract/dynamicas a runtime dependency), drops thestyled-componentspeerDependency (kept as acatalog:devDependency, matching@sanity/google-maps-input/sanity-plugin-bynder-input, to keep thesanity/@sanity/uipeer resolution aligned with the rest of the workspace — verified inpnpm-lock.yaml).styled-componentsDefaultThemeaugmentation (src/typings.d.ts).Visual output and behavior are unchanged (verified against the pre-migration rendering — see Testing below).
Testing
pnpm format,pnpm lint,pnpm knip,pnpm build,pnpm test runall pass.dist/bundle.csscontains all migrated rules (keyframes/spinner animation, dialog height override, credit-line hover/underline + theme-driven colors).pnpm dev): opened the Unsplash asset source dialog, confirmed it renders at full height, the search input's spinner animates while a search is pending, and the "By @username" credit-line badge renders correctly (background pill, legible text) when hovering a photo. No console errors related to CSS/vanilla-extract/styled-components.Unsplash dialog with photo grid and credit-line badges
Search input with animated spinner while a search is pending
Note:
pnpm build/pnpm test runfor the rest of the monorepo pass;dev/test-studioanddev/e2e-studiofail to build in this environment becausepnpm installpicked up a newersanity/@sanity/visionprerelease off the workspace'snextdist-tag override that isn't yet available on the auto-updates CDN. This is unrelated to this PR — reproducible onmainas well once a freshpnpm installpicks up the same prerelease, given the pinnednexttag drifts over time.To show artifacts inline, enable in settings.