UNPKG

next-yak

Version:

next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration

5 lines (4 loc) 2.57 kB
import{useTheme as G,YakThemeProvider as Q}from"next-yak/context";var h=(...t)=>{let e=t.join(" ");return()=>({className:e})};var N=(t,...e)=>{let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)b(r,s[n]);return{className:"",style:void 0}}};function b(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var F=(t,...e)=>"";var m=Symbol("yak");function g(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(i=>({style:{[o]:String(A(i,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let i=0;i<s.length;i++)O(n,s[i],o,a);return{className:o.join(" "),style:a}}}var O=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},A=(t,e)=>{let s=e(t);if(typeof s=="function")return A(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)} Dynamic CSS function: ${e.toString()} `);return s};import j from"react";import{useTheme as R}from"next-yak/context";var Y={},M=t=>Object.assign(I(t),{attrs:e=>I(t,e)}),I=(t,e)=>{let s=typeof t!="string"&&m in t,[r,n]=s?t[m]:[],o=E(e,n);return(a,...i)=>{let S=g(a,...i),f=c=>{let l=o||S.length?R():Y,y="$__attrs"in c?{theme:l,...c}:p({theme:l,...c,$__attrs:!0},o?.({theme:l,...c})),u=S(y),{theme:P,...x}=y,d=P===l?x:y,T=s?d:B(d);return T.className=k(T.className,u.className),T.style="style"in T?{...T.style,...u.style}:u.style,r?r(T):j.createElement(t,{...T})};return Object.assign(f,{[m]:[f,o]})}},C=M,B=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},k=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},p=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:k(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,E=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return p(n,s(p(r,n)))}:s||e};var v=new Proxy(C,{get(t,e){return t(e)}});export{Q as YakThemeProvider,h as atoms,N as css,F as keyframes,v as styled,G as useTheme}; //# sourceMappingURL=index.js.map