refactor(sanity-plugin-cloudinary): migrate styling to vanilla-extract - #1845
Open
stipsan wants to merge 4 commits into
Open
refactor(sanity-plugin-cloudinary): migrate styling to vanilla-extract#1845stipsan wants to merge 4 commits into
stipsan wants to merge 4 commits into
Conversation
Replace styled-components and static inline styles with colocated .css.ts modules, enable the tsdown vanilla-extract integration, and drop the styled-components peer dependency.
🦋 Changeset detectedLatest commit: 2721ffe 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-aocvxrxh3.sanity.dev Datasets: |
stipsan
marked this pull request as ready for review
August 6, 2026 08:52
stipsan
requested review from
Copilot and
pedrobonamin
and removed request for
a team
August 6, 2026 08:52
Use clsx/lite in thin style wrappers per the vanilla-extract migration skill, and add clsx to the workspace catalog.
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates sanity-plugin-cloudinary off styled-components/inline styles to vanilla-extract, aligning the plugin with the monorepo’s zero-runtime styling approach and adding the standard ./bundle.css export.
Changes:
- Replaced
styled.divwrappers and several inlinestyle={{...}}usages with colocated vanilla-extract.css.tsfiles plus thin wrapper components. - Enabled vanilla-extract in build/test tooling (
tsdown.config.ts,vitest.config.ts) and added the./bundle.csspackage export with a corresponding exports test snapshot update. - Updated lockfile for new styling/tooling deps (and also advanced
sanity@nextin the lockfile).
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds vanilla-extract-related deps; also advances workspace sanity@next resolution. |
| plugins/sanity-plugin-cloudinary/vitest.config.ts | Registers vanillaExtractPlugin() and disables runtime style injection in tests. |
| plugins/sanity-plugin-cloudinary/tsdown.config.ts | Enables vanillaExtract: true for the package build. |
| plugins/sanity-plugin-cloudinary/src/index.test.ts | Updates exports snapshot to include ./bundle.css. |
| plugins/sanity-plugin-cloudinary/src/components/WidgetInput.tsx | Replaces styled/inline styles with wrapper components using vanilla-extract classes. |
| plugins/sanity-plugin-cloudinary/src/components/WidgetInput.css.ts | New vanilla-extract styles for WidgetInput. |
| plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.tsx | Moves inline layout styles to vanilla-extract wrappers/classes. |
| plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.css.ts | New vanilla-extract styles for CloudinaryReferenceInput. |
| plugins/sanity-plugin-cloudinary/src/components/AssetPreview.tsx | Moves thumbnail/video/raw label inline styles into vanilla-extract and uses style variants. |
| plugins/sanity-plugin-cloudinary/src/components/AssetPreview.css.ts | New vanilla-extract styles + styleVariants for preview layout. |
| plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx | Replaces inline full-width button style with a wrapper + class. |
| plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts | New vanilla-extract style using selectors: {'&&': ...} to override Button width. |
| plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx | Moves preview/diff layout styles to vanilla-extract classes. |
| plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts | New vanilla-extract styles for diff preview layout. |
| plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.tsx | Replaces styled wrapper with vanilla-extract widget class wrapper. |
| plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.css.ts | New vanilla-extract style for asset source widget height. |
| plugins/sanity-plugin-cloudinary/package.json | Adds ./bundle.css export and vanilla-extract-related devDependencies; removes styled-components from peers. |
| .changeset/cloudinary-vanilla-extract.md | Adds a patch changeset describing the styling migration. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Revert the accidental sanity@next bump (next.6 → next.8) from the migration install. Rebuild the lockfile from main and add only clsx plus the vanilla-extract catalog entries for this plugin.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
pnpm-lock.yaml:10855
- The lockfile update includes a broader bump of the prerelease Studio stack (e.g.
sanityresolves to6.9.1-next.8here) in addition to the intendedclsx+ vanilla-extract additions. If this bump isn’t intentional, it would be better to regenerate the lockfile in a way that keeps the previousnext.*resolutions to avoid unrelated dependency churn/risk in a styling-only PR.
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.
Migrates
sanity-plugin-cloudinaryfromstyled-componentsto vanilla-extract (zero-runtime CSS), following the monorepo migration skill.Changes
styled.divwrappers (Widget,SetupButtonContainer) with colocated.css.tsrules + thin component wrappersstyle={{…}}objects into.css.ts(including layout variants viastyleVariants)classNamewithclsx/lite(skill guidance);clsxadded to the workspace catalogvanillaExtract: trueintsdown.config.tsand registeredvanillaExtractPlugin()in Viteststyled-componentspeer dependency (kept as acatalog:devDependency for@sanity/uipeer alignment)Verification
pnpm formatpnpm lintpnpm knipsanity-plugin-cloudinary+ deps) — fullpnpm buildcurrently fails ontest-studiodue to prereleasesanity+ auto-updates (unrelated to this PR)pnpm test run/ cloudinary project testsCloudinary asset field
Cloudinary list and reference fields
All Cloudinary fields
Note:
style={{visibility: 'hidden'}}on the media-library widget host is intentionally kept — JS togglescontentRef.current.style.visibilityafter the iframe loads.To show artifacts inline, enable in settings.