next-yak 9.4.2 → 9.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/context/baseContext.cjs.map +1 -1
  2. package/dist/context/baseContext.js.map +1 -1
  3. package/dist/context/index.cjs +1 -1
  4. package/dist/context/index.cjs.map +1 -1
  5. package/dist/context/index.js.map +1 -1
  6. package/dist/context/index.server.cjs +1 -1
  7. package/dist/context/index.server.cjs.map +1 -1
  8. package/dist/context/index.server.js.map +1 -1
  9. package/dist/index.cjs +1 -1
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.js.map +1 -1
  12. package/dist/internal.cjs +134 -134
  13. package/dist/internal.cjs.map +1 -1
  14. package/dist/internal.d.cts +133 -134
  15. package/dist/internal.d.ts +133 -134
  16. package/dist/internal.js +133 -133
  17. package/dist/internal.js.map +1 -1
  18. package/dist/isolated-source-eval/index.js.map +1 -1
  19. package/dist/isolated-source-eval/worker.js.map +1 -1
  20. package/dist/jsx-dev-runtime.cjs +1 -1
  21. package/dist/jsx-dev-runtime.d.cts +1 -2
  22. package/dist/jsx-dev-runtime.d.ts +1 -2
  23. package/dist/jsx-runtime.cjs +1 -1
  24. package/dist/jsx-runtime.d.cts +1 -3
  25. package/dist/jsx-runtime.d.ts +1 -3
  26. package/dist/loaders/turbo-loader.cjs +8 -1
  27. package/dist/loaders/turbo-loader.cjs.map +1 -1
  28. package/dist/loaders/vite-plugin.js.map +1 -1
  29. package/dist/loaders/webpack-loader.cjs.map +1 -1
  30. package/dist/rsbuild/index.d.ts +30 -0
  31. package/dist/rsbuild/index.js +52 -0
  32. package/dist/rsbuild/index.js.map +1 -0
  33. package/dist/static/index.cjs +1 -1
  34. package/dist/static/index.cjs.map +1 -1
  35. package/dist/static/index.js +1 -1
  36. package/dist/static/index.js.map +1 -1
  37. package/dist/withYak/index.cjs +7 -3
  38. package/dist/withYak/index.cjs.map +1 -1
  39. package/dist/withYak/index.d.cts +17 -1
  40. package/dist/withYak/index.d.ts +17 -1
  41. package/dist/withYak/index.js +7 -4
  42. package/dist/withYak/index.js.map +1 -1
  43. package/loaders/lib/resolveCrossFileSelectors.ts +8 -9
  44. package/package.json +27 -17
  45. package/rsbuild/index.ts +92 -0
  46. package/withYak/index.ts +15 -3
  47. /package/dist/static/{chunk-WfQuXRBF.js → chunk-DK3Fl9T5.js} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"baseContext.cjs","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n return {} as YakTheme | undefined;\n}\n"],"mappings":";;;AAEA,SAAgB,qBAAqB;AACnC,QAAO,EAAE"}
1
+ {"version":3,"file":"baseContext.cjs","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n return {} as YakTheme | undefined;\n}\n"],"mappings":";;;AAEA,SAAgB,qBAAqB;CACnC,OAAO,CAAC;AACV"}
@@ -1 +1 @@
1
- {"version":3,"file":"baseContext.js","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEA,SAAgB,qBAAqB;AACnC,QAAO,EAAE"}
1
+ {"version":3,"file":"baseContext.js","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"next-yak\";\n\nexport function getYakThemeContext() {\n return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEA,SAAgB,qBAAqB;CACnC,OAAO,CAAC;AACV"}
@@ -29,7 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
29
29
 
30
30
  //#endregion
31
31
  let react = require("react");
32
- react = __toESM(react);
32
+ react = __toESM(react, 1);
33
33
 
34
34
  //#region runtime/context/index.tsx
35
35
  const YakContext = (0, react.createContext)({});
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n const context = use(YakContext);\n return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n children,\n theme = {},\n}: {\n children: ReactNode;\n theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,sCAAqC,EAAE,CAAC;AAO9C,MAAa,iBAA2B;CACtC,MAAM,yBAAc,WAAW;AAC/B,QAAO,mBAAmB,yBAAc,QAAQ,GAAG;;AAQrD,MAAa,oBAAoB,EAC/B,UACA,QAAQ,EAAE,OAIN,4CAAC,WAAW,UAAZ,EAAqB,OAAO,OAAuC,EAA/B,SAA+B"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n const context = use(YakContext);\n return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n children,\n theme = {},\n}: {\n children: ReactNode;\n theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,sCAAqC,CAAC,CAAC;AAO7C,MAAa,iBAA2B;CACtC,MAAM,yBAAc,UAAU;CAC9B,OAAO,mBAAmB,yBAAc,OAAO,IAAI;AACrD;AAOA,MAAa,oBAAoB,EAC/B,UACA,QAAQ,CAAC,QAIL,4CAAC,WAAW,UAAZ,EAAqB,OAAO,MAAsC,GAA9B,QAA8B"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n const context = use(YakContext);\n return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n children,\n theme = {},\n}: {\n children: ReactNode;\n theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;AAYA,MAAM,aAAa,cAAwB,EAAE,CAAC;AAO9C,MAAa,iBAA2B;CACtC,MAAM,UAAU,IAAI,WAAW;AAC/B,QAAO,mBAAmB,UAAU,IAAI,QAAQ,GAAG;;AAQrD,MAAa,oBAAoB,EAC/B,UACA,QAAQ,EAAE,OAIN,oCAAC,WAAW,UAAZ,EAAqB,OAAO,OAAuC,EAA/B,SAA+B"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n const context = use(YakContext);\n return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n children,\n theme = {},\n}: {\n children: ReactNode;\n theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;AAYA,MAAM,aAAa,cAAwB,CAAC,CAAC;AAO7C,MAAa,iBAA2B;CACtC,MAAM,UAAU,IAAI,UAAU;CAC9B,OAAO,mBAAmB,UAAU,IAAI,OAAO,IAAI;AACrD;AAOA,MAAa,oBAAoB,EAC/B,UACA,QAAQ,CAAC,QAIL,oCAAC,WAAW,UAAZ,EAAqB,OAAO,MAAsC,GAA9B,QAA8B"}
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
27
27
 
28
28
  //#endregion
29
29
  let react = require("react");
30
- react = __toESM(react);
30
+ react = __toESM(react, 1);
31
31
  let runtime_context_index_js = require("./index.js");
32
32
  let next_yak_context_baseContext = require("next-yak/context/baseContext");
