distinct handling using multiple css files

[axlay]

In case of using more than one css file, the viewport-units-buggyfill has to treat the fixes for the css files separately in order to avoid fixes used in the one file (e.g. mobile css) are also applied to the other (e.g. desktop css)

[Rodney Rehm]

The problem is with the following configuration:

<link rel="stylesheet" href="mobile.css" media="(max-width: 1000px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1001px)">

The buggyfill effectively loses the mediaquery on the <link> as it dumps all viewport-unit rules it can find into the same output.

We can either create multiple <style> elements, one for each <link>. Or re-walk the entire CSSOM on every orientationchange and simply kick out all the MQs that don't apply. As there are potentially thousands of declarations, but only a few that actually use viewport units, I would prefer the multiple-<style> approach. But since the refresh option (re-walking the CSSOM) is much simpler to implement, I'm going with that approach first - until someone complains about performance ;)