refactor(core): migrate studio screens, announcements and scheduled publishing tool to vanilla-extract - #14992
Draft
stipsan wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Stats —
|
| Metric | Value | vs cody/ve-lite2-05-form-chrome-diffs-0ee6 (cbbc685) | vs v6.16.0 |
|---|---|---|---|
| Internal (raw) | 4.46 MB | -2.1 KB, -0.0% | +31.0 KB, +0.7% |
| Internal (gzip) | 1.11 MB | -612 B, -0.1% | +9.6 KB, +0.9% |
| Bundled (raw) | 13.29 MB | -1.8 KB, -0.0% | +29.0 KB, +0.2% |
| Bundled (gzip) | 3.14 MB | -445 B, -0.0% | +8.4 KB, +0.3% |
| Import time | 1.06s | -20ms, -1.8% | +23ms, +2.2% |
bin:sanity
| Metric | Value | vs cody/ve-lite2-05-form-chrome-diffs-0ee6 (cbbc685) | 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 | 3ms | -0ms, -3.6% | -0ms, -0.5% |
🗺️ 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.
Contributor
❌ E2E Tests🟢 134 passed • 🔴 17 failed • 🟡 58 flaky • (⚪ 101 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-1lyvepunx.sanity.dev \
SANITY_E2E_DATASET=pr-14992-chromium-36109501521 \
SANITY_E2E_DATASET_CHROMIUM=pr-14992-chromium-36109501521 \
SANITY_E2E_DATASET_FIREFOX=pr-14992-firefox-36109501521 \
pnpm test:e2e --headed \
e2e/tests/default-layout/versionStatus.spec.ts \
e2e/tests/comments/inline.spec.ts \
e2e/tests/desk/documentTypeListContextMenu.spec.ts \
e2e/tests/desk/documentList.spec.ts \
e2e/tests/document-actions/delete.spec.ts \
e2e/tests/document-actions/unpublish.spec.ts \
e2e/tests/expanded-document/expanded.spec.ts \
e2e/tests/inputs/array-capabilities.spec.ts \
e2e/tests/inputs/array.spec.ts \
e2e/tests/releases/displayDocument/DisplayedDocument.spec.ts \
e2e/tests/pte/FullScreenEscape.spec.ts \
e2e/tests/tasks/tasks.spec.ts \
e2e/tests/variants/variantTool.spec.ts \
e2e/tests/vision/vision.spec.ts |
Contributor
📚 TypeDoc Generation Result✅ TypeDoc generated successfully!
The TypeDoc JSON file has been generated and validated. All documentation scripts completed successfully. |
Contributor
Visual regression coverage113 changed UI files: 26 covered, 4 pending, 83 uncovered. Per-file coverage (113)
covered: a committed |
Contributor
stipsan
added this pull request to stack #14991
September 25, 2026 07:47
…ublishing tool to vanilla-extract Layer 6/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.
stipsan
force-pushed
the
cody/ve-lite2-06-studio-screens-scheduling-0ee6
branch
from
September 25, 2026 07:47
75596bd to
aea264f
Compare
Contributor
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The migration preserves component contracts and cascade behavior, with documented build, test, and visual-parity verification.
Review effort: Balanced
Findings: None
What changed in this PR
Migrates Studio screens and scheduling/release UI from styled-components to vanilla-extract while preserving existing layout, responsiveness, and specificity.
Changes:
- Replaces styled wrappers with colocated vanilla-extract classes.
- Preserves responsive upsell layouts and UI primitive overrides.
- Migrates announcements, error screens, scheduling tools, and release upsells.
| File | Description |
|---|---|
packages/sanity/src/core/studio/workspaces/CorsOriginErrorScreen.tsx |
Applies extracted error-screen styles. |
packages/sanity/src/core/studio/workspaces/CorsOriginErrorScreen.css.ts |
Defines CORS screen layout and link styles. |
packages/sanity/src/core/studio/workspaces/ConfigErrorScreen.tsx |
Replaces styled configuration-error elements. |
packages/sanity/src/core/studio/workspaces/ConfigErrorScreen.css.ts |
Defines configuration screen and inline-code styles. |
packages/sanity/src/core/studio/upsell/UpsellPanel.tsx |
Applies responsive vanilla-extract upsell styles. |
packages/sanity/src/core/studio/upsell/UpsellPanel.css.ts |
Preserves image breakpoints and content alignment. |
packages/sanity/src/core/studio/StudioLayoutComponent.tsx |
Migrates the fullscreen search portal card. |
packages/sanity/src/core/studio/StudioLayoutComponent.css.ts |
Defines fixed portal positioning and overflow override. |
packages/sanity/src/core/studio/studioAnnouncements/StudioAnnouncementsDialog.tsx |
Replaces announcement dialog styled wrappers. |
packages/sanity/src/core/studio/studioAnnouncements/StudioAnnouncementsDialog.css.ts |
Defines scrolling, sticky-header, and close-button layout. |
packages/sanity/src/core/studio/studioAnnouncements/Divider.tsx |
Uses state-dependent divider classes. |
packages/sanity/src/core/studio/studioAnnouncements/Divider.css.ts |
Defines divider appearance and visibility transition. |
packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx |
Applies extracted schema-error styles. |
packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.css.ts |
Preserves code and multiline-message styling. |
packages/sanity/src/core/scheduled-publishing/tool/Tool.tsx |
Replaces the styled scheduling column wrapper. |
packages/sanity/src/core/scheduled-publishing/tool/Tool.css.ts |
Defines column divider styling. |
packages/sanity/src/core/scheduled-publishing/tool/schedules/Schedules.tsx |
Migrates schedule panel containers. |
packages/sanity/src/core/scheduled-publishing/tool/schedules/Schedules.css.ts |
Preserves container width override. |
packages/sanity/src/core/releases/tool/overview/SchedulesUpsell.tsx |
Migrates release upsell panel containers. |
packages/sanity/src/core/releases/tool/overview/SchedulesUpsell.css.ts |
Preserves panel width and flex behavior. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This branch was successfully deployed
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.
Description
Layer 6/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 #14990.This layer covers studio screens: announcements, schema problem groups, the CORS and config error screens, the upsell panel, the studio layout's fullscreen search portal, and the scheduled publishing tool with its releases upsell.
What to review
UpsellPanel: the_responsive()direction array becomes a single@mediarule atmedia[1](600px), as its comment explains; the horizontal layout's image is the only value that changes by breakpoint.StudioLayoutComponent.tsxwas already a three-way merge when the stack was built:mainhad added a comment in another hunk after the reference's merge base, so it is not a byte-for-byte copy of the reference file.ConfigErrorScreenandCorsOriginErrorScreenuse&&formin-height, while their link and inline-code classes stay single-class on purpose becauseText's& aand& coderules outranked the originals too.sanity(core/studio,core/scheduled-publishing,core/releases).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 SchemaProblemGroups, UpsellPanel and CorsOriginError stories are pixel-identical. The UpsellPanel comparison, with the negative control:UpsellPanel story on main and on this stack, identical, plus the negative control diff
Notes for release
N/A – Internal styling migration.
To show artifacts inline, enable in settings.