Improve browser support about styled-components

[geelen]

Right it's due to missing Symbol on IE. We're not using it, but postcss is using for (let x in y) and babel transpiles that to something that uses Symbol.

There's a small core-js symbol polyfill we should be able to use: https://github.com/zloirock/core-js/blob/v2.4.1/modules/es6.symbol.js

...but I won't get to that till tomorrow at the earliest. The real solution would be to change postcss to not use those loops, but that might be a while before I can do that one.

[mxstbr]

It's interesting that it doesn't render on IE at all, not sure if that's a thing we messed up or react or something. Do you have access to logs in the console of those browsers? Let's get that support up!

[amsb]

I updated my example app to make it easier to test on the BrowserStack snapshots page Microsoft hosts and explicitly imported symbol from core-js at the top of my entrypoint (I think create-react-app might already be including it, but just to be sure). No luck, but maybe test doesn't remedy the need for Symbol deeper into the dependency tree?

[geelen]

Turned out to be easier than I thought. Pushed PR #91.

[amsb]

Thanks @geelen and @mxstbr! I confirm that my example app now renders on IE11. I assume the browser compatibility matrix for styled-components doesn't include IE10 or earlier since Microsoft isn't supporting these browsers on the desktop anymore themselves (with the exception of IE9 on Vista which will be EOL'ed April 2017).

Nevertheless, I'd be curious if any older versions of IE could be supported with a polyfill and think it would be helpful to have a sentence in the README communicating the browser compatibility targets.

[mxstbr]

Nevertheless, I'd be curious if any older versions of IE could be supported with a polyfill

Is there any errors in the console for earlier versions? What's missing?

[amsb]

I downloaded an IE10 VM and dug deeper to find the issue, but someone else beat me to posting it and submitted #107. :)