JSFiddle - React, Tailwind, and code Playground

by Papillon

HTML

<pre id="console"></pre>

JavaScript

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument("");
    var styleElement = doc.createElement("style");

		styleElement.appendChild(document.createTextNode(styleContent));
	  doc.head.appendChild(styleElement);
    return styleElement.sheet.cssRules;
};

var rules = rulesForCssText("p.h1, p.h2, p.h3, p.h4 { font-weight: bolder; } p.h2 { --site-name: Test 1; font-size: 14pt; padding-top: 4pt; padding-bottom: 3pt;}");

var styleSet = [];

for (var i = 0; i < rules.length; i++) {
		var name = rules[i].style.getPropertyValue('--site-name');
		if (name.length > 0) {
    		var selector = rules[i].selectorText;
        var parts = selector.split('.');
        /*
				document.getElementById("console").textContent += name + ': ' +
        	parts[0] + ' class=' + parts[1]
        	'\n';
        */
        styleSet.push({ name: name, element: parts[0], attributes: { 'class': parts[1]} });
        
    }
}

document.getElementById("console").textContent = JSON.stringify(styleSet);