JSFiddle - React, Tailwind, and code Playground

by Michael Barros

HTML

<div class="one">
        <div class="two" id="two">
            <div class="three_1">
                <div class="four_1"></div>
            </div>
            <div class="three_2">
                <div class="four_2"></div>
            </div>
        </div>
    </div>

CSS

.one {display:block;position:relative;}
    .two {display:inline-block;font-family:'Montserrat';}
    .three_1 {display:table;position:absolute;left:0;}
    .three_2 {display:table;position:absolute;right:0;}
    .four_1 {display:table-cell;position:relative;}
    .four_2 {display:table-cell;position:relative;}

JavaScript

function convertObjlike(css) {
    let s = {};

    if (!css) return s;

    css = css.split('; ');

    for (let i in css) {
        let l = css[i].split(': ');

        s[l[0].toLowerCase()] = l[1];
    }

    return s;
}

function getCss(a) {
    let sheets = document.styleSheets;
    let o = {};

    for (let i in sheets) {
        let rules = sheets[i].rules || sheets[i].cssRules;

        for (let r in rules) {
            if (a === rules[r].selectorText) {
                o = convertObjlike(rules[r].style.cssText);
            }
        }
    }

    return o;
}

let anObject = {};

function styleRecursive(element) {
    anObject[element.className] = getCss('.' + element.className);

    let children = element.children;

    for (let i = 0; i < children.length; i++) {
        styleRecursive(children[i]);
    }
}

styleRecursive(document.querySelector('.one'));

console.log(anObject);
// console.log(JSON.stringify(anObject, null, 4));