Style Cache not invalidated when StyleSheetManager target is removed

[darthtrevino]

Environment

System:

• OS: macOS High Sierra 10.13.3
• CPU: x64 Intel(R) Core(TM) i7-2860QM CPU @ 2.50GHz
• Free Memory: 494.87 MB
• Total Memory: 8.00 GB
• Shell: /usr/local/bin/fish - 2.7.1

Binaries:

• Node: 8.9.4
• Yarn: 1.5.1
• npm: 5.7.1
• Watchman: 4.7.0

npmPackages:

styled-components:

• wanted: ^3.2.3
• installed: 3.2.3

Reproduction

I'm using styled-components within an iframe on a PowerBI visual. These are instantiated pretty frequently as you switch around report pages. I'm using the StyleSheetManager to target my iframe and inject styles into the head. This works the first time, but when this frame re-renders the styles are gone from the iframe document, but styled-components is still holding onto the cached names.

Steps to reproduce

Working on a test to reproduce this

Expected Behavior

Styled-components should inject styles into newly created iframes if the old one disappears.

Perhaps ComponentStyle checks that the StyleSheetManager instance is the same instance it registered its styles with before?

Actual Behavior

styled-components has cached stylenames, but those style names are no longer available.

[kitten]

So I don’t have a lot of confidence in the StyleSheetManageer target prop. It simply is not a good solution as of now, won’t work with SSR, and is just a way to make some hacky solutions work.

I’m not familiar with the tool you’re working so I’d need more info on how you’re instantiating the iframe and what you’re doing with its content.

In theory when the StyleSheetManager mounts with this prop, it will instantiate a new StyleSheet that’s not connected to the master sheet. So the order of injection and specificity guarantees won’t hold.

That being said, when the iframe is replaced it will probably be missing the style tag and this your app crashes, right?

The easiest way to deal with this would be to remount the StyleSheetManager to make it recreate the StyleSheet.

But I’d have to play around with a reproduction to see whether I can make this work ;)

[darthtrevino]

Sure, I'm working on a test for it, I should be able to demonstrate it

[kitten]

#1635 (comment)

Left a comment here 😅 tl;dr this might be enough to get a hack done, but just to clarify, it's not something that I see as an expectation/feature of the main library. it might not even be 100% possible and clean since StyleSheetManager is so brittle

[bliitzkrieg]

@darthtrevino Is there a workaround to invalidate the cache?