JSFiddle - React, Tailwind, and code Playground

HTML

<h1>css.js regexes</h1>
<h2>reals &amp; explicit positives</h2>
<table border="1" cellspacing="0" cellpadding="2">
    <thead>
        <tr>
            <th>input</th>
            <th>expected</th>
            <th>output</th>
        </tr>
    </thead>
    <tbody class="rnumpx">
        <tr data-in="#30" data-out="30px"></tr>
        <tr data-in="#-30" data-out="undefined"></tr>
        <tr data-in="#+30" data-out="+30px"></tr>
        <tr data-in="#30.0" data-out="30.0px"></tr>
        <tr data-in="#-30.0" data-out="undefined"></tr>
        <tr data-in="#+30.0" data-out="+30.0px"></tr>
        <tr class="current" data-in="+1em" data-out="15px"></tr>
        <tr class="current" data-in="1.2em" data-out="18px"></tr>
        <tr class="current" data-in="-1.2em" data-out="-18px"></tr>
    </tbody>
</table>

CSS

h1, h2 { margin: 0 0 10px; }
div, tbody tr { font-size: 15px; }

JavaScript

$("tbody tr").each(function() {
    var $this = $(this),
        input = $this.data("in").replace("#", ""),
        expected = $this.data("out"),
        output;
   
    if ( $this.hasClass("current") ) {
        $("<div/>")
            .css({position: "absolute", top: input})
            .appendTo("body")
            .each(function() {
                output = $(this).css("top");
            })
      .remove();
    }
    else {
        output = $.cssHooks.height.set(this, input);
    }
    
    $this.append( "<td>" + input + "</td>" )
        .append( "<td>" + expected + "</td>" )
        .append( "<td>" + output + "</td>" );
    
    if ( ("" + output) != expected ) {
        $this.css("background-color", "#ffcccc");
    }
});