<!-- Stick all your HTML inside #root for this demo -->
<div id="root">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
p:nth-last-child(even) {
color: red;
}
li > p {
font-weight: bold;
}
function drop(css, html) {
return dropcss({
css,
html,
});
}
let oldCss = null;
let pre = document.createElement("pre");
pre.style.whiteSpace = 'pre-wrap';
pre.style.fontSize = '10pt';
pre.style.position = 'fixed';
pre.style.left = "calc(50% - 300px)";
pre.style.top = "calc(50% - 150px)";
pre.style.padding = "10px";
pre.style.background = "#f0f0f0";
pre.style.border = "1px solid gray";
pre.style.minWidth = "300px";
pre.style.maxWidth = "33.3333%";
document.body.appendChild(pre);
render();
setInterval(render, 250);
function render() {
let css = document.querySelector("style").textContent;
if (css != oldCss) {
let html = document.querySelector("#root").outerHTML;
let start = +new Date();
let cleaned = drop(css, html);
let elapsed = +new Date() - start;
pre.textContent = [
"Cleaned CSS (" + elapsed + " ms)",
"==================\n",
cleaned.css,
].join("\n");
oldCss = css;
}
}
This Pen doesn't use any external CSS resources.