UNPKG

tonami

Version:

Minimal CSS-in-JS library that promotes CSS best-practices and strongly-typed design systems.

3 lines (2 loc) 6.16 kB
import t,{useRef as e,useEffect as n,forwardRef as s,memo as r}from"react";function i(t){let e=[];for(const n in t)e.push("className"===n?"."+t.className.split(" ").join("."):!0===t[n]?"["+n+"]":"["+n+"="+t[n]+"]");return e.join("")}function o(t,e,n="& {}"){return n.replace(/\&/gi,t).replace(/\{\}/gi,"{ "+function(t){let e=[];for(const n in t)"--"===n.slice(0,2)?e.push(n+": "+t[n]+";"):e.push(n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+": "+t[n]+";");return e.join(" ")}(e)+" }")}const l="undefined"!=typeof window&&"HTMLElement"in window,a={shouldForwardProp:(t,e)=>"$"!==t[0]},c=new class{constructor(){this.rules=[],this.tag=this.findOrCreateTag(),this.sheet=this.getSheet(),this.dynamicIndexes=[]}findOrCreateTag(){if(this.tag)return this.tag;if(l){var t;const e=document.getElementById("tonami");if(e)return e;const n=document.createElement("style");return n.setAttribute("id","tonami"),n.setAttribute("data-testid","tonami"),document.head.appendChild(n),null==(t=document.getElementById("tonami-ssr"))||t.remove(),n}return null}getSheet(){return this.tag?(t=>{if(t.sheet)return t.sheet;const{styleSheets:e}=document;for(let n=0,s=e.length;n<s;n++){const s=e[n];if(s.ownerNode===t)return s}throw new Error("Unable to get CSSStyleSheet")})(this.tag):null}insertStaticRules(t){let e;for(let n of t)this.rules.indexOf(n)>-1||(e=this.rules.length,this.rules[e]=n,this.sheet&&this.sheet.insertRule(n,e))}insertDynamicRules(t){const e=[];let n,s;for(let r of t)n=this.rules.length,s=this.dynamicIndexes.length,this.rules[n]=r,this.sheet&&this.sheet.insertRule(this.rules[n],n),this.dynamicIndexes[s]=n,e.push(s);return e.sort((t,e)=>e-t)}removeRules(t){let e;for(let n of t){e=this.dynamicIndexes[n],this.rules.splice(e,1);try{this.sheet.deleteRule(e),this.dynamicIndexes[n]=-1;for(let t=0;t<this.dynamicIndexes.length;t++){let n=this.dynamicIndexes[t];n>e&&(this.dynamicIndexes[t]=n-1)}}catch(t){console.log(t.message)}}}getStyleString(){return this.rules.join("\n")}reset(){this.rules=[],this.dynamicIndexes=[],this.tag&&this.tag.remove(),this.tag=null,this.tag=this.findOrCreateTag(),this.sheet=this.getSheet()}};function u(t){const s=e([]),r=e([]);var i;i=s.current,JSON.stringify(t.sort())!==JSON.stringify(i.sort())&&(r.current.length&&c.removeRules(r.current),r.current=c.insertDynamicRules(t),s.current=t),n(()=>()=>{r.current.length&&c.removeRules(r.current)},[])}function h(t,e){let n=Object.assign({},t);for(let s in t)"function"==typeof t[s]&&(n[s]=t[s](e));return n}function f(t){return function(e){let n=[];for(const s in t)n.push(o(s,h(t[s],e)));return u(n),null}}function d(t){let e={},n={};return Object.setPrototypeOf(n,{toStyleObject:()=>e,Tokens:f({html:e}),createDynamicTokens:t=>function(e){return u([o("html",d(t(e)).toStyleObject())]),null}}),function t(n,s,r=[]){for(const i in n){let o=n[i],l=r.concat(i);if(["string","number"].includes(typeof o)){let t=`--${l.join("-")}`;e[t]=o,s[i]=`var(${t})`}else"object"==typeof o&&(s[i]={},t(o,s[i],l))}}(t,n),n}function m(){return(m=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}function p(t,e){if(null==t)return{};var n,s,r={},i=Object.keys(t);for(s=0;s<i.length;s++)e.indexOf(n=i[s])>=0||(r[n]=t[n]);return r}function g(t){return"TA"+y(t)}let y=t=>{let e=0,n=37;for(;e<t.length;)n=97*n+t.charCodeAt(e++)>>>0;return n.toString(16)};const b=["apply","condition","selectors"];function S(t,e,n){let s={};if(!t)return s;for(const r in t){let i=t[r];if("function"==typeof i){const t="--"+n+"-"+e.size;e.set(t,i),s[r]="var("+t+")"}else s[r]=i}return s}function v(e){return function(...n){const l=function(...t){const e=g(JSON.stringify(t));let n=[],s=new Map,r=new Map;for(let a=0;a<t.length;a++){var l,u;let c=t[a],{apply:h,condition:f,selectors:d}=c;const m=S(p(c,b),r,e);f=null==(l=f)||l,h=null!=(u=h)?u:{className:g(JSON.stringify(m))},s.set(h,f);const y="."+e+i(h);if(n.push(o(y,m)),d)for(const t in d)n.push(o(y,S(d[t],r,e),t))}return c.insertStaticRules(n),function(t){const n=function(t){let e={};for(const n in t)a.shouldForwardProp(n,t[n])&&(e[n]=t[n]);return e}(t),i=function(t,e,n,s){let r={style:{},className:[n]};for(let[e,n]of t)("function"==typeof n?n(s):n)&&("className"in e?r.className.push(e.className):r=m({},r,e));r.className=r.className.join(" ");for(let[t,n]of e)r.style[t]=n(s);return r}(s,r,e,t),o=n.style?m({},i.style,n.style):i.style;return m({},i,n,{style:o,className:n.className?i.className+" "+n.className:i.className})}}(...n),u=e.isStyledComponent?e.getComponentProps.concat(l):[l],h=s(function(n,s){var r;const i=null!=(r=n.as)?r:e,o=u.reduce((t,e)=>e(t),n);return t.createElement(i,Object.assign({},o,{ref:s}))}),f=r(h);return Object.assign(f,{isStyledComponent:!0,getComponentProps:u}),f}}const O=v;function N(){return t.createElement("style",{id:"tonami-ssr",dangerouslySetInnerHTML:{__html:c.getStyleString()}})}["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach(t=>{O[t]=v(t)});export{N as ServerStylesheet,f as createGlobalStyle,d as createTokens,a as options,O as styled}; //# sourceMappingURL=tonami.modern.js.map