oncss
Version:
A CSS framework for modern web development.
3 lines (2 loc) • 3.63 kB
JavaScript
import C from"youid";const S=typeof window<"u"?window:global;S.Factory=S.Factory||new Map;const h=S.Factory,E=["fontWeight","font-weight","lineHeight","line-height","opacity","zIndex","z-index","flex","order","flexGrow","flex-grow","flexShrink","flex-shrink","flexBasis","flex-basis","columns","perspective","stroke-dashoffset"],A=s=>s.split(/(?=[A-Z])/).join("-").toLowerCase(),_=(s,i)=>typeof i=="number"&&!E.includes(s)?`${i}px`:i,x=["webkit","moz","ms","o"];let P;const w=new Map,F=(s,i)=>{if(i=_(s,i),s=A(s),typeof window>"u")return{prop:s,value:i};const e=P||(P=document.createElement("div").style);if(i=i?.toString(),e.setProperty(s,i),e.getPropertyValue(s)===i)return{prop:s,value:i};const p=w.get(s);if(p)return{prop:p._prop,value:`${p._vprefix}${i}`};let f=s,r=i,l="";const d=s.includes("-")?s.replace(/-([a-z])/g,(n,t)=>t.toUpperCase()):s;for(const n of x)if(e[`${n}${d}`]!==void 0){f=`-${n}-${s}`;break}if(e.setProperty(f,i),!e.getPropertyValue(f))for(const n of x){const t=`-${n}-${i}`;if(e.setProperty(f,t),e.getPropertyValue(f)===t){r=t,l=`-${n}-`;break}}return w.set(s,{_prop:f,_vprefix:l}),{prop:f,value:r}},u=(s,i,e,p=1)=>{let f,r=i;if(i){if(typeof i!="string")throw new Error(`Invalid class name: ${i}`)}else{f=JSON.stringify(s,(a,y)=>typeof y=="function"?y.toString():y);const t=h.get(f);if(t)return t.cache=!0,t;r=`${e?.classPrefix||""}x${C(f)}`}let l=[`${r}{`],d={},n={};for(let t in s){let a=s[t],y=t.charAt(0);if(y==="&"){let o=t.replace(/&/g,r);const c=u(a,o,e,p+1);e?.skipProps&&(n={...n,...c.skiped}),l.push(c.stack)}else if(y==="@")if(t.startsWith("@global")||t.startsWith("@keyframes")){let o="";for(let c in a){let g=u(a[c],c,e,p+1);o+=g.stack,e?.skipProps&&(n={...n,...g.skiped})}t.startsWith("@keyframes")?l.push(`${t}{${o}}`):l.push(o)}else{let o=u(a,r,e,p+1);const c=t+"{"+o.stack+"}";l.push(c),e?.skipProps&&(n={...n,...o.skiped})}else{if(e?.skipProps&&e.skipProps(t,a,p)){r in n||(n[r]=[]),n[r].push(t);continue}if(typeof a=="function"||Array.isArray(a))continue;if(typeof a=="object")for(let o in a){if(typeof a[o]=="object"||typeof a[o]=="function"||Array.isArray(a[o]))throw new Error(`Invalid css value: ${a[o]}`);let c=o;if(!!isNaN(parseInt(c)))if(e?.breakpoints&&!isNaN(parseInt(e.breakpoints[o])))c=e.breakpoints[o].toString();else throw new Error(`Invalid breakpoint prop: ${o}`);let b={[t]:a[o]},m=u(b,r,e,p),$=m.stack,k=`@media (min-width: ${c}px)`;d[k]=d[k]?d[k]+$:$,e?.skipProps&&(n={...n,...m.skiped})}else{if(e?.getProps){let c=e.getProps(t,a,s,p);if(c){let g=u(c,r,{...e,getProps:void 0});e?.skipProps&&(n={...n,...g.skiped}),l.push(g.stack);continue}}if(e?.aliases&&e.aliases[t]){let c=e.aliases[t](a);if(c){let g=u(c,r,{...e,aliases:void 0},p);g.stack=g.stack.replace(`${r}{`,"").replace("}",""),l[0]+=g.stack;continue}}e?.getValue&&(a=e.getValue(t,a,s,p));let o=F(t,a);l[0]+=`${o.prop}:${o.value};`}}}l[0]+="}",l[0]===`${r}{}`&&(l[0]=""),l=l.join("");for(let t in d)l+=`${t}{${d[t].replace(new RegExp(`}\\${r}\\{`,"g"),"")}}`;if(f){l=l.replace(new RegExp(r,"g"),`.${r}`);const t={cache:!1,cachekey:f,classname:r,css:l,cssraw:s,skiped:n,getStyleTag:()=>document?.querySelector(`[data-oncss="${r}"]`),deleteStyle:()=>{const y=document?.querySelector(`[data-oncss="${r}"]`);y&&y.remove()},toString:()=>r};if(h.set(f,t),(e?.injectStyle||!0)&&typeof window<"u"&&!document.querySelector(`[data-oncss="${r}"]`)){const y=document.createElement("style");y.innerHTML=t.css,y.setAttribute("data-oncss",r),document.head.append(y)}return t}return{stack:l,skiped:n}};export{h as CSSFactory,F as cssPrefix,A as formatCSSProp,_ as formatCSSValue,u as style};
//# sourceMappingURL=core.js.map