element queries concept

/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
    @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto:400,700);
.element {
  height: 20px;
  background: #F44336;
  color: #000;
  padding: 20px;
}
@element (max-width: 300px) {
  .element {
    background: #3F51B5;
    height: 50px;
    color: #fff;
  }
}
.wrapper1 {
  width: 40%;
}
.wrapper2 {
  width: 30%;
}
.wrapper3 {
  width: 20%;
}
.wrapper4 {
  width: 10%;
}

.wrapper {
  margin: 50px;
}

.warning {
  background: #D32F2F;
  color: #fff;
  padding: 10px;
}

body {
  margin: 0;
  background: #FFD54F;
  color: #000;
  font-family: 'Roboto', sans-serif;
}

pre {
  background: #222;
  color: #ffa;
  margin: 10px 0;
  padding: 10px;
  font-size: 20px;
  font-family: 'Source Code Pro', monospace;
}

/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
    var stylesheet = document.querySelector('style').innerHTML;


var elementQuery = stylesheet.match(/@element[^\}]+/)[0];
var c = elementQuery.match(/\([a-z\- 0-9:]+\)/g)[0];
var d = elementQuery.replace(/@element[^\n]+/g, '');
var e = d.match(/[\.#][^\{]+/g)[0];

var el = document.querySelectorAll(e);
d = d.replace(/\n+/g,'').replace(/\s+/g,' ');
rule = d.match(/[a-z\-]+:.*;/g)[0];//.split(':');
rule = rule.split(';');
var rules = [];
[].forEach.call(rule, function(elm,i){
  var arr = elm.split(':');
  rules.push(arr);
});

function checkQuery(){
  [].forEach.call(el,function(elm,i){
    if(elm.clientWidth <= c.match(/\d+/)[0]){
      [].forEach.call(rules,function(r,idx){
        elm.style[r[0].trim()] = r[1];
      });
    } else {
      [].forEach.call(rules,function(r,idx){
        elm.style[r[0].trim()] = null;
      });   
    }    
  });
}


window.addEventListener('resize', checkQuery, false);

checkQuery();