Site Editor: CSS-in-JS regression in v10.5.0 RC 1 for components in the sidebar

[andrewserong]

Description

In Gutenberg 10.5.0 RC 1 there appears to be a regression in the CSS-in-JS styles within the sidebar of the site editor. Components using Emotion for CSS-in-JS don't appear to be applying their styles (thought they do in the regular post editor). The recent changes in #31010 supports rendering these styles within the editor canvas, however the sidebar exists outside of the site editor iframe, so I was wondering if there's an issue where the CSS is only being rendered in the iframe and not the parent document? (I believe it'll need to be rendered in both places).

Possibly related to: #31010 or #31048

CC: @sarayourfriend @youknowriad

Step-by-step reproduction instructions

1. Using the FSE-capable TT1-blocks theme, go to the site editor
2. Insert a block that uses components relying on CSS-in-JS into a template part (e.g. the Blog Posts block uses a range control that demonstrates the issue)
3. Look at the sidebar and see if the components are rendering as expected (screenshots below)
4. Compare with adding the some block in the regular post editor

Expected behaviour

This is how it looks prior to 10.5.0 RC 1

Actual behaviour

This is how it looks running 10.5.0 RC 1

WordPress information

• Gutenberg version: GB 10.5.0 RC 1, testing in a wpcom environment
• Are all plugins except Gutenberg deactivated?
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1-blocks

Device information

• Device: Desktop
• Operating system: MacOS 11.2.3
• Browser: Chrome 90

[andrewserong]

Thanks for fixing this up, Riad! 🙇

[youknowriad]

👍 Let me know if you find anything weird, this is a tricky one.