get media queries from stylesheets and dispatch events when the change

mediaQueryChange.js

var styleSheets = Array.from(document.styleSheets);
var cssRules = styleSheets.filter(function(styleSheet){
  // cross domain stylesheets without a policy file will return false
  return styleSheet.rules;
}).map(function(styleSheet){
  var rules = Array.from(styleSheet.rules);
  return rules.filter(function(rule){
    // extract only the media query rules
    return rule.type === CSSRule.MEDIA_RULE;
  })
}).reduce(function(rules){
  return rules;
});

if(cssRules){
  cssRules.forEach(function(rule){
    var mediaQueryList = window.matchMedia(rule.conditionText);
    mediaQueryList.addEventListener('change', function(event){
      window.dispatchEvent(new CustomEvent('mediaquerychange', { 'detail': {media: event.media, matches:event.matches} }))
    })
  });
}