33
33
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.server.cjs","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,6FAAgD,CAAC;AACvD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,eAAe;AACvE,QAAO,iBAAiB,yBAAc,MAAM,GAAG;;AAEjD,MAAa,oBAAoB,EAAE,eAAwC;AACzE,QAAO,4CAACA,2CAAD,EAAwB,OAAO,eAAe,EAAqC,EAAlC,SAAkC"}
1
+ {"version":3,"file":"index.server.cjs","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,4FAA+C,CAAC;AACtD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,cAAc;CACtE,OAAO,iBAAiB,yBAAc,KAAK,IAAI;AACjD;AACA,MAAa,oBAAoB,EAAE,eAAwC;CACzE,OAAO,4CAACA,2CAAD,EAAwB,OAAO,cAAc,EAAqC,GAAjC,QAAiC;AAC3F"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.server.js","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;AAcA,MAAM,gBAAgB,YAAY,oBAAoB,CAAC;AACvD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,eAAe;AACvE,QAAO,iBAAiB,UAAU,IAAI,MAAM,GAAG;;AAEjD,MAAa,oBAAoB,EAAE,eAAwC;AACzE,QAAO,oCAACA,oBAAD,EAAwB,OAAO,eAAe,EAAqC,EAAlC,SAAkC"}
1
+ {"version":3,"file":"index.server.js","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;AAcA,MAAM,gBAAgB,YAAY,mBAAmB,CAAC;AACtD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,cAAc;CACtE,OAAO,iBAAiB,UAAU,IAAI,KAAK,IAAI;AACjD;AACA,MAAa,oBAAoB,EAAE,eAAwC;CACzE,OAAO,oCAACA,oBAAD,EAAwB,OAAO,cAAc,EAAqC,GAAjC,QAAiC;AAC3F"}
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`next-yak/context`),l=require(`react`);l=s(l);const u=Symbol(`yak`);function d(...e){let t,n=[];for(let r of e)typeof r==`string`?t=r:typeof r==`function`?n.push(r):typeof r==`object`&&`style`in r&&n.push((e,t,n)=>{for(let t in r.style){let i=r.style[t];typeof i==`function`?n[t]=String(p(e,i)):n[t]=String(i)}});return n.length===0?(e,n)=>(t&&n.add(t),()=>{}):(e,r,i)=>{t&&r.add(t);for(let t=0;t<n.length;t++)f(e,n[t],r,i)}}const f=(e,t,n,r)=>{let i=t(e,n,r);for(;i;){if(typeof i==`function`){i=i(e,n,r);continue}else if(typeof i==`object`&&(`className`in i&&i.className&&n.add(i.className),`style`in i&&i.style))for(let e in i.style)r[e]=i.style[e];break}},p=(e,t)=>{let n=t(e);if(typeof n==`function`)return p(e,n);if(process.env.NODE_ENV===`development`&&typeof n!=`string`&&typeof n!=`number`&&!(n instanceof String))throw Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}\n\nDynamic CSS function: ${t.toString()}\n`);return n},m=(...e)=>{let t=[],n=[];for(let r of e)typeof r==`string`?t.push(...r.split(` `)):typeof r==`function`&&n.push(r);return d(...t.length>0?[(e,n)=>{t.forEach(e=>n.add(e))},...n]:n)},h=(e,...t)=>{if(Array.isArray(e)&&`raw`in e){let n=e[0];for(let r=0;r<t.length;r++){let i=t[r];n+=i&&typeof i==`object`&&`__yak`in i?i.__yak:String(i),n+=e[r+1]}return{__yak:n}}let n=[];for(let e of t)typeof e==`function`&&n.push(e);return n.length===0?{className:``,style:void 0}:(e=>{for(let t=0;t<n.length;t++)g(e,n[t]);return{className:``,style:void 0}})};function g(e,t){let n=new Set,r={},i=t(e,n,r);for(;typeof i==`function`;)i=i(e,n,r);return i}const _=(e,...t)=>``,v={},y=e=>Object.assign(b(e),{attrs:t=>b(e,t)}),b=(e,t)=>{let n=typeof e!=`string`&&u in e,[r,i,a]=n?e[u]:[],o=w(t,i);return(t,...i)=>{let s=d(t,...i),f=T(s,a),p=t=>{let i=o||s.length?(0,c.useTheme)():v,a=`$__attrs`in t?{theme:i,...t}:C({theme:i,...t,$__attrs:!0},o?.({theme:i,...t})),u=new Set(`className`in a?a.className?.split(` `):[]),d={...`style`in a?a.style:{}};`$__runtimeStylesProcessed`in a||(f(a,u,d),a.$__runtimeStylesProcessed=!0),a.className=Array.from(u).join(` `)||void 0,a.style=d;let{theme:p,...m}=a,h=p===i?m:a,g=n?h:x(h);return r?r(g):l.default.createElement(e,g)};return Object.assign(p,{[u]:[p,o,f]})}},x=e=>{let t={};for(let n in e)!n.startsWith(`$`)&&e[n]!==void 0&&(t[n]=e[n]);return t},S=(e,t)=>{if(!(!e&&!t))return e?t?e+` `+t:e:t},C=(e,t)=>t?(e.className===t.className||!t.className)&&(e.style===t.style||!t.style)?{...e,...t}:{...e,...t,className:S(e.className,t.className),style:{...e.style,...t.style}}:e,w=(e,t)=>{let n=e&&(typeof e==`function`?e:()=>e);return n&&t?e=>{let r=t(e);return C(r,n(C(e,r)))}:n||t},T=(e,t)=>e&&t?(n,r,i)=>{t(n,r,i),e(n,r,i)}:e||t,E=new Proxy(y,{get(e,t){return e(t)}});Object.defineProperty(exports,`YakThemeProvider`,{enumerable:!0,get:function(){return c.YakThemeProvider}}),exports.atoms=m,exports.css=h,exports.keyframes=_,exports.styled=E,Object.defineProperty(exports,`useTheme`,{enumerable:!0,get:function(){return c.useTheme}});
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("next-yak/context"),l=require("react");l=s(l,1);const u=Symbol(`yak`);function d(...e){let t,n=[];for(let r of e)typeof r==`string`?t=r:typeof r==`function`?n.push(r):typeof r==`object`&&`style`in r&&n.push((e,t,n)=>{for(let t in r.style){let i=r.style[t];typeof i==`function`?n[t]=String(p(e,i)):n[t]=String(i)}});return n.length===0?(e,n)=>(t&&n.add(t),()=>{}):(e,r,i)=>{t&&r.add(t);for(let t=0;t<n.length;t++)f(e,n[t],r,i)}}const f=(e,t,n,r)=>{let i=t(e,n,r);for(;i;){if(typeof i==`function`){i=i(e,n,r);continue}else if(typeof i==`object`&&(`className`in i&&i.className&&n.add(i.className),`style`in i&&i.style))for(let e in i.style)r[e]=i.style[e];break}},p=(e,t)=>{let n=t(e);if(typeof n==`function`)return p(e,n);if(process.env.NODE_ENV===`development`&&typeof n!=`string`&&typeof n!=`number`&&!(n instanceof String))throw Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}\n\nDynamic CSS function: ${t.toString()}\n`);return n},m=(...e)=>{let t=[],n=[];for(let r of e)typeof r==`string`?t.push(...r.split(` `)):typeof r==`function`&&n.push(r);return d(...t.length>0?[(e,n)=>{t.forEach(e=>n.add(e))},...n]:n)},h=(e,...t)=>{if(Array.isArray(e)&&`raw`in e){let n=e[0];for(let r=0;r<t.length;r++){let i=t[r];n+=i&&typeof i==`object`&&`__yak`in i?i.__yak:String(i),n+=e[r+1]}return{__yak:n}}let n=[];for(let e of t)typeof e==`function`&&n.push(e);return n.length===0?{className:``,style:void 0}:(e=>{for(let t=0;t<n.length;t++)g(e,n[t]);return{className:``,style:void 0}})};function g(e,t){let n=new Set,r={},i=t(e,n,r);for(;typeof i==`function`;)i=i(e,n,r);return i}const _=(e,...t)=>``,v={},y=e=>Object.assign(b(e),{attrs:t=>b(e,t)}),b=(e,t)=>{let n=typeof e!=`string`&&u in e,[r,i,a]=n?e[u]:[],o=w(t,i);return(t,...i)=>{let s=d(t,...i),f=T(s,a),p=t=>{let i=o||s.length?(0,c.useTheme)():v,a=`$__attrs`in t?{theme:i,...t}:C({theme:i,...t,$__attrs:!0},o?.({theme:i,...t})),u=new Set(`className`in a?a.className?.split(` `):[]),d={...`style`in a?a.style:{}};`$__runtimeStylesProcessed`in a||(f(a,u,d),a.$__runtimeStylesProcessed=!0),a.className=Array.from(u).join(` `)||void 0,a.style=d;let{theme:p,...m}=a,h=p===i?m:a,g=n?h:x(h);return r?r(g):l.default.createElement(e,g)};return Object.assign(p,{[u]:[p,o,f]})}},x=e=>{let t={};for(let n in e)!n.startsWith(`$`)&&e[n]!==void 0&&(t[n]=e[n]);return t},S=(e,t)=>{if(!(!e&&!t))return e?t?e+` `+t:e:t},C=(e,t)=>t?(e.className===t.className||!t.className)&&(e.style===t.style||!t.style)?{...e,...t}:{...e,...t,className:S(e.className,t.className),style:{...e.style,...t.style}}:e,w=(e,t)=>{let n=e&&(typeof e==`function`?e:()=>e);return n&&t?e=>{let r=t(e);return C(r,n(C(e,r)))}:n||t},T=(e,t)=>e&&t?(n,r,i)=>{t(n,r,i),e(n,r,i)}:e||t,E=new Proxy(y,{get(e,t){return e(t)}});Object.defineProperty(exports,"YakThemeProvider",{enumerable:!0,get:function(){return c.YakThemeProvider}}),exports.atoms=m,exports.css=h,exports.keyframes=_,exports.styled=E,Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return c.useTheme}});
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["css","css","styled","css","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type CSSInterpolation<TProps> =\n | string\n | number\n | undefined\n | null\n | false\n | ComponentStyles<TProps>\n | {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n props: unknown,\n classNames: Set<string>,\n style: React.CSSProperties,\n) =>\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | void\n | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n // Normally this could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n let className: string | undefined;\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n className = arg;\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n dynamicCssFunctions.push((props, _, style) => {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n );\n } else {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(value);\n }\n }\n });\n }\n }\n\n // Non Dynamic CSS\n // This is just an optimization for the common case where there are no dynamic css functions\n if (dynamicCssFunctions.length === 0) {\n return (_, classNames) => {\n if (className) {\n classNames.add(className);\n }\n return () => {};\n };\n }\n\n return (props, classNames, allStyles) => {\n if (className) {\n classNames.add(className);\n }\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n }\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: NestedRuntimeStyleProcessor,\n classNames: Set<string>,\n style: React.CSSProperties,\n) => {\n let result = fn(props, classNames, style);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props, classNames, style);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.add(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n // This is hard for typescript to infer\n style[key as keyof React.CSSProperties] = result.style[\n key as keyof React.CSSProperties\n ] as any;\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n );\n }\n }\n return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n const staticClasses: string[] = [];\n const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n for (const atom of atoms) {\n if (typeof atom === \"string\") {\n staticClasses.push(...atom.split(\" \"));\n } else if (typeof atom === \"function\") {\n dynamicFunctions.push(atom);\n }\n }\n\n const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n staticClasses.length > 0\n ? [\n (_, classNames) => {\n staticClasses.forEach((cls) => classNames.add(cls));\n },\n ...dynamicFunctions,\n ]\n : dynamicFunctions;\n\n // @ts-expect-error the internal implementation of css is not typed\n return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n // When called in yak files as a template tag (without SWC transformation),\n // return { __yak: rawCss } so the cross-file resolver can\n // extract the mixin value from evaluated .yak files.\n if (Array.isArray(styles) && \"raw\" in styles) {\n let rawCss = styles[0];\n for (let i = 0; i < args.length; i++) {\n const interpolation = args[i];\n rawCss +=\n interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n ? (interpolation as { __yak: string }).__yak\n : String(interpolation);\n rawCss += styles[i + 1];\n }\n return { __yak: rawCss } as any;\n }\n\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | Function | object>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return ((props: unknown) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: NestedRuntimeStyleProcessor,\n) {\n const classNames = new Set<string>();\n const style = {};\n let result = expression(props, classNames, style);\n while (typeof result === \"function\") {\n result = result(props, classNames, style);\n }\n return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n *\n * const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n Attrs,\n AttrsMerged,\n Styled,\n YakComponent,\n AttrsFunction,\n StyledFn,\n HtmlTags,\n Substitute,\n StyledLiteral,\n RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n Object.assign(yakStyled(Component), {\n attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n // so that the sequence of the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n ? (Component[yakComponentSymbol] as [\n YakComponent<unknown>,\n ExtractAttrsFunction<typeof attrs>,\n RuntimeStyleProcessor<unknown>,\n ])\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return (styles, ...values) => {\n // combine all interpolated logic into a single function\n // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n const runtimeStylesFn = css(\n styles,\n ...(values as CSSInterpolation<unknown>[]),\n ) as RuntimeStyleProcessor<unknown>;\n const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n runtimeStylesFn,\n parentRuntimeStylesFn,\n );\n const Yak: React.FunctionComponent = (props) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? ({\n theme,\n ...props,\n } as {\n theme: YakTheme;\n className?: string;\n style?: React.CSSProperties;\n })\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...(props as any) }),\n );\n\n const classNames = new Set<string>(\n \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n );\n const styles = {\n ...(\"style\" in combinedProps ? combinedProps.style : {}),\n };\n\n // execute all functions inside the style literal if not already executed\n // e.g. styled.button`color: ${props => props.color};`\n if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n runtimeStyleProcessor(combinedProps, classNames, styles);\n // @ts-expect-error this is not typed correctly\n combinedProps.$__runtimeStylesProcessed = true;\n }\n\n combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n combinedProps.style = styles;\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n return parentYakComponent ? (\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly without running through react createElement\n parentYakComponent(filteredProps)\n ) : (\n // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n <Component\n {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n />\n );\n };\n\n // Assign the yakComponentSymbol directly without forwardRef\n return Object.assign(Yak, {\n [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n unknown,\n unknown,\n unknown,\n ],\n });\n };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | null\n | undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className || !newProps.className) &&\n (props.style === newProps.style || !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...props.style, ...newProps.style },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n };\n }\n\n return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n runtimeStylesFn: RuntimeStyleProcessor<T>,\n parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n if (runtimeStylesFn && parentRuntimeStylesFn) {\n const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n parentRuntimeStylesFn(props, classNames, style);\n runtimeStylesFn(props, classNames, style);\n };\n return combined;\n }\n return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n T extends object,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n get(target, TagName: keyof React.JSX.IntrinsicElements) {\n return target(TagName);\n },\n}) as typeof StyledFactory;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","names":["css","css","styled","css","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type CSSInterpolation<TProps> =\n | string\n | number\n | undefined\n | null\n | false\n | ComponentStyles<TProps>\n | {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n props: unknown,\n classNames: Set<string>,\n style: React.CSSProperties,\n) =>\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | void\n | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n // Normally this could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n let className: string | undefined;\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n className = arg;\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n dynamicCssFunctions.push((props, _, style) => {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n );\n } else {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(value);\n }\n }\n });\n }\n }\n\n // Non Dynamic CSS\n // This is just an optimization for the common case where there are no dynamic css functions\n if (dynamicCssFunctions.length === 0) {\n return (_, classNames) => {\n if (className) {\n classNames.add(className);\n }\n return () => {};\n };\n }\n\n return (props, classNames, allStyles) => {\n if (className) {\n classNames.add(className);\n }\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n }\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: NestedRuntimeStyleProcessor,\n classNames: Set<string>,\n style: React.CSSProperties,\n) => {\n let result = fn(props, classNames, style);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props, classNames, style);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.add(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n // This is hard for typescript to infer\n style[key as keyof React.CSSProperties] = result.style[\n key as keyof React.CSSProperties\n ] as any;\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n );\n }\n }\n return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n const staticClasses: string[] = [];\n const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n for (const atom of atoms) {\n if (typeof atom === \"string\") {\n staticClasses.push(...atom.split(\" \"));\n } else if (typeof atom === \"function\") {\n dynamicFunctions.push(atom);\n }\n }\n\n const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n staticClasses.length > 0\n ? [\n (_, classNames) => {\n staticClasses.forEach((cls) => classNames.add(cls));\n },\n ...dynamicFunctions,\n ]\n : dynamicFunctions;\n\n // @ts-expect-error the internal implementation of css is not typed\n return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n // When called in yak files as a template tag (without SWC transformation),\n // return { __yak: rawCss } so the cross-file resolver can\n // extract the mixin value from evaluated .yak files.\n if (Array.isArray(styles) && \"raw\" in styles) {\n let rawCss = styles[0];\n for (let i = 0; i < args.length; i++) {\n const interpolation = args[i];\n rawCss +=\n interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n ? (interpolation as { __yak: string }).__yak\n : String(interpolation);\n rawCss += styles[i + 1];\n }\n return { __yak: rawCss } as any;\n }\n\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | Function | object>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return ((props: unknown) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: NestedRuntimeStyleProcessor,\n) {\n const classNames = new Set<string>();\n const style = {};\n let result = expression(props, classNames, style);\n while (typeof result === \"function\") {\n result = result(props, classNames, style);\n }\n return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n *\n * const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n Attrs,\n AttrsMerged,\n Styled,\n YakComponent,\n AttrsFunction,\n StyledFn,\n HtmlTags,\n Substitute,\n StyledLiteral,\n RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n Object.assign(yakStyled(Component), {\n attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n // so that the sequence of the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n ? (Component[yakComponentSymbol] as [\n YakComponent<unknown>,\n ExtractAttrsFunction<typeof attrs>,\n RuntimeStyleProcessor<unknown>,\n ])\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return (styles, ...values) => {\n // combine all interpolated logic into a single function\n // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n const runtimeStylesFn = css(\n styles,\n ...(values as CSSInterpolation<unknown>[]),\n ) as RuntimeStyleProcessor<unknown>;\n const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n runtimeStylesFn,\n parentRuntimeStylesFn,\n );\n const Yak: React.FunctionComponent = (props) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? ({\n theme,\n ...props,\n } as {\n theme: YakTheme;\n className?: string;\n style?: React.CSSProperties;\n })\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...(props as any) }),\n );\n\n const classNames = new Set<string>(\n \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n );\n const styles = {\n ...(\"style\" in combinedProps ? combinedProps.style : {}),\n };\n\n // execute all functions inside the style literal if not already executed\n // e.g. styled.button`color: ${props => props.color};`\n if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n runtimeStyleProcessor(combinedProps, classNames, styles);\n // @ts-expect-error this is not typed correctly\n combinedProps.$__runtimeStylesProcessed = true;\n }\n\n combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n combinedProps.style = styles;\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n return parentYakComponent ? (\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly without running through react createElement\n parentYakComponent(filteredProps)\n ) : (\n // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n <Component\n {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n />\n );\n };\n\n // Assign the yakComponentSymbol directly without forwardRef\n return Object.assign(Yak, {\n [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n unknown,\n unknown,\n unknown,\n ],\n });\n };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | null\n | undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className || !newProps.className) &&\n (props.style === newProps.style || !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...props.style, ...newProps.style },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n };\n }\n\n return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n runtimeStylesFn: RuntimeStyleProcessor<T>,\n parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n if (runtimeStylesFn && parentRuntimeStylesFn) {\n const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n parentRuntimeStylesFn(props, classNames, style);\n runtimeStylesFn(props, classNames, style);\n };\n return combined;\n }\n return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n T extends object,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n get(target, TagName: keyof React.JSX.IntrinsicElements) {\n return target(TagName);\n },\n}) as typeof StyledFactory;\n"],"mappings":"+lBAGA,MAAa,EAAqB,OAAO,KAAK,EAgE9C,SAAgBA,EAAY,GAAG,EAAiD,CAG9E,IAAI,EACE,EAAqD,CAAC,EAC5D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,SACjB,EAAY,EAKL,OAAO,GAAQ,WACtB,EAAoB,KAAK,CAA6C,EAK/D,OAAO,GAAQ,UAAY,UAAW,GAC7C,EAAoB,MAAM,EAAO,EAAG,IAAU,CAC5C,IAAK,IAAM,KAAO,EAAI,MAAO,CAC3B,IAAM,EAAQ,EAAI,MAAM,GACpB,OAAO,GAAU,WAEnB,EAAM,GAAO,OAKX,EAAuB,EAAO,CAAK,CACrC,EAGA,EAAM,GAAO,OAAO,CAAK,CAE7B,CACF,CAAC,EAeL,OATI,EAAoB,SAAW,GACzB,EAAG,KACL,GACF,EAAW,IAAI,CAAS,MAEb,CAAC,IAIV,EAAO,EAAY,IAAc,CACnC,GACF,EAAW,IAAI,CAAS,EAE1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAC9C,EAAY,EAAO,EAAoB,GAAI,EAAY,CAAS,CAEpE,CACF,CAGA,MAAM,GACJ,EACA,EACA,EACA,IACG,CACH,IAAI,EAAS,EAAG,EAAO,EAAY,CAAK,EACxC,KAAO,GAAQ,CACb,GAAI,OAAO,GAAW,WAAY,CAChC,EAAS,EAAO,EAAO,EAAY,CAAK,EACxC,QACF,MAAO,GAAI,OAAO,GAAW,WACvB,cAAe,GAAU,EAAO,WAClC,EAAW,IAAI,EAAO,SAAS,EAE7B,UAAW,GAAU,EAAO,OAC9B,IAAK,IAAM,KAAO,EAAO,MAEvB,EAAM,GAAoC,EAAO,MAC/C,GAKR,KACF,CACF,EAEM,GAA0B,EAAgB,IAAiD,CAC/F,IAAM,EAAS,EAAG,CAAK,EACvB,GAAI,OAAO,GAAW,WACpB,OAAO,EAAuB,EAAO,CAAM,EAE7C,GAAI,QAAQ,IAAI,WAAa,eACvB,OAAO,GAAW,UAAY,OAAO,GAAW,UAAY,EAAE,aAAkB,QAClF,MAAU,MACR,qEAAqE,KAAK,UACxE,CACF,EAAE,4BAA4B,EAAG,SAAS,EAAE,GAC9C,EAGJ,OAAO,CACT,EC9Ja,GACX,GAAG,IACoB,CACvB,IAAM,EAA0B,CAAC,EAC3B,EAA+C,CAAC,EAEtD,IAAK,IAAM,KAAQ,EACb,OAAO,GAAS,SAClB,EAAc,KAAK,GAAG,EAAK,MAAM,GAAG,CAAC,EAC5B,OAAO,GAAS,YACzB,EAAiB,KAAK,CAAI,EAe9B,OAAOC,EAAI,GAVT,EAAc,OAAS,EACnB,EACG,EAAG,IAAe,CACjB,EAAc,QAAS,GAAQ,EAAW,IAAI,CAAG,CAAC,CACpD,EACA,GAAG,CACL,EACA,CAGwB,CAChC,EC3Ba,GAA2B,EAA8B,GAAG,IAAoB,CAI3F,GAAI,MAAM,QAAQ,CAAM,GAAK,QAAS,EAAQ,CAC5C,IAAI,EAAS,EAAO,GACpB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAK,OAAQ,IAAK,CACpC,IAAM,EAAgB,EAAK,GAC3B,GACE,GAAiB,OAAO,GAAkB,UAAY,UAAW,EAC5D,EAAoC,MACrC,OAAO,CAAa,EAC1B,GAAU,EAAO,EAAI,EACvB,CACA,MAAO,CAAE,MAAO,CAAO,CACzB,CAEA,IAAM,EAAqD,CAAC,EAC5D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,YACjB,EAAoB,KAAK,CAA6C,EAS1E,OANI,EAAoB,SAAW,EAC1B,CACL,UAAW,GACX,MAAO,IAAA,EACT,GAEO,GAAmB,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAI9C,EAAoC,EAAO,EAAoB,EAAE,EAEnE,MAAO,CACL,UAAW,GACX,MAAO,IAAA,EACT,CACF,EACF,EAEA,SAAS,EACP,EACA,EACA,CACA,IAAM,EAAa,IAAI,IACjB,EAAQ,CAAC,EACX,EAAS,EAAW,EAAO,EAAY,CAAK,EAChD,KAAO,OAAO,GAAW,YACvB,EAAS,EAAO,EAAO,EAAY,CAAK,EAE1C,OAAO,CACT,CCjDA,MAAa,GAAuC,EAAS,GAAG,IAGvD,GCFH,EAAoB,CAAC,EA2BdC,EAlBoB,GAC/B,OAAO,OAAO,EAAU,CAAS,EAAG,CAClC,MAAQ,GAAsB,EAAU,EAAW,CAAK,CAC1D,CAAC,EAiBG,GAA6B,EAAW,IAAU,CACtD,IAAM,EAAiB,OAAO,GAAc,UAAY,KAAsB,EAKxE,CAAC,EAAoB,EAAe,GAAyB,EAC9D,EAAU,GAKX,CAAC,EAEC,EAAgB,EAA2B,EAAO,CAAa,EAErE,OAAQ,EAAQ,GAAG,IAAW,CAG5B,IAAM,EAAkBC,EACtB,EACA,GAAI,CACN,EACM,EAAwB,EAC5B,EACA,CACF,EACM,EAAgC,GAAU,CAc9C,IAAM,EAAQ,GAAiB,EAAgB,QAAA,EAAA,EAAA,SAAA,CAAkB,EAAI,EAI/D,EACJ,aAAc,EACT,CACC,QACA,GAAG,CACL,EAMA,EACE,CACE,QACA,GAAI,EAKJ,SAAU,EACZ,EACA,IAAgB,CAAE,QAAO,GAAI,CAAc,CAAC,CAC9C,EAEA,EAAa,IAAI,IACrB,cAAe,EAAgB,EAAc,WAAW,MAAM,GAAG,EAAI,CAAC,CACxE,EACM,EAAS,CACb,GAAI,UAAW,EAAgB,EAAc,MAAQ,CAAC,CACxD,EAIM,8BAA+B,IACnC,EAAsB,EAAe,EAAY,CAAM,EAEvD,EAAc,0BAA4B,IAG5C,EAAc,UAAY,MAAM,KAAK,CAAU,CAAC,CAAC,KAAK,GAAG,GAAK,IAAA,GAC9D,EAAc,MAAQ,EAKtB,GAAM,CAAE,MAAO,EAAgB,GAAG,GAA8B,EAC1D,EACJ,IAAmB,EAAQ,EAA4B,EAInD,EAAiB,EAEnB,EADA,EAAuB,CAAoB,EAG/C,OAAO,EAGL,EAAmB,CAAa,EAGhC,EAAA,QAAA,cAAC,EACM,CACN,CAEL,EAGA,OAAO,OAAO,OAAO,EAAK,EACvB,GAAqB,CAAC,EAAK,EAAe,CAAqB,CAKlE,CAAC,CACH,CACF,EAQM,EAA6D,GAAc,CAC/E,IAAM,EAAS,CAAC,EAChB,IAAK,IAAM,KAAO,EACZ,CAAC,EAAI,WAAW,GAAG,GAAK,EAAI,KAAS,IAAA,KACvC,EAAO,GAAO,EAAI,IAGtB,OAAO,CACT,EAGM,GAAmB,EAAY,IAAe,CAC9C,MAAC,GAAK,CAAC,GAGX,OAFK,EACA,EACE,EAAI,IAAM,EADF,EADA,CAGjB,EAQM,GAaJ,EACA,IAEA,GACK,EAAM,YAAc,EAAS,WAAa,CAAC,EAAS,aACpD,EAAM,QAAU,EAAS,OAAS,CAAC,EAAS,OAE3C,CACE,GAAG,EACH,GAAG,CACL,EAEA,CACE,GAAG,EACH,GAAG,EACH,UAAW,EAAgB,EAAM,UAAW,EAAS,SAAS,EAC9D,MAAO,CAAE,GAAG,EAAM,MAAO,GAAG,EAAS,KAAM,CAC7C,EAEF,EAWA,GAKJ,EACA,IACsD,CACtD,IAAM,EAAa,IAAU,OAAO,GAAU,WAAa,MAAc,GAezE,OAbI,GAAc,EACR,GAAU,CAChB,IAAM,EAAc,EAAc,CAAK,EAOvC,OAAO,EAAa,EAAa,EAAW,EAAa,EAAO,CAAW,CAAC,CAAC,CAC/E,EAGK,GAAc,CACvB,EASM,GACJ,EACA,IAEI,GAAmB,GACuB,EAAO,EAAY,IAAU,CACvE,EAAsB,EAAO,EAAY,CAAK,EAC9C,EAAgB,EAAO,EAAY,CAAK,CAC1C,EAGK,GAAmB,ECnSf,EAAS,IAAI,MAAMC,EAAe,CAC7C,IAAI,EAAQ,EAA4C,CACtD,OAAO,EAAO,CAAO,CACvB,CACF,CAAC"}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","css","styled","css","useTheme","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type CSSInterpolation<TProps> =\n | string\n | number\n | undefined\n | null\n | false\n | ComponentStyles<TProps>\n | {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n props: unknown,\n classNames: Set<string>,\n style: React.CSSProperties,\n) =>\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | void\n | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n // Normally this could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n let className: string | undefined;\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n className = arg;\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n dynamicCssFunctions.push((props, _, style) => {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n );\n } else {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(value);\n }\n }\n });\n }\n }\n\n // Non Dynamic CSS\n // This is just an optimization for the common case where there are no dynamic css functions\n if (dynamicCssFunctions.length === 0) {\n return (_, classNames) => {\n if (className) {\n classNames.add(className);\n }\n return () => {};\n };\n }\n\n return (props, classNames, allStyles) => {\n if (className) {\n classNames.add(className);\n }\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n }\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: NestedRuntimeStyleProcessor,\n classNames: Set<string>,\n style: React.CSSProperties,\n) => {\n let result = fn(props, classNames, style);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props, classNames, style);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.add(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n // This is hard for typescript to infer\n style[key as keyof React.CSSProperties] = result.style[\n key as keyof React.CSSProperties\n ] as any;\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n );\n }\n }\n return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n const staticClasses: string[] = [];\n const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n for (const atom of atoms) {\n if (typeof atom === \"string\") {\n staticClasses.push(...atom.split(\" \"));\n } else if (typeof atom === \"function\") {\n dynamicFunctions.push(atom);\n }\n }\n\n const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n staticClasses.length > 0\n ? [\n (_, classNames) => {\n staticClasses.forEach((cls) => classNames.add(cls));\n },\n ...dynamicFunctions,\n ]\n : dynamicFunctions;\n\n // @ts-expect-error the internal implementation of css is not typed\n return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n // When called in yak files as a template tag (without SWC transformation),\n // return { __yak: rawCss } so the cross-file resolver can\n // extract the mixin value from evaluated .yak files.\n if (Array.isArray(styles) && \"raw\" in styles) {\n let rawCss = styles[0];\n for (let i = 0; i < args.length; i++) {\n const interpolation = args[i];\n rawCss +=\n interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n ? (interpolation as { __yak: string }).__yak\n : String(interpolation);\n rawCss += styles[i + 1];\n }\n return { __yak: rawCss } as any;\n }\n\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | Function | object>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return ((props: unknown) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: NestedRuntimeStyleProcessor,\n) {\n const classNames = new Set<string>();\n const style = {};\n let result = expression(props, classNames, style);\n while (typeof result === \"function\") {\n result = result(props, classNames, style);\n }\n return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n *\n * const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n Attrs,\n AttrsMerged,\n Styled,\n YakComponent,\n AttrsFunction,\n StyledFn,\n HtmlTags,\n Substitute,\n StyledLiteral,\n RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n Object.assign(yakStyled(Component), {\n attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n // so that the sequence of the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n ? (Component[yakComponentSymbol] as [\n YakComponent<unknown>,\n ExtractAttrsFunction<typeof attrs>,\n RuntimeStyleProcessor<unknown>,\n ])\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return (styles, ...values) => {\n // combine all interpolated logic into a single function\n // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n const runtimeStylesFn = css(\n styles,\n ...(values as CSSInterpolation<unknown>[]),\n ) as RuntimeStyleProcessor<unknown>;\n const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n runtimeStylesFn,\n parentRuntimeStylesFn,\n );\n const Yak: React.FunctionComponent = (props) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? ({\n theme,\n ...props,\n } as {\n theme: YakTheme;\n className?: string;\n style?: React.CSSProperties;\n })\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...(props as any) }),\n );\n\n const classNames = new Set<string>(\n \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n );\n const styles = {\n ...(\"style\" in combinedProps ? combinedProps.style : {}),\n };\n\n // execute all functions inside the style literal if not already executed\n // e.g. styled.button`color: ${props => props.color};`\n if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n runtimeStyleProcessor(combinedProps, classNames, styles);\n // @ts-expect-error this is not typed correctly\n combinedProps.$__runtimeStylesProcessed = true;\n }\n\n combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n combinedProps.style = styles;\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n return parentYakComponent ? (\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly without running through react createElement\n parentYakComponent(filteredProps)\n ) : (\n // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n <Component\n {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n />\n );\n };\n\n // Assign the yakComponentSymbol directly without forwardRef\n return Object.assign(Yak, {\n [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n unknown,\n unknown,\n unknown,\n ],\n });\n };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | null\n | undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className || !newProps.className) &&\n (props.style === newProps.style || !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...props.style, ...newProps.style },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n };\n }\n\n return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n runtimeStylesFn: RuntimeStyleProcessor<T>,\n parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n if (runtimeStylesFn && parentRuntimeStylesFn) {\n const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n parentRuntimeStylesFn(props, classNames, style);\n runtimeStylesFn(props, classNames, style);\n };\n return combined;\n }\n return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n T extends object,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n get(target, TagName: keyof React.JSX.IntrinsicElements) {\n return target(TagName);\n },\n}) as typeof StyledFactory;\n"],"mappings":"qGAGA,MAAa,EAAqB,OAAO,MAAM,CAgE/C,SAAgBA,EAAY,GAAG,EAAiD,CAG9E,IAAI,EACE,EAAqD,EAAE,CAC7D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,SACjB,EAAY,EAKL,OAAO,GAAQ,WACtB,EAAoB,KAAK,EAA8C,CAKhE,OAAO,GAAQ,UAAY,UAAW,GAC7C,EAAoB,MAAM,EAAO,EAAG,IAAU,CAC5C,IAAK,IAAM,KAAO,EAAI,MAAO,CAC3B,IAAM,EAAQ,EAAI,MAAM,GACpB,OAAO,GAAU,WAEnB,EAAM,GAAO,OAKX,EAAuB,EAAO,EAAM,CACrC,CAGD,EAAM,GAAO,OAAO,EAAM,GAG9B,CAeN,OATI,EAAoB,SAAW,GACzB,EAAG,KACL,GACF,EAAW,IAAI,EAAU,KAEd,KAIT,EAAO,EAAY,IAAc,CACnC,GACF,EAAW,IAAI,EAAU,CAE3B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAC9C,EAAY,EAAO,EAAoB,GAAI,EAAY,EAAU,EAMvE,MAAM,GACJ,EACA,EACA,EACA,IACG,CACH,IAAI,EAAS,EAAG,EAAO,EAAY,EAAM,CACzC,KAAO,GAAQ,CACb,GAAI,OAAO,GAAW,WAAY,CAChC,EAAS,EAAO,EAAO,EAAY,EAAM,CACzC,iBACS,OAAO,GAAW,WACvB,cAAe,GAAU,EAAO,WAClC,EAAW,IAAI,EAAO,UAAU,CAE9B,UAAW,GAAU,EAAO,OAC9B,IAAK,IAAM,KAAO,EAAO,MAEvB,EAAM,GAAoC,EAAO,MAC/C,GAKR,QAIE,GAA0B,EAAgB,IAAiD,CAC/F,IAAM,EAAS,EAAG,EAAM,CACxB,GAAI,OAAO,GAAW,WACpB,OAAO,EAAuB,EAAO,EAAO,CAE9C,GAAI,QAAQ,IAAI,WAAa,eACvB,OAAO,GAAW,UAAY,OAAO,GAAW,UAAY,EAAE,aAAkB,QAClF,MAAU,MACR,qEAAqE,KAAK,UACxE,EACD,CAAC,4BAA4B,EAAG,UAAU,CAAC,IAC7C,CAGL,OAAO,GC7JI,GACX,GAAG,IACoB,CACvB,IAAM,EAA0B,EAAE,CAC5B,EAA+C,EAAE,CAEvD,IAAK,IAAM,KAAQ,EACb,OAAO,GAAS,SAClB,EAAc,KAAK,GAAG,EAAK,MAAM,IAAI,CAAC,CAC7B,OAAO,GAAS,YACzB,EAAiB,KAAK,EAAK,CAe/B,OAAOC,EAAI,GAVT,EAAc,OAAS,EACnB,EACG,EAAG,IAAe,CACjB,EAAc,QAAS,GAAQ,EAAW,IAAI,EAAI,CAAC,EAErD,GAAG,EACJ,CACD,EAGyB,EC1BpB,GAA2B,EAA8B,GAAG,IAAoB,CAI3F,GAAI,MAAM,QAAQ,EAAO,EAAI,QAAS,EAAQ,CAC5C,IAAI,EAAS,EAAO,GACpB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAK,OAAQ,IAAK,CACpC,IAAM,EAAgB,EAAK,GAC3B,GACE,GAAiB,OAAO,GAAkB,UAAY,UAAW,EAC5D,EAAoC,MACrC,OAAO,EAAc,CAC3B,GAAU,EAAO,EAAI,GAEvB,MAAO,CAAE,MAAO,EAAQ,CAG1B,IAAM,EAAqD,EAAE,CAC7D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,YACjB,EAAoB,KAAK,EAA8C,CAS3E,OANI,EAAoB,SAAW,EAC1B,CACL,UAAW,GACX,MAAO,IAAA,GACR,EAEM,GAAmB,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAI9C,EAAoC,EAAO,EAAoB,GAAG,CAEpE,MAAO,CACL,UAAW,GACX,MAAO,IAAA,GACR,IAIL,SAAS,EACP,EACA,EACA,CACA,IAAM,EAAa,IAAI,IACjB,EAAQ,EAAE,CACZ,EAAS,EAAW,EAAO,EAAY,EAAM,CACjD,KAAO,OAAO,GAAW,YACvB,EAAS,EAAO,EAAO,EAAY,EAAM,CAE3C,OAAO,EChDT,MAAa,GAAuC,EAAS,GAAG,IAGvD,GCFH,EAAoB,EAAE,CA2BfC,EAlBoB,GAC/B,OAAO,OAAO,EAAU,EAAU,CAAE,CAClC,MAAQ,GAAsB,EAAU,EAAW,EAAM,CAC1D,CAAC,CAiBE,GAA6B,EAAW,IAAU,CACtD,IAAM,EAAiB,OAAO,GAAc,UAAY,KAAsB,EAKxE,CAAC,EAAoB,EAAe,GAAyB,EAC9D,EAAU,GAKX,EAAE,CAEA,EAAgB,EAA2B,EAAO,EAAc,CAEtE,OAAQ,EAAQ,GAAG,IAAW,CAG5B,IAAM,EAAkBC,EACtB,EACA,GAAI,EACL,CACK,EAAwB,EAC5B,EACA,EACD,CACK,EAAgC,GAAU,CAc9C,IAAM,EAAQ,GAAiB,EAAgB,OAASC,GAAU,CAAG,EAI/D,EACJ,aAAc,EACT,CACC,QACA,GAAG,EACJ,CAMD,EACE,CACE,QACA,GAAI,EAKJ,SAAU,GACX,CACD,IAAgB,CAAE,QAAO,GAAI,EAAe,CAAC,CAC9C,CAED,EAAa,IAAI,IACrB,cAAe,EAAgB,EAAc,WAAW,MAAM,IAAI,CAAG,EAAE,CACxE,CACK,EAAS,CACb,GAAI,UAAW,EAAgB,EAAc,MAAQ,EAAE,CACxD,CAIK,8BAA+B,IACnC,EAAsB,EAAe,EAAY,EAAO,CAExD,EAAc,0BAA4B,IAG5C,EAAc,UAAY,MAAM,KAAK,EAAW,CAAC,KAAK,IAAI,EAAI,IAAA,GAC9D,EAAc,MAAQ,EAKtB,GAAM,CAAE,MAAO,EAAgB,GAAG,GAA8B,EAC1D,EACJ,IAAmB,EAAQ,EAA4B,EAInD,EAAiB,EAEnB,EADA,EAAuB,EAAqB,CAGhD,OAAO,EAGL,EAAmB,EAAc,CAGjC,EAAA,cAAC,EACM,EACL,EAKN,OAAO,OAAO,OAAO,EAAK,EACvB,GAAqB,CAAC,EAAK,EAAe,EAAsB,CAKlE,CAAC,GAUA,EAA6D,GAAc,CAC/E,IAAM,EAAS,EAAE,CACjB,IAAK,IAAM,KAAO,EACZ,CAAC,EAAI,WAAW,IAAI,EAAI,EAAI,KAAS,IAAA,KACvC,EAAO,GAAO,EAAI,IAGtB,OAAO,GAIH,GAAmB,EAAY,IAAe,CAC9C,MAAC,GAAK,CAAC,GAGX,OAFK,EACA,EACE,EAAI,IAAM,EADF,EADA,GAWX,GAaJ,EACA,IAEA,GACK,EAAM,YAAc,EAAS,WAAa,CAAC,EAAS,aACpD,EAAM,QAAU,EAAS,OAAS,CAAC,EAAS,OAE3C,CACE,GAAG,EACH,GAAG,EACJ,CAED,CACE,GAAG,EACH,GAAG,EACH,UAAW,EAAgB,EAAM,UAAW,EAAS,UAAU,CAC/D,MAAO,CAAE,GAAG,EAAM,MAAO,GAAG,EAAS,MAAO,CAC7C,CAEH,EAWA,GAKJ,EACA,IACsD,CACtD,IAAM,EAAa,IAAU,OAAO,GAAU,WAAa,MAAc,GAezE,OAbI,GAAc,EACR,GAAU,CAChB,IAAM,EAAc,EAAc,EAAM,CAOxC,OAAO,EAAa,EAAa,EAAW,EAAa,EAAO,EAAY,CAAC,CAAC,EAI3E,GAAc,GAUjB,GACJ,EACA,IAEI,GAAmB,GACuB,EAAO,EAAY,IAAU,CACvE,EAAsB,EAAO,EAAY,EAAM,CAC/C,EAAgB,EAAO,EAAY,EAAM,EAItC,GAAmB,ECnSf,EAAS,IAAI,MAAMC,EAAe,CAC7C,IAAI,EAAQ,EAA4C,CACtD,OAAO,EAAO,EAAQ,EAEzB,CAAC"}
1
+ {"version":3,"file":"index.js","names":["css","css","styled","css","useTheme","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type CSSInterpolation<TProps> =\n | string\n | number\n | undefined\n | null\n | false\n | ComponentStyles<TProps>\n | {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n props: unknown,\n classNames: Set<string>,\n style: React.CSSProperties,\n) =>\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | void\n | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n // Normally this could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n let className: string | undefined;\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n className = arg;\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n dynamicCssFunctions.push((props, _, style) => {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n );\n } else {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(value);\n }\n }\n });\n }\n }\n\n // Non Dynamic CSS\n // This is just an optimization for the common case where there are no dynamic css functions\n if (dynamicCssFunctions.length === 0) {\n return (_, classNames) => {\n if (className) {\n classNames.add(className);\n }\n return () => {};\n };\n }\n\n return (props, classNames, allStyles) => {\n if (className) {\n classNames.add(className);\n }\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n }\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: NestedRuntimeStyleProcessor,\n classNames: Set<string>,\n style: React.CSSProperties,\n) => {\n let result = fn(props, classNames, style);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props, classNames, style);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.add(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n // This is hard for typescript to infer\n style[key as keyof React.CSSProperties] = result.style[\n key as keyof React.CSSProperties\n ] as any;\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n );\n }\n }\n return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n const staticClasses: string[] = [];\n const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n for (const atom of atoms) {\n if (typeof atom === \"string\") {\n staticClasses.push(...atom.split(\" \"));\n } else if (typeof atom === \"function\") {\n dynamicFunctions.push(atom);\n }\n }\n\n const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n staticClasses.length > 0\n ? [\n (_, classNames) => {\n staticClasses.forEach((cls) => classNames.add(cls));\n },\n ...dynamicFunctions,\n ]\n : dynamicFunctions;\n\n // @ts-expect-error the internal implementation of css is not typed\n return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n // When called in yak files as a template tag (without SWC transformation),\n // return { __yak: rawCss } so the cross-file resolver can\n // extract the mixin value from evaluated .yak files.\n if (Array.isArray(styles) && \"raw\" in styles) {\n let rawCss = styles[0];\n for (let i = 0; i < args.length; i++) {\n const interpolation = args[i];\n rawCss +=\n interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n ? (interpolation as { __yak: string }).__yak\n : String(interpolation);\n rawCss += styles[i + 1];\n }\n return { __yak: rawCss } as any;\n }\n\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | Function | object>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return ((props: unknown) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: NestedRuntimeStyleProcessor,\n) {\n const classNames = new Set<string>();\n const style = {};\n let result = expression(props, classNames, style);\n while (typeof result === \"function\") {\n result = result(props, classNames, style);\n }\n return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n *\n * const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n Attrs,\n AttrsMerged,\n Styled,\n YakComponent,\n AttrsFunction,\n StyledFn,\n HtmlTags,\n Substitute,\n StyledLiteral,\n RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n Object.assign(yakStyled(Component), {\n attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n // so that the sequence of the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n ? (Component[yakComponentSymbol] as [\n YakComponent<unknown>,\n ExtractAttrsFunction<typeof attrs>,\n RuntimeStyleProcessor<unknown>,\n ])\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return (styles, ...values) => {\n // combine all interpolated logic into a single function\n // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n const runtimeStylesFn = css(\n styles,\n ...(values as CSSInterpolation<unknown>[]),\n ) as RuntimeStyleProcessor<unknown>;\n const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n runtimeStylesFn,\n parentRuntimeStylesFn,\n );\n const Yak: React.FunctionComponent = (props) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? ({\n theme,\n ...props,\n } as {\n theme: YakTheme;\n className?: string;\n style?: React.CSSProperties;\n })\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...(props as any) }),\n );\n\n const classNames = new Set<string>(\n \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n );\n const styles = {\n ...(\"style\" in combinedProps ? combinedProps.style : {}),\n };\n\n // execute all functions inside the style literal if not already executed\n // e.g. styled.button`color: ${props => props.color};`\n if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n runtimeStyleProcessor(combinedProps, classNames, styles);\n // @ts-expect-error this is not typed correctly\n combinedProps.$__runtimeStylesProcessed = true;\n }\n\n combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n combinedProps.style = styles;\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n return parentYakComponent ? (\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly without running through react createElement\n parentYakComponent(filteredProps)\n ) : (\n // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n <Component\n {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n />\n );\n };\n\n // Assign the yakComponentSymbol directly without forwardRef\n return Object.assign(Yak, {\n [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n unknown,\n unknown,\n unknown,\n ],\n });\n };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | null\n | undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className || !newProps.className) &&\n (props.style === newProps.style || !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...props.style, ...newProps.style },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n };\n }\n\n return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n runtimeStylesFn: RuntimeStyleProcessor<T>,\n parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n if (runtimeStylesFn && parentRuntimeStylesFn) {\n const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n parentRuntimeStylesFn(props, classNames, style);\n runtimeStylesFn(props, classNames, style);\n };\n return combined;\n }\n return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n T extends object,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n get(target, TagName: keyof React.JSX.IntrinsicElements) {\n return target(TagName);\n },\n}) as typeof StyledFactory;\n"],"mappings":"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"}