JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="css"></textarea>

CSS

textarea {
    font-family: monospace;
    width: 400px;
    height: 300px;
}

.details h2 {margin: -14px 0 0 0; padding: 0 20px 24px 20px; font-size: 12px; color: #474747;}

.test {
    width: 300px;
    font-family: Verdana, sans-serif;
    font-size: 200%;
    color: blue;
}

.oneline1 { font-size: 13px; }

.oneline2 { font-size: 13px}

.oneline3 { font-size: 13px }

.multiple,
.line,
.rule { font-size: 10px; }

JavaScript

var css = $('style').text();

// join all lines by removing carriage returns; otherwise we'll run into
// lots of problems trying to grok rules that span multiple lines
css = css.replace( /\n/g, '' );

// match all rules, and separate into selectors and declarations
css = css.replace(/\s*([^{]*)\s*\{(.*?)\}/g, function(match,selector,declarations) {
    // see if font-size is among the declarations; if so, capture it's value
    var fsMatch = declarations.match( /\bfont-size\s*:\s*([^;]+?)\s*(;|$)/i );
    // if font-size is present, return only that declaration, otherwise return empty
    return fsMatch ?
        selector + ' { font-size: ' + fsMatch[1] + '; }\n' :
        '';
});

$('#css').text(css);