Glamor within an iframe

abhiaiyer91 commented 7 years ago

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, https://github.com/threepointone/glamor/issues/38

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

threepointone commented 7 years ago

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 commented 7 years ago

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!

threepointone / glamor

Glamor within an iframe #268