Glamor within an iframe

[abhiaiyer91]

Hey all,

I am building a Responsive Frame View (via iframe) that allows the user to render a component within the frame and view their UI at different breakpoints.

Currently with speedy mode in production, my iframe does not have access to the parent stylesheet. Thus, I used this hack lol...

function ParentStyle() {
  // grab stylesheets from the window
  const parentStyleSheets = window.document.styleSheets;
  let cssString = '';
  for (let i = 0, count = parentStyleSheets.length; i < count; ++i) {
    const currentStyleSheet = parentStyleSheets[i];
    let cssRules;
    try {
      cssRules = currentStyleSheet.cssRules;
      for (let j = 0, countJ = cssRules.length; j < countJ; ++j) {
        cssString += cssRules[j].cssText;
      }
    } catch (e) {
      cssString += currentStyleSheet.cssText; // IE8 and earlier
    }
  }
  return <style dangerouslySetInnerHTML={{ __html: cssString }} />;
}

This gets the job done, but as styles get appended to the iframe, I see flashes of unstyled content, and i see new styles not being applied.

I saw this issue, #38

Can anyone give me some tips on solving this? I would love to contribute this fix back to glamor!

[threepointone]

the fix for this involves some core changes to the StyleSheet class. We've deferred work on this till after v3, so I don't have much good news for an immediate fix I'm afraid. Might as well not use speedy for this usecase? Sorry :/

[threepointone]

Revisiting this. It'll still be a while, but want to chat about your needs. Was wondering what your architecture for your product was, how you render components in this view, etc. Could you share? Please and thanks!