Skip to content

fix(editor): stop canvas chrome tokens shadowing site custom properties - #639

Merged
DavidBabinec merged 2 commits into
mainfrom
fix/editor-chrome-token-namespace
Oct 13, 2026
Merged

DavidBabinec merged 2 commits into
mainfrom
fix/editor-chrome-token-namespace

Conversation

@DavidBabinec

Copy link
Copy Markdown
Contributor

The bug

A site that defines a custom property sharing an admin token's name, like :root { --radius: 12px } or its own --text, rendered with the editor's values in the canvas (6px, #ededed) while the published page used the site's. The canvas chrome stylesheet is unlayered and set those admin tokens on the iframe :root, which beats anything in @layer user-authored.

The fix

EditorChromeInjector now forwards every admin token under --chrome-* (--radius becomes --chrome-radius), and the chrome rules read only those. The forwarded set is derived from the rules, so the two cannot drift. Published output is untouched: the injector only runs in the canvas.

New Playwright spec SITE-027 checks the real cascade in Chromium, since happy-dom ignores @layer. createStylesheet moved into the shared E2E helpers.

Verification

bun test                 # 7123 pass, 0 fail (new unit test fails on main)
bunx playwright test --project=e2e canvas-chrome-tokens site-files
                         # SITE-027 and SITE-013 pass; SITE-027 fails on main (6px, expected 12px)
bun run build && bun run lint   # exit 0, exit 0

The editor-chrome stylesheet in the canvas iframe is unlayered and copied
admin tokens such as --radius and --text onto :root under their own names.
Unlayered beats the site's @layer user-authored, so a site defining those
properties rendered with editor values in the canvas and its own values when
published. Every forwarded token now lives under --chrome-*, derived from the
var(--chrome-*) references in the chrome rules.
@DavidBabinec
DavidBabinec marked this pull request as ready for review October 13, 2026 15:29
…en-namespace

# Conflicts:
#	docs/features/canvas-iframe-per-frame.md
@DavidBabinec
DavidBabinec merged commit 1a7ab33 into main Oct 13, 2026
11 checks passed
@DavidBabinec
DavidBabinec deleted the fix/editor-chrome-token-namespace branch October 13, 2026 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant