<pre id="AST"></pre>
/* Edit the CSS here and check out the AST! */
pre {
padding: 0 1em;
tab-size: 2;
font: 80%/1.4 Consolas, Monaco, monospace;
}
// See: https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules,-with-client-side-vanilla-js/
async function require(path) {
let _module = window.module;
window.module = {};
await import(path);
let exports = module.exports;
window.module = _module;
return exports;
}
(async () => { // top-level await cannot come soon enough…
let parse = await require("https://cdn.jsdelivr.net/gh/reworkcss/css@latest/lib/parse/index.js");
let update = () => {
let css = document.querySelector("style").textContent;
AST.textContent = JSON.stringify(parse(css), null, "\t");
}
update();
// Observe CSS changes
new MutationObserver(update).observe(document.head, {
childList: true
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.