Glamor's FontFace rule and Downshift seem to trigger a re-render of some sort

[thomhos]

I'm making a custom dropdown with Downshift and Glamorous / Glamor. It's working really well, but I've ran into an issue which only seems to manifest itself when I'm using glamorous components (const DropdownList = glamorous.div(...)) as elements inside the downshift and I have fontFace rules to include a custom font.

The issue is that whenever you first load the page (haven't interacted with it) and then click the dropdown. My whole page seems to do a sort of flash. It looks like the fonts are being replaced or something. When I remove the FontFace rule everything seems fine and there is no flashing going on.

I've prepared a repo which has the same problem (see below). In this repo it's a bit harder to see because only the dropdown is using a custom font, so only that flashes when you first click it.

There's two possible workarounds for this; 1) Include the font-face rules in plain css (not through glamor) 2) Don't use glamorous components as children of Downshift (although i'm not sure if this fixes the problem entirely).

Repro: https://github.com/thomhos/downshift-glamor-issue

Relevant versions:

"downshift": "^1.0.1",
"glamor": "^2.20.40",
"glamorous": "^4.4.0",
"react": "^15.6.1",

[thomhos]

A bit more info. I don't think this is related to downshift. It also seems to happen when I switch routes, but it's harder to see because the flash almost happens the same time as the content is re-rendered. I do notice that each time when the flash happens, the network inspector shows my fonts are loaded again. Clicking through my app, the fonts are loaded 8 times by now.

It doesn't seem to be related to downshift, I suspect the style block is being re-rendered which triggers that flash of fonts.

[fgnass]

This happens when speedy-mode is off and new rules are added to the stylesheet (as text nodes). The flickering goes away when NODE_ENV is set to production or you manually call speedy(true).