Iframe and StyledLeaf / StyledElement

[ghingis]

Hey,

I just ran into this, after a bit of debugging I finally found the source of this issue, let me describe it.

As far as I can tell plate under the hood uses twin.macro to put styles on StyledLeafs and StyledElements.
It is really nice, since it will create a style tag at the top of the document (head) and that will hold the style rather than putting a style attribute on the tag.
The issue with this is, when you put the editor in an iframe as the iframe example shows, the created style and the tag that would use it will be in "different" documents.

I managed to put together an example that show the issue with twin.macro. If you inspect the document you will see it.

And also created a discussion on their github, but if this is not something that they plan to support, maybe plate has to fall back and find a different solution to handle styles on StyledLeaf and StyledElement if it still plans to support iframes.

[zbeyens]

In the meantime you can recreate your own StyledLeaf / StyledElement, but this is indeed problematic if someone is using more Plate components, as they all use twin.macro

Looking forward twin.macro issue feedback

[ghingis]

Once I realized the issue I done that, but I thought it deserves a discussion.
Since, from this point onwards it is clear that until the issue is solved examples / plugins won't necessarily work if they are wrapped in an iframe.

[ghingis]

I found a solution when it comes to twin.macro.

But the same does not work for me when it comes to plate.

Either plate does something different, uses CacheProvider somewhere in the tree or it just needs a twin.macro upgrade..

I do not know yet, but it's end of the day for me, so do not eagerly wait for a solution from me today.

[ghingis]

According to this:
styled-components/styled-components#3244
There should be a fix in the 5.2 version:

Make sure StyleSheetManager renders all styles in iframe / child windows (see #3159) thanks @eramdam!

But in packages/ui/styled-components/package.json the styled-components version is locked to 5.1.1

I won't have time to check it today, but I will check if it makes the difference or not.

[zbeyens]

We locked to this version because of styled-components/styled-components#3374

SSR was broken in later version 3 weeks ago, but I don't now if the current latest fixed it

[ghingis]

@zbeyens Hey! It seems 22h ago styled-components v5.3.1 got released.

It has a PR styled-components/styled-components#3553 that claims to fix styled-components/styled-components#3374

If you have the time please check if this actually solves the SSR issue that you ran into and bump the styled-components version in packages/ui/styled-components/package.json if possible, thanks!

[zbeyens]

Cool! Done in #961

[ghingis]

Thanks a bunch!