Fix bug where styles have their media queries removed on IE

[reklawnos]

In IE 9, appending two styles with media queries to a StyleSheet's cssText property results in the first style's media query being removed and that first style will always apply without the query.

For example:

var styleTag = document.createElement('style');
document.body.appendChild(styleTag);
styleTag.styleSheet.cssText +=
  '@media (min-width: 500px) { body { background-color: blue; } }';
styleTag.styleSheet.cssText +=
  '@media (min-width: 700px) { body { background-color: red; } }';

Causes the body element to be red for window widths ≥ 700px, but it is blue otherwise, even at widths < 500px.

This change adds a styleString variable that keeps track of the contents of the current styleTag, and updates the cssText content with styleString instead of appending to it with +=.

Here's a JS Bin that demonstrates the issue, which includes a commented-out solution. Note that the JS Bin won't work outside of IE. If you don't want to open up IE you can take a look at these gifs, recorded on IE 9:

Using styleSheet.cssText

Using innerText

[khanbot]

Hey @reklawnos,

Thanks for the PR! Mind signing our Contributor License Agreement?

When you've done so, go ahead and comment [clabot:check] and I'll check again.

Yours truly,
khanbot

[reklawnos]

[clabot:check]

[khanbot]

CLA signature looks good 👍

[lencioni]

Did you do any profiling to see what the performance impact this might be?

Also, I wonder if we should be using insertRule() instead?

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

[reklawnos]

@lencioni I changed the approach a bit so that we're still using cssText. innerText had a roughly 10x performance penalty, and since AFACT this issue only affects styles with media queries that's not really acceptable.

I found that insertRule had around the same performance as the current cssText approach in IE, but it appeared to be quite a bit more performant than the appendChild approach in Chrome/Firefox. Its performance is pretty consistent, whereas appendChild gets quite a bit slower every time new styles are added.

There's a fair amount of work that'd need to be done to get insertRule to function. There was some work done to use insertRule in #83 and #157, and some discussion in #76. Looks like it would require some refactoring and changes to several tests. insertRule also throws when you pass it selectors the browser doesn't recognize, e.g. .foo:-moz-placeholder in Chrome. We could probably get some insight from looking at mattkrick's fork of Aphrodite which uses insertRule.

[lencioni]

PR message needs to be updated.

Would you be interested in pairing with me on the insertRule stuff sometime?

[lencioni]

I wonder if you could avoid managing styleString by doing this instead?

styleTag.styleSheet.cssText = styleTag.innerText + cssContents;

With your current approach I mostly worry about something else modifying the stylesheet and then that getting blown away (in addition to the extra bookkeeping complexity). Doesn't seem super likely, but if we can trivially avoid it might as well, right?

Need to see if that is still okay for performance.

[reklawnos]

I agree that we should avoid having to keep track of styleString if possible, but that solution won't quite work because innerText doesn't get updated when cssText is altered.

[lencioni]

Closing, as I believe this was fixed by #240.