Theme: skip per-instance <style> in default cases; hoist legacy --wp-components-* aliases to :root#78664
Open
ciampo wants to merge 4 commits into
Open
Theme: skip per-instance <style> in default cases; hoist legacy --wp-components-* aliases to :root#78664ciampo wants to merge 4 commits into
<style> in default cases; hoist legacy --wp-components-* aliases to :root#78664ciampo wants to merge 4 commits into
Conversation
ThemeProvider was always rendering its per-instance <style> element because `useThemeProviderStyles` always returned a non-empty object (the computed default ramps), so the truthiness check in `theme-provider.tsx` never short-circuited. Return `undefined` (and skip the ramp computation) when the resolved settings reduce to the prebuilt defaults: a default `primary`, default `bg`, and no `cursor.control`. In that case the prebuilt CSS at `:root` already provides every variable, so there is nothing to override. Addresses item B2 from #77462.
|
Size Change: +23 B (0%) Total Size: 8.18 MB 📦 View Changed
ℹ️ View Unchanged
|
These aliases are pure `var(...)` references that do not depend on any runtime theme settings. Emitting them from every `<ThemeProvider>` instance is wasteful and — more importantly — couples them to a provider being present in the cascade, which falls down in portals (and any other DOM subtree that lives outside an ancestor provider). Hoist them into the prebuilt `design-tokens.css` so they are available globally, including in portals, even when no `<ThemeProvider>` exists. Likewise, only emit `--wp-admin-theme-color*` overrides when the resolved `color.primary` differs from the prebuilt default — WP Core already provides default values for these properties, and we should let its admin color scheme show through when the design system has not been explicitly customized. This unblocks the B2 short-circuit (skip the per-instance `<style>` when the resolved settings match the defaults) in the portal scenario: portalled overlays no longer rely on a default-only `<ThemeProvider>` emitting the legacy aliases for them. Addresses item B3 (and supports B2) from #77462.
ciampo
changed the title
3 tasks
ciampo
changed the title
<style> in default cases; hoist legacy --wp-components-* aliases to :root
24 tasks
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
1 participant
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?
Addresses B2 and B3 from #77462.
ThemeProviderwas always rendering a per-instance<style>element (running the colour-ramp pipeline, formatting ~100 CSS variables, and inserting a DOM node) — even when the resolved settings reduced to the WPDS defaults. This PR makes that case truly free.Why?
Performance, especially around portals. Tooltip, Popover, Dialog, Select, Combobox, Menu, etc. all wrap their portalled overlay in a
<ThemeProvider>to re-establish theme tokens across the portal boundary. Every one of those wrappers was running ramp computation and inserting<style>even when nothing had been customized.In the default case (the common one), this PR reduces a
<ThemeProvider>to a thin context provider plus its wrapper<div>: no<style>, no ramp build, no per-instance CSS string.How?
--wp-components-*aliases out of the provider into the prebuilt:rootCSS (single source of truth insrc/legacy-overrides.ts, appended by the build script). Gate--wp-admin-theme-color*overrides on a user-providedcolor.primaryso WP Core's admin scheme shows through otherwise.useThemeProviderStylestoundefined(and skip the ramp computation) whencolor.primary,color.bg, andcursor.controlall resolve to the WPDS defaults. The existing truthiness check intheme-provider.tsxthen correctly omits the<style>.Behaviour-change details
A
<ThemeProvider>without acolor.primaryoverride no longer pins--wp-admin-theme-color*to the WPDS default.--wp-admin-theme-coloritself, and this PR lets that scheme show through.postcss-ds-token-fallbacks, esbuild, Vite): no regression —--wpds-*brand tokens carry a build-time fallback chain ending in#3858e9.--wp-components-*consumption outside WP Admin withoutcolor.primary: narrow regression. Fix: passcolor.primaryexplicitly, or define--wp-admin-theme-colorseparately.A naïve B2 fix on its own would have regressed portalled overlays because the static
--wp-components-*aliases used to ride along inside the per-instance<style>. B3 removes that coupling.Testing Instructions
<style data-wpds-…>in the DOM; page still renders correctly.primary→<style>appears and tokens update; reset →<style>disappears.<ThemeProvider>.--wpds-*and--wp-components-*tokens must resolve inside the portalled overlay in both cases.Automated checks
npx tsc --build packages/theme/tsconfig.json— clean.npx eslinton the changed source files — clean.npx jest packages/theme/src/color-ramps packages/theme/src/stylelint-plugins— passes. (Pre-existingds-token-fallbacks.test.tsESM failure reproduces on trunk and is unrelated.)npm i && npm run build— clean, no drift outside this PR.Testing Instructions for Keyboard
N/A — no UI changes.
Screenshots or screencast
N/A.
Use of AI Tools
This PR was prepared with the assistance of an AI coding assistant; all code, prebuilt CSS, and PR copy have been reviewed by the author before submission.