<!-- 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;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://leeoniya.github.io/dropcss/dist/dropcss.iife.min.js