JSFiddle - React, Tailwind, and code Playground

by chris5marsh

HTML

<div id="my-result">
    <p class="foo">This is foo</p>
    <p class="bar">This is bar</p>
</div>

CSS

.foo, .bar {
    color:red;
    text-decoration:underline;
}
.bar {
    background-color:lightblue;
    color:blue;
    cursor:pointer;
}
.foo {
    cursor:default;
}
@media screen and (max-width: 600px) {
  .bar {
    background: green;
    font-size: 21px;
  }
}

JavaScript

var getStyles = function(selector) {

    var stylesheets = document.styleSheets,
        r = [],
        i = 0,
        j = stylesheets.length;
    
    for (;i < j; i++) {

        var stylesheet = stylesheets[i],
            rules = stylesheet.cssRules,
            k = 0,
            l = rules.length;
        
        for (;k < l; k++) {
            
            var constructor = rules[k].constructor.name;

            if (constructor === 'CSSStyleRule') {

                if (containsSelector(rules[k].selectorText, selector)) {

                    var style = rules[k].style,
                        m = 0,
                        n = style.length;
                    
                    for (;m < n; m++) {
                        var property = style[m],
                            value = style[property];
                        r[property] = value;
                    }
                
                }
                
            } else if (constructor === 'CSSMediaRule') {
                console.warn('Don\'t know how to deal with media rules yet ☹');   
            }

        }

    }
    
    return r;
    
};

var containsSelector = function(selectorText, selector) {
    // console.log('Position of "'+selector+'" in "'+selectorText+'" is '+(selectorText.indexOf(selector)));
    return selectorText.indexOf(selector) > -1;
};

var s = getStyles('.bar');

console.log(s);