Repository navigation
fix(editor): stop canvas chrome tokens shadowing site custom properties - #639
Merged
Merged
Conversation
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
marked this pull request as ready for review
October 13, 2026 15:29
…en-namespace # Conflicts: # docs/features/canvas-iframe-per-frame.md
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.
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
EditorChromeInjectornow forwards every admin token under--chrome-*(--radiusbecomes--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-027checks the real cascade in Chromium, since happy-dom ignores@layer.createStylesheetmoved into the shared E2E helpers.Verification