rndme

function updateDomfromString(dom, content){
  var r = [...new DOMParser().parseFromString(content, "text/html").body.querySelectorAll("*")],
      r2= dom.querySelectorAll("*");
  if(r.length!=r2.length) return dom.innerHTML = content;
  r2.forEach((x,i)=>{
    var y = r[i];
    [...x.attributes].forEach(a=>x.removeAttribute(a.name));
    [...y.attributes].forEach(a=>x.setAttribute(a.name, a.value));
    if(x.innerHTML!=y.innerHTML)[...x.childNodes].forEach((e,n)=>{if(!e.children) e.textContent = y.childNodes[n].textContent;});
  });

rndme

// A live querySelector tool with a callback that runs now and auto-applies to newly added elements.

function foreverEach(selector, fnCallback, root = document.documentElement){
  var used = new WeakSet();
  function isNew(elm){ if(!used.has(elm)) return used.add(elm); }
  
  [...root.querySelectorAll(selector)].filter(isNew).forEach(fnCallback);

  return {
  ob: new MutationObserver(function _addWatcher(mutationsList) {

rndme

// not ready for production, issues with pseudo selectors in nested rules parsing as props...
let JSCN = {

parse: function parse(str) { // css to object
	var sheet = {}, // holds all the selectors and rules
		rule = {}, // current rule
		float = "", // accumulates chars before determining what to do with them
		quoteMode = 0, // [none, single, double] quote mode
		sel = "",	// current selector
		prop = "",	// current property

rndme

// [ccby@dandavis] pure html+css from inline-style-ladden selected+copy'd HTML code
// returns clean html with embedded scoped CSS <style> tag

function deriveCSS(swollenHTML) {

	// main logic:
	var rez = extractAndOptimizeStyles(swollenHTML);
	
	var rules = parseCSS(rez.css);

rndme

function getSheetRules(c) {
	var r = [];

	function walk(cr, ma = "", depth) {
                depth = depth + 1;
		for(let ru of cr)
			if(ru instanceof CSSStyleRule) {
				let st = ru.selectorText;
				if(ma) st = st.includes('&') ? st.replace(/&/g, ma) : `${ma}${st}`;
				if(ru.style?.length) r.push(st.trim().replace(/\s+/g, ' ') + "\t".repeat(depth)+ "{" + ru.style.cssText + "}");

rndme

/* --rnd1k is set from 0 - 1023 seemingly randomly as page is scrolled */

@property --scrpos {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rnd1k {
  syntax: "<number>";
  inherits: true;

rndme

function json2css(o, selector, blnMinify) {

	if(!Array.isArray(o)) {
		let sepItems = blnMinify ? "" : "\n\t",
		 sepLines = blnMinify ? "}\n" : ";\n}",
		 sepProp = blnMinify ? "" : " ";
		return(`${selector||":root"}${sepProp}{${sepItems}` + Object.entries(o).map(([k, v], i) => {
			return `--${k.replace(/\s/g, "-")}:${sepProp}${JSON.stringify(v).replace(/\\n/g,"\\A")}`;
		}).join(`;${sepItems}`) + `${sepLines}`);
	} // end if !array

rndme

[data-mixin] { /* lashes attribs to animation names to load mixins in CSV list */
   animation: 1ms paused --none;
  animation-name: attr(data-mixin type(<custom-ident>#));
}


/* mixins are defined here, can have many rules each */
@keyframes red {from{
   color:red;
}}

rndme

/* chrome-only at time of writing, but fingers crossed... <style>/* */

@keyframes cars {
 10% {
     --make: "GMC";
     --country: "USA";
     --kind: "Truck";
     --model: "Sierra";
  }
  20% {

rndme

@function --mix(--name type(<custom-ident>)) {
  result: 1ms paused var(--name);
}




@keyframes testMixin {from{
   color:red;