Use insertRule instead of appendChild in production

[kentcdodds]

So check this out:

Based on @threepointone's experience, I suggest that we explore the possibility of doing this. Mostly because of this:

Thoughts? 💭

[jlfwong]

Perhaps see #83?

[kentcdodds]

Ah! That's right, totally forgot about that PR 👍 cc @threepointone, see #83

[kentcdodds]

Closing as this is already tracked in #76

[threepointone]

Don't forget the tradeoff, you wouldn't want to use this in dev. Cheers all!

[xymostech]

@threepointone What do you mean when you say that the styles aren't editable? Like, you can't edit them in the style inspector, or you can't edit the contents of the style sheet?

[threepointone]

The former; this is the main caveat with this method. https://bugs.chromium.org/p/chromium/issues/detail?id=387952#c6

[threepointone]

Dunno if you folks have made any progress on this, but thought this might help. I extracted just the 'stylesheet' parts of glamor into a generic module. It handles using appendChild in dev vs insertRule in production (if available), uses multiple backing tags to expand rule space, and also has a server side 'shim'. I've tested it fairly throughly for both bugs and perf, and I like it so far. Please feel free to import { StyleSheet } from 'glamor/lib/sheet', and / or copy paste and modify for your own purposes. Cheers!