Global styles CSS-variables don't apply to the iframe in site-editor

[aristath]

Description

When in the site-editor using an FSE theme, I can see that the CSS-variables get generated properly but they are applied to the main :root element. The problem is that they don't get applied to the root element inside the iframe, and as a result themes appear broken/unstyled.

Step-by-step reproduction instructions

1. Install and activate the Q theme from its github repo: https://github.com/aristath/q - The theme.json file has already been updated to accommodate the latest structural changes.
2. Visit the site-editor.

Expected behaviour

CSS-variables should be applied to the iframe and not the root element.

Actual behaviour

CSS-variables get applied to the root element and the iframe does not inherit them.

WordPress information

• WordPress version: 5.6
• Gutenberg version: Master branch (currently https://github.com/WordPress/gutenberg/tree/502f79a6e0aa65c68562efade58aadc7ab334d4b)
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Desktop
• Operating system: Pop!_OS (basically Ubuntu)
• Browser: Firefox & Chrome

[aristath]

Thank you @nosolosw 🙌🙌🙌