Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📦 Bundle Stats —
|
| Metric | Value | vs cody/ve-lite2-04-releases-inventory-0ee6 (a16cc68) | vs v6.16.0 |
|---|---|---|---|
| Internal (raw) | 4.47 MB | +2.0 KB, +0.0% | +33.1 KB, +0.7% |
| Internal (gzip) | 1.11 MB | +417 B, +0.0% | +10.2 KB, +0.9% |
| Bundled (raw) | 13.29 MB | +1.9 KB, +0.0% | +30.8 KB, +0.2% |
| Bundled (gzip) | 3.14 MB | +242 B, +0.0% | +8.8 KB, +0.3% |
| Import time | 1.75s | +29ms, +1.7% | +82ms, +4.9% |
bin:sanity
| Metric | Value | vs cody/ve-lite2-04-releases-inventory-0ee6 (a16cc68) | vs v6.16.0 |
|---|---|---|---|
| Internal (raw) | 7.1 KB | - | - |
| Internal (gzip) | 2.9 KB | - | - |
| Bundled (raw) | 7.1 KB | - | - |
| Bundled (gzip) | 2.8 KB | - | - |
| Import time | 4ms | +0ms, +0.5% | +0ms, +2.1% |
🗺️ View treemap · Artifacts
Details
- Import time regressions over 10% are flagged with
⚠️ - Sizes shown as raw / gzip 🗜️. Internal bytes = own code only. Total bytes = with all dependencies. Import time = Node.js cold-start median.
Visual regression coverage93 changed UI files: 20 covered, 0 pending, 73 uncovered. Per-file coverage (93)
covered: a committed |
❌ E2E Tests🟢 131 passed • 🔴 17 failed • 🟡 71 flaky • (⚪ 91 skipped) • view full report • view run 🤖 Share with an AI agent: Debug failing tests locallySANITY_E2E_PROJECT_ID=ittbm412 \
SANITY_E2E_BASE_URL=https://e2e-studio-m2ukh7mmx.sanity.dev \
SANITY_E2E_DATASET=pr-14990-chromium-36109500683 \
SANITY_E2E_DATASET_CHROMIUM=pr-14990-chromium-36109500683 \
SANITY_E2E_DATASET_FIREFOX=pr-14990-firefox-36109500683 \
pnpm test:e2e --headed \
e2e/tests/desk/defaultPanes.spec.ts \
e2e/tests/desk/documentTypeListContextMenu.spec.ts \
e2e/tests/document-actions/delete.spec.ts \
e2e/tests/enhanced-object-dialog/smoke.spec.ts \
e2e/tests/expanded-document/expanded.spec.ts \
e2e/tests/plugins/media.spec.ts \
e2e/tests/pte/FullScreenEscape.spec.ts \
e2e/tests/variants/variantTool.spec.ts \
e2e/tests/vision/vision.spec.ts |
…rome to vanilla-extract Layer 5/10 of the second low-risk cherry-pick series from the styled-components to vanilla-extract migration in #14566. Files are taken from the tip of that stack.
9a52943 to
cbbc685
Compare
📚 TypeDoc Generation Result✅ TypeDoc generated successfully!
The TypeDoc JSON file has been generated and validated. All documentation scripts completed successfully. |
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Several specificity-sensitive migrated components lack direct browser or Chromatic regression coverage.
Get a fresh assessment by requesting another Copilot review.
Review effort: Balanced
Findings: 4
Open (4)
What changed in this PR
Migrates form-related UI chrome from styled-components to vanilla-extract while preserving existing rendering and specificity.
Changes:
- Replaces styled wrappers with vanilla-extract classes and React wrappers.
- Preserves cascade behavior through variants, doubled selectors, and scoped global styles.
- Updates DragHandle tests for vanilla-extract’s jsdom limitations.
| File | Description |
|---|---|
packages/sanity/test/browser/TestForm.tsx |
Migrates the test scroller wrapper. |
packages/sanity/test/browser/TestForm.css.ts |
Adds scroller styles. |
packages/sanity/src/media-library/plugin/VideoInput/styles.tsx |
Adds the RatioBox wrapper. |
packages/sanity/src/media-library/plugin/VideoInput/styles.ts |
Removes styled-components implementation. |
packages/sanity/src/media-library/plugin/VideoInput/styles.css.ts |
Adds video ratio and portrait styles. |
packages/sanity/src/core/presence/FieldPresence.styled.tsx |
Migrates presence wrappers. |
packages/sanity/src/core/presence/FieldPresence.styled.css.ts |
Adds presence layout styles. |
packages/sanity/src/core/form/inputs/TextInput.tsx |
Applies the extracted textarea class. |
packages/sanity/src/core/form/inputs/TextInput.css.ts |
Preserves vertical textarea resizing. |
packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/HotspotImage.styles.tsx |
Migrates the hotspot container. |
packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/HotspotImage.css.ts |
Adds hotspot container styles. |
packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx |
Converts drag states to style variants. |
packages/sanity/src/core/form/inputs/arrays/common/DragHandle.test.tsx |
Updates touch-action assertions. |
packages/sanity/src/core/form/inputs/arrays/common/DragHandle.css.ts |
Defines drag-handle variants. |
packages/sanity/src/core/field/types/portableText/diff/components/Header.tsx |
Applies extracted heading styles. |
packages/sanity/src/core/field/types/portableText/diff/components/Header.css.ts |
Migrates heading reset rules. |
packages/sanity/src/core/field/diff/components/MetaInfo.tsx |
Migrates metadata text styling. |
packages/sanity/src/core/field/diff/components/MetaInfo.css.ts |
Preserves inherited text color. |
packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx |
Migrates inspector wrappers. |
packages/sanity/src/core/field/diff/components/DiffInspectWrapper.css.ts |
Adds inspector positioning styles. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Description
Layer 5/10 of a second low-risk cherry-pick stack from the styled-components to vanilla-extract migration in #14566 (the 12-PR
ve-stackseries, #14616 to #14627). The first stack (#14905 to #14914) took the purely static rules and has merged; this one takes the lowest-risk tier that is left, in the same shape: at most 20 files per layer, one commit each, every file copied verbatim from the reference tip, whose merge base withmainis455717e. On top of static rules and&&overrides, this tier allows attribute and pseudo selectors,keyframes,globalStylescoped under a local class, closed-setstyleVariants, a few prop- or theme-driven values (createVarwithassignInlineVars, oruseTheme_v2) and a few media or container queries with default-theme literal breakpoints. Layers are ordered by risk, lowest first, so the stack can be merged bottom-up and stopped at any layer. Based on #14989.This layer covers form chrome: the array drag handle, the text input's textarea, the hotspot image, field presence, the browser-test form harness, three diff components and the media-library video input.
What to review
DragHandle: thecssbranches becomestyleVariants, and the button mirrors itstouch-actionindata-touch-actionbecause jsdom cannot compute vanilla-extract styles;DragHandle.test.tsxasserts on that attribute instead oftoHaveStyle.TextInputuses&&[data-as='textarea'](0,3,0) overTextArea's own (0,2,0) rule, which the original tied; the portable text diffHeaderuses&&:not([hidden])because the original also targeted:not([hidden]).VideoInput/styles.tsbecomesstyles.tsx; itsdisplaystays single-class on purpose becauseBox's (0,2,0) rule beat the original too.test/browser/TestFormis browser-test harness only.sanity(core/form,core/field,core/presence,media-library,test/browser).Testing
Each layer passes
oxfmt --checkand a type-awareoxlint --type-checkof its files plus every file importing them, on its own commit. At the stack tippnpm check:oxlintpasses, the packages build with the migrated rules inlib/bundle.css, andpnpm vitest run --project=sanity --changed origin/mainpasses (227 files, 1885 tests, rebased onmainat4cebde0), as does the exports snapshot test, so no public export changes shape. Every Storybook story that renders a file from this stack (17 stories) was screenshotted onmainand at the tip and compared pixel by pixel: all 17 are identical, while a one-value negative control produced 42,739 changed pixels. For this layer, the FieldDiffChrome (MetaInfo) and ArrayItemLayouts (FieldPresence) stories are pixel-identical.Notes for release
N/A – Internal styling migration.