(Optionally) Use a singleton style tag to inject styles

[zgotsch]

IE9 will only use the first 31 <style> tags (https://support.microsoft.com/en-us/kb/262161). Since AFAICT Aphrodite creates a <style> tag for each class, it won't work on IE9 with a lot of components.

I don't know what the perf implications of this are, but I know that webpack's style-loader (https://github.com/webpack/style-loader) has an option for whether to use a single style tag or to use multiple.

[xymostech]

Woah. Didn't know that 31 tag limit was a thing! We could probably make an option to append to an existing <style> tag instead of making a new one each time.

[zgotsch]

Yeah, you can probably just create one with an id the first time and then getElementById subsequent injections.

[jlfwong]

Thanks for the bug report! Glad we got this now and not in production :)

It sounds like webpack does many style tag insertions by default, but detects when its in <= IE9, and then switches automatically to appending to a single style tag. Shouldn't be too hard to implement.

It would probably be good to land #1 too to help with this problem too.

[xymostech]

I looked into the perf implications of this, it looks like using more style tags is faster than appending to a style tag each time, but not appending to a style tag all the time is way better. I'm gonna look into this now.

[xymostech]

Oops, forgot to link to the jsperf: http://jsperf.com/append-to-style-vs-create-new-style