Iframe issue

[ghingis]

Hey,

we ran into an issue, some of our components is in an iframe and when they are using twin.macro their design is not shown since it is inside the parent document head rather in the iframe head.
Here is an example that shows the issue:
https://codesandbox.io/s/hidden-hill-37qjs?file=/src/App.js

The first div gets the generated css-1y37tr1-App class but the class definition is in the parent document, not in the iframe.

Is there a way to tell twin.macro that it should put the <style> in the iframe?
If not is this something that you plan to support?

[ben-rogerson]

Hey,

Interesting problem you've found there.

Twin only converts the tailwind classes into styles and it's the css-in-js framework (eg: emotion/stitches) that takes care of where the styles are placed.

So I'd suggest having a search of their issues section for any iframe workarounds.

Please let me know you go on this, I'm keen to hear how you solve it.

[ghingis]

With the latest twin.macro I think I found the solution, the buttons are still not perfect but that is probably because I missed something (some reset or something is not applied in the iframe).

These are the key parts:
https://codesandbox.io/s/admiring-bohr-thlwl?file=/src/components/IFrame.js:131-390
https://codesandbox.io/s/admiring-bohr-thlwl?file=/src/components/IFrame.js:1144-1299

(If nothing loads on the browser portion just click the refresh button on that tab, I do not know why does it do that, but it's the same with the original example too..)

[ben-rogerson]

Nice one! Looks like a good solution.

Looks like you can solve the mentioned reset issue by moving GlobalStyles inside the provider:

{mountNode && createPortal(
    <div>
-     <GlobalStyles />
      <CacheProvider value={memoizedCreateCacheWithContainer(mountHead)}>
+         <GlobalStyles />
          {React.Children.only(children)}
      </CacheProvider>
    </div>,
    mountNode,
)}

[ben-rogerson]

@ghingis Hey, did you get any further on this?

[ghingis]

Nope, you were right, moving the <GlobalStyles /> solves the issue, so the solution in the codesandbox was enough for us.

[mosesoak]

@ben-rogerson Hi! We're encountering a similar problem trying to use Netlify CMS, which has a preview pane in an iframe. They have a very long-running (3 yrs +!) issue about trying to support jss libs, in which I asked about Emotion 11 support but they say that only v10 is supported: decaporg/decap-cms#793 (comment) (only about 3-4 replies above that are useful).

I'm confused as to why I can't make it work with the latest twin and emotion though, since I'm able to get the active iframe element and its head element. The CMS might add a portal (I tried adding one but it just made content disappear), I am able to render a text div with a twin data tag on it, although the style isn't currently transferred to the iframe. I'm then using this HOC to apply the emotion cache:

/* eslint-disable react/display-name */
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/core';
import weakMemoize from '@emotion/weak-memoize';
import React from 'react';
import { GlobalStyles } from '~/styles/GlobalStyles';

const memoizedCreateCacheWithContainer = weakMemoize(
  (container: HTMLHeadElement) => ({
    ...createCache({ key: 'cms-emotion-cache', container }),
    stylis: (key: string, value: string) => [],
  }),
);

export default (Component) => (props) => {
  // asserting since we know this element exists in the CMS
  const iframe: HTMLIFrameElement = document.querySelector('#preview-pane')!;
  const head = iframe.contentDocument!.head;
  const cache = memoizedCreateCacheWithContainer(head);
  return (
    <CacheProvider value={cache}>
      <GlobalStyles />
      <Component {...props} />
    </CacheProvider>
  );
};

The child is a div with a color style on it, which you do see getting created, albeit without the custom cache prefix of 'cms-emotion-cache' that one would think Emotion would be adding based on the key setting in the createCache call.

Do you have any idea how we might be able to get Twin to inject styles onto this iframe head? I know this is outside your domain but any ideas? Feel free to contact me via my Github email if you have time to consult with us privately -- this is some difficult engineering territory but we're eager for any kind of solution!

Thanks again Ben

[mosesoak]

I came up with a non-style-based solution to our problem, so the pressure's off for us to solve this special use case with Emotion. That said, I'm happy to collaborate on it if you want to look into it further! Thanks