JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="container something">
  <p>test</p>
</div>

SCSS

*,
*:before,
*:after{
  box-sizing: border-box;
}

body{
  font-size: 16px;
}


.container-2{
  color: #f00;
}

.container{
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  
  p{
    font-family: sans-serif;
    font-size: 12px;
  }
  
}

JavaScript

console.clear();

var pullNestedStyles = function(elem){
	var ELEMS,
  		collectElem,
      matchElem;

	ELEMS = [];
  
  collectElems = function(_elem){
    ELEMS[ELEMS.length] = _elem;
    if(_elem.children){
	    Array.prototype.forEach.call(_elem.children, collectElems);
    }
  }
  
  matchElem = function(_elem){
  	var sheets = document.styleSheets,
    		o = [];
    _elem.matches = _elem.matches || _elem.webkitMatchesSelector || _elem.mozMatchesSelector || _elem.msMatchesSelector || _elem.oMatchesSelector;
    for(var i in sheets){
      var rules = sheets[i].rules || sheets[i].cssRules;
      for(var r in rules){
        if(
        	_elem.matches(rules[r].selectorText)/* ||
          rules[r].selectorText &&
          (
          	(_elem.id && rules[r].selectorText.match(new RegExp('\\#' + _elem.id + '\\b([^-]|$)', 'ig'))) ||
          	(_elem.className.match(/\S/) && rules[r].selectorText.match(new RegExp('\\.(' + _elem.className.replace(' ', '|') + ')\\b([^-]|$)', 'ig')))
          )*/
        ){
          o.push(rules[r].cssText);
        }
      }
    }
    //console.log(_elem, o);
    o.forEach(function(rule){
    	if(rule.match(/.*\{.*\}$/i)){
        var props = rule.replace(/^(.*)\{(.*)\}$/, '$2');
        if(props.match(/\d+(px|rem)/ig)){
          var selector = rule.replace(/^(.*)\{(.*)\}$/, '$1');
          console.log(rule, [selector, props]);
        }
      }
    });
  }
	
  collectElems(elem);
  
  ELEMS.forEach(matchElem);
}

pullNestedStyles(document.querySelector('.container'));