Add a JIT (Just in time rendering)

[actwu]

Sample:

naiui.js
Basically
document.querySelector(_sl) ? (_sn ? _sn.textContent += _rc : 0) : 0; checks if even one element exist.. if it exist it adds the css if nothing matches, nothing happens, which is fine if that’s the intent. I wrote in ternary because ternary is a close level conditions .. short hand one

i added <style sn> too
This improves css significantly

const renCss = (_sl, _rc) => {
const _sn = document.querySelector('[sn]');
document.querySelector(_sl) ?
(_sn ? _sn.textContent += _rc : 0) : 0;
};

const _sn = document.querySelector('[sn]');

// Here basically i reset my css lol 😆
_sn.textContent =

`
:root {
--bg:${_naiUI_config._bg};--text:${_naiUI_config._fg};--thumb:${_naiUI_config._thumb};--btn:${_naiUI_config._btn};--line:${_naiUI_config._line};
--place:${_naiUI_config._place};--progress-bg:${_naiUI_config._dark};--progress-fill:${_naiUI_config._prim}; --bdr:${_naiUI_config._bdr};
}
::placeholder { color: var(--place); }
* {
display:auto;
margin:0;
padding:0;
box-sizing:border-box;
color:var(--text);
border:none;
outline:none;
text-decoration:none;
font-family:system-ui,sans-serif;
}
body {
background: var(--bg);
margin: auto;
width: 100%;
max-width: 498px;
font-size: 14px;
font-weight: 500;
display: flex;
flex-direction: column;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p {}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--thumb); }


div { flex: 1; }
`;