refactor(form): migrate portable text toolbar, decorators and reference autocomplete to vanilla-extract - #14996
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-08-shared-components-0ee6 (8cc6c99) | vs v6.16.0 |
|---|---|---|---|
| Internal (raw) | 4.46 MB | -32 B, -0.0% | +29.4 KB, +0.6% |
| Internal (gzip) | 1.11 MB | -322 B, -0.0% | +9.1 KB, +0.8% |
| Bundled (raw) | 13.29 MB | -19 B, -0.0% | +27.1 KB, +0.2% |
| Bundled (gzip) | 3.14 MB | -262 B, -0.0% | +7.7 KB, +0.2% |
| Import time | 1.84s | -38ms, -2.0% | +87ms, +5.0% |
bin:sanity
| Metric | Value | vs cody/ve-lite2-08-shared-components-0ee6 (8cc6c99) | 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 | 5ms | -0ms, -3.6% | +0ms, +4.8% |
🗺️ 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
📚 TypeDoc Generation Result✅ TypeDoc generated successfully!
The TypeDoc JSON file has been generated and validated. All documentation scripts completed successfully. |
Contributor
✅ E2E Tests🟢 214 passed • 🟡 3 flaky • (⚪ 93 skipped) • view full report • view run |
Contributor
Visual regression coverage166 changed UI files: 34 covered, 10 pending, 122 uncovered. Per-file coverage (166)
covered: a committed |
Contributor
stipsan
added this pull request to stack #14991
September 25, 2026 07:47
cursor
Bot
force-pushed
the
cody/ve-lite2-09-portable-text-references-0ee6
branch
from
September 25, 2026 08:07
9dd365c to
6813d50
Compare
cursor
Bot
force-pushed
the
cody/ve-lite2-09-portable-text-references-0ee6
branch
from
September 25, 2026 08:15
6813d50 to
e37b30b
Compare
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Decorator theme resolution no longer follows a nested theme where custom components mount renderDefault().
Get a fresh assessment by requesting another Copilot review.
Review effort: Balanced
Findings: 1
What changed in this PR
Migrates form and Portable Text components from styled-components to vanilla-extract while preserving existing UI behavior.
Changes:
- Extracts toolbar, autocomplete, modal, decorator, indicator, and field-status styles.
- Replaces styled wrappers with class-based components.
- Adds theme support to decorator tests.
| File | Description |
|---|---|
ReferenceInput/ReferenceAutocomplete.tsx |
Applies extracted autocomplete styles. |
ReferenceInput/ReferenceAutocomplete.css.ts |
Defines popover and text styles. |
PortableText/toolbar/Toolbar.tsx |
Replaces styled toolbar wrappers. |
PortableText/toolbar/Toolbar.css.ts |
Defines toolbar layout styles. |
PortableText/toolbar/BlockStyleSelect.tsx |
Applies the extracted menu-item class. |
PortableText/toolbar/BlockStyleSelect.css.ts |
Styles selected blockquote options. |
PortableText/text/Decorator.tsx |
Uses theme-based style variants. |
PortableText/text/Decorator.test.tsx |
Adds the required theme provider. |
PortableText/text/Decorator.css.ts |
Defines dark and light code-mark variants. |
PortableText/object/modals/PopoverModal.styles.tsx |
Adds class-merging wrapper components. |
PortableText/object/modals/PopoverModal.styles.ts |
Removes styled-components wrappers. |
PortableText/object/modals/PopoverModal.styles.css.ts |
Defines modal layout and overflow styles. |
PortableText/_common/StyledChangeIndicatorWithProvidedFullPath.tsx |
Replaces the styled indicator wrapper. |
PortableText/_common/StyledChangeIndicatorWithProvidedFullPath.css.ts |
Defines change-indicator sizing. |
GlobalDocumentReferenceInput/ReferenceAutocomplete.tsx |
Applies extracted autocomplete styles. |
GlobalDocumentReferenceInput/ReferenceAutocomplete.css.ts |
Defines autocomplete styles. |
CrossDatasetReferenceInput/ReferenceAutocomplete.tsx |
Applies extracted autocomplete styles. |
CrossDatasetReferenceInput/ReferenceAutocomplete.css.ts |
Defines autocomplete styles. |
formField/FormFieldStatus.tsx |
Replaces the styled root element. |
formField/FormFieldStatus.css.ts |
Defines status layout variants. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
cursor
Bot
force-pushed
the
cody/ve-lite2-09-portable-text-references-0ee6
branch
from
September 25, 2026 08:45
e37b30b to
c2c7093
Compare
…ce autocomplete to vanilla-extract Layer 9/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.
cursor
Bot
force-pushed
the
cody/ve-lite2-09-portable-text-references-0ee6
branch
from
September 25, 2026 09:01
c2c7093 to
e6e61f3
Compare
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 9/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 #14995.This layer covers the portable text toolbar, block style select, decorators, change indicator and popover modal, the three reference autocomplete popovers, and form field status.
What to review
Decorator: the scheme branch becomesstyleVariantskeyed byuseTheme_v2().color._dark; a custom decorator with no tag now renders an explicitspan, which is whatstyled.spandid whenaswas undefined.Decorator, above any custom decorator component, so a custom decorator that wrapsrenderDefault()in aCardwith another scheme got the outer scheme's blend mode. A module-levelDecoratorRootnow reads the theme where the mark renders, as the styledRootdid. A new case inDecorators.browser.test.tsxrenders a customcodedecorator inside a darkCardin the light studio and assertsmix-blend-mode: screen; it fails withmultiplyagainst the reference version. BecauseDecoratorno longer reads the theme itself,Decorator.test.tsxneeds noThemeProviderand stays as onmain.PopoverModal.styles.tsbecomes.tsxwrappers.ReferenceAutocomplete(three copies) andStyledChangeIndicatorWithProvidedFullPathmove their& > divrules toglobalStyleunder the local class.Toolbar.tsxalso carries fix(core): let a container block config add portable text toolbar actions #14961 (useToolbarSchemaTypes), whichmainadded in a separate hunk; the rebase kept both.sanity(core/form).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 EditorChrome story (which rendersToolbar) is pixel-identical, and the Decorators, SchemaLessValues and ToolbarApplicableSchema browser tests pass in Chromium, including the new nested-scheme case.Notes for release
N/A – Internal styling migration.