tonami
Version:
Minimal CSS-in-JS library that promotes CSS best-practices and strongly-typed design systems.
3 lines (2 loc) • 7.38 kB
JavaScript
import e,{useRef as t,useEffect as n,forwardRef as r,memo as i}from"react";function a(e){var t=[];for(var n in e)t.push("className"===n?"."+e.className.split(" ").join("."):!0===e[n]?"["+n+"]":"["+n+"="+e[n]+"]");return t.join("")}function o(e,t,n){return void 0===n&&(n="& {}"),n.replace(/\&/gi,e).replace(/\{\}/gi,"{ "+function(e){var t=[];for(var n in e)"--"===n.slice(0,2)?t.push(n+": "+e[n]+";"):t.push(n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()+": "+e[n]+";");return t.join(" ")}(t)+" }")}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function u(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function c(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(n)return(n=n.call(e)).next.bind(n);if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f="undefined"!=typeof window&&"HTMLElement"in window,d={shouldForwardProp:function(e,t){return"$"!==e[0]}},h=new(function(){function e(){this.rules=[],this.tag=this.findOrCreateTag(),this.sheet=this.getSheet(),this.dynamicIndexes=[]}var t=e.prototype;return t.findOrCreateTag=function(){if(this.tag)return this.tag;if(f){var e,t=document.getElementById("tonami");if(t)return t;var n=document.createElement("style");return n.setAttribute("id","tonami"),n.setAttribute("data-testid","tonami"),document.head.appendChild(n),null==(e=document.getElementById("tonami-ssr"))||e.remove(),n}return null},t.getSheet=function(){return this.tag?function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var i=t[n];if(i.ownerNode===e)return i}throw new Error("Unable to get CSSStyleSheet")}(this.tag):null},t.insertStaticRules=function(e){for(var t,n,r=c(e);!(n=r()).done;){var i=n.value;this.rules.indexOf(i)>-1||(this.rules[t=this.rules.length]=i,this.sheet&&this.sheet.insertRule(i,t))}},t.insertDynamicRules=function(e){for(var t,n,r,i=[],a=c(e);!(r=a()).done;)n=this.dynamicIndexes.length,this.rules[t=this.rules.length]=r.value,this.sheet&&this.sheet.insertRule(this.rules[t],t),this.dynamicIndexes[n]=t,i.push(n);return i.sort(function(e,t){return t-e})},t.removeRules=function(e){for(var t,n,r=c(e);!(n=r()).done;){var i=n.value;this.rules.splice(t=this.dynamicIndexes[i],1);try{this.sheet.deleteRule(t),this.dynamicIndexes[i]=-1;for(var a=0;a<this.dynamicIndexes.length;a++){var o=this.dynamicIndexes[a];o>t&&(this.dynamicIndexes[a]=o-1)}}catch(e){console.log(e.message)}}},t.getStyleString=function(){return this.rules.join("\n")},t.reset=function(){this.rules=[],this.dynamicIndexes=[],this.tag&&this.tag.remove(),this.tag=null,this.tag=this.findOrCreateTag(),this.sheet=this.getSheet()},e}());function m(e){var r,i=t([]),a=t([]);r=i.current,JSON.stringify(e.sort())!==JSON.stringify(r.sort())&&(a.current.length&&h.removeRules(a.current),a.current=h.insertDynamicRules(e),i.current=e),n(function(){return function(){a.current.length&&h.removeRules(a.current)}},[])}function p(e,t){var n=Object.assign({},e);for(var r in e)"function"==typeof e[r]&&(n[r]=e[r](t));return n}function v(e){return function(t){var n=[];for(var r in e)n.push(o(r,p(e[r],t)));return m(n),null}}function g(e){var t={},n={};return Object.setPrototypeOf(n,{toStyleObject:function(){return t},Tokens:v({html:t}),createDynamicTokens:function(e){return function(t){return m([o("html",g(e(t)).toStyleObject())]),null}}}),function e(n,r,i){for(var a in void 0===i&&(i=[]),n){var o=n[a],s=i.concat(a);if(["string","number"].includes(typeof o)){var u="--"+s.join("-");t[u]=o,r[a]="var("+u+")"}else"object"==typeof o&&(r[a]={},e(o,r[a],s))}}(e,n),n}function y(e){return"TA"+b(e)}var b=function(e){for(var t=0,n=37;t<e.length;)n=97*n+e.charCodeAt(t++)>>>0;return n.toString(16)},S=["apply","condition","selectors"];function O(){for(var e=[].slice.call(arguments),t=y(JSON.stringify(e)),n=[],r=new Map,i=new Map,l=0;l<e.length;l++){var c,f,d=e[l],m=d.apply,p=d.condition,v=d.selectors,g=u(d,S),b=w(g,i,t);p=null==(c=p)||c,m=null!=(f=m)?f:{className:y(JSON.stringify(b))},r.set(m,p);var O="."+t+a(m);if(n.push(o(O,b)),v)for(var x in v)n.push(o(O,w(v[x],i,t),x))}function I(e){var n=j(e),a=N(r,i,t,e),o=n.style?s({},a.style,n.style):a.style;return s({},a,n,{style:o,className:n.className?a.className+" "+n.className:a.className})}return h.insertStaticRules(n),I}function j(e){var t={};for(var n in e)d.shouldForwardProp(n,e[n])&&(t[n]=e[n]);return t}function N(e,t,n,r){for(var i,a={style:{},className:[n]},o=c(e);!(i=o()).done;){var u=i.value,l=u[0],f=u[1];("function"==typeof f?f(r):f)&&("className"in l?a.className.push(l.className):a=s({},a,l))}a.className=a.className.join(" ");for(var d,h=c(t);!(d=h()).done;){var m=d.value;a.style[m[0]]=(0,m[1])(r)}return a}function w(e,t,n){var r={};if(!e)return r;for(var i in e){var a=e[i];if("function"==typeof a){var o="--"+n+"-"+t.size;t.set(o,a),r[i]="var("+o+")"}else r[i]=a}return r}function x(t){return function(){var n=O.apply(void 0,[].slice.call(arguments)),a=t.isStyledComponent?t.getComponentProps.concat(n):[n],o=r(function(n,r){var i,o=null!=(i=n.as)?i:t,s=a.reduce(function(e,t){return t(e)},n);return e.createElement(o,Object.assign({},s,{ref:r}))}),s=i(o);return Object.assign(s,{isStyledComponent:!0,getComponentProps:a}),s}}var I=x;function A(){return e.createElement("style",{id:"tonami-ssr",dangerouslySetInnerHTML:{__html:h.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(function(e){I[e]=x(e)});export{A as ServerStylesheet,v as createGlobalStyle,g as createTokens,d as options,I as styled};
//# sourceMappingURL=tonami.module.js.map