JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<div id="foo.bar"></div>
<div id="foo"  class="bar"></div>
<div id=".foo" class="bar"></div>
<div id="#foo" class="bar"></div>
<div id="foo:bar"></div>
<div id=":foo"></div>
<div id="[object]"></div>
<div id="foo'bar;baz"></div>
<div id="¥"></div>
<footer></footer>
<style id="s.t.y.l.e"></style>

CSS

div:hover::after {
    float: right;
    font-size: 92%;
}
div {
    font-size: smaller;
    border: 1px solid gray;
}
div, footer { 
    margin: 4px;
    padding: 5px;
}
footer {
    font-size: 92%;
    line-height: 150%;
}
strong, div:hover::after {
    font-weight: bold;
    font-family: monospace;
    color: indigo;
}
footer code strong {
    color: black;
}

JavaScript

var logBox, divs, div;

function go(log) {
    var selectors = [ 
            "#foo",       "\\#foo",
            "#foo.bar",   "#foo\\.bar", "foo\\#bar",
            "#.foo",      "#\\.foo",
            ".foo.bar",
            "#foo:bar",   "#foo\\:bar",
            "#:foo",      "#\\:foo",
            "#[object]",  "#\\[object\\]",
            "#foo\\'bar\\;baz",
            "#¥"                      
        ],
        styles = document.querySelector("#s\\.t\\.y\\.l\\.e"),
        selector;
    
    while(selector = selectors.shift()) {
        log("<hr/><strong>" + selector + "</strong> selects:");
        try {
            log(document.querySelectorAll(selector));
        } catch(err) {
            log("Error: " + err.message);
        }
        
        styles.textContent += selector + ":hover::after { " +
            "content: '" + selector.replace(/\\/g, '\\\\') + " '; }\n";
    }
}


// Just setup and utils below

function htmlFor(el) {
    var wrap = document.createElement('div'), html;
    wrap.appendChild(el.cloneNode(true));
    return wrap.innerHTML;
}

function fancyHTMLFor(el) {
    return htmlFor(el)
            .replace(/>.*/g, '/>')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/="([^"]*)"/g, '="<strong>$1</strong>"');
}

function logger(logBox) {
    return function(subjects) {
        var len, i;
        
        function writeLog(subject) {
            if(subject.tagName) {
                writeLog("<code>" + fancyHTMLFor(subject) + "</code>");
            } else if(subject && subject.length) {
                logBox.innerHTML += subject.toString() + "<br/>";
            } else {
                writeLog("nothing");
            }
        }

        if(subjects && "undefined" != subjects.length &&
           "string" != typeof subjects
          ) {
            // array
            if(len = subjects.length) {
                for(i = 0; i < len; i++) {
                    writeLog(subjects[i]);
    ...