JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="sample"></div>

CSS

#sample {
  width: 10px;
  height: 10px;
  foo: bar;
  background: invalidText;
}

JavaScript

function getPropsBySelector(selector) {
  if (!String.prototype.trim) {
    String.prototype.trim = function () {
      return this.replace(/^\s+|\s+$/g, '');
    };
  }
  var sheetList = document.styleSheets,
    tempList = [],
    finalList = [],
    i, j;

  for (i = 0; i < sheetList.length; i++) {
    if (sheetList[i].cssRules) {
      for (j = 0; j < sheetList[i].cssRules.length; j++) {
        var rules = sheetList[i].ownerNode.innerText;
        if (rules.indexOf(selector) != -1) {
          tempList.push({
            selector: selector,
            rules: rules
          });
        }
      }
    }
  }

  if (tempList.length >= 1) {
    for (i = 0; i < tempList.length; i++) {
      var text = tempList[i].rules,
        firstBrace = text.indexOf('{'),
        lastBrace = text.lastIndexOf('}'),
        fullSelector = text.substring(0, firstBrace),
        innerStyleText = text.substring(firstBrace + 1, lastBrace);
      var tempRules = innerStyleText.split(';');
      for (j = 0; j < tempRules.length; j++) {
        if (tempRules[j]) {
          var realRules = tempRules[j].split(':');
          realRules[0] = realRules[0].trim();
          if (realRules[0] && realRules[1]) {
            finalList[realRules[0]] = realRules[1].trim();
          }
        }
      }
    }
  }

  return finalList;

}

console.log( getPropsBySelector('#sample') );