npm - next-yak - Versions diffs - 6.0.0 → 7.0.0 - Mend

next-yak 6.0.0 → 7.0.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 (16) hide show

package/README.md +2 -2
package/dist/index.cjs +1 -1
package/dist/index.cjs.map +1 -1
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/internal.cjs.map +1 -1
package/dist/internal.js.map +1 -1
package/dist/loaders/css-loader.js +638 -300
package/dist/loaders/css-loader.js.map +1 -1
package/dist/static/index.cjs.map +1 -1
package/dist/withYak/index.js +3 -3
package/loaders/lib/resolveCrossFileSelectors.ts +116 -533
package/package.json +17 -17
package/runtime/__tests__/styled.test.tsx +1 -1
package/runtime/__tests__/typeTest.tsx +3 -3
package/runtime/styled.tsx +1 -1

package/README.md CHANGED Viewed

@@ -217,7 +217,7 @@ next-yak converts css-in-js into css modules. This allows to use the full power
 ## Atomic CSS
 `next-yak` ships with atomic css support
-So you can use [tailwind](https://tailwindcss.com/) out of the box without additonal configuration.
+So you can use [tailwind](https://tailwindcss.com/) out of the box without additional configuration.
 ```tsx
 import { styled, atoms } from "next-yak";
@@ -275,7 +275,7 @@ const Container = styled.div`
 ## Yak shaving
-While trying to get next-yak to work properly we stumbled accross several bugs.
+While trying to get next-yak to work properly we stumbled across several bugs.
 Thanks for merging our prs fixes in next.js, webpack and postcss ❤️
 <details>

package/dist/index.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";var E=Object.create;var u=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var s in e)u(t,s,{get:e[s],enumerable:!0})},R=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of D(e))!M.call(t,n)&&n!==s&&u(t,n,{get:()=>e[n],enumerable:!(r=$(e,n))||r.enumerable});return t};var J=(t,e,s)=>(s=t!=null?E(L(t)):{},R(e||!t||!t.__esModule?u(s,"default",{value:t,enumerable:!0}):s,t)),W=t=>R(u({},"__esModule",{value:!0}),t);var U={};H(U,{YakThemeProvider:()=>S.YakThemeProvider,atoms:()=>N,css:()=>I,keyframes:()=>b,styled:()=>_,useTheme:()=>S.useTheme});module.exports=W(U);var S=require("next-yak/context");var p=Symbol("yak");function f(...t){let e,s=[];for(let r of t)typeof r=="string"?e=r:typeof r=="function"?s.push(r):typeof r=="object"&&"style"in r&&s.push((n,o,i)=>{for(let a in r.style){let l=r.style[a];typeof l=="function"?i[a]=String(h(n,l)):i[a]=String(l)}});return s.length===0?(r,n)=>(e&&n.add(e),()=>{}):(r,n,o)=>{e&&n.add(e);for(let i=0;i<s.length;i++)B(r,s[i],n,o)}}var B=(t,e,s,r)=>{let n=e(t,s,r);for(;n;){if(typeof n=="function"){n=n(t,s,r);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.add(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},h=(t,e)=>{let s=e(t);if(typeof s=="function")return h(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}
 Dynamic CSS function: ${e.toString()}
-`);return s};var N=(...t)=>{let e=[],s=[];for(let n of t)typeof n=="string"?e.push(...n.split(" ")):typeof n=="function"&&s.push(n);let r=e.length>0?[(n,o)=>{e.forEach(i=>o.add(i))},...s]:s;return f(...r)};var I=(t,...e)=>{let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:r=>{for(let n=0;n<s.length;n++)G(r,s[n]);return{className:"",style:void 0}}};function G(t,e){let s=new Set,r={},n=e(t,s,r);for(;typeof n=="function";)n=n(t,s,r);return n}var b=(t,...e)=>"";var w=J(require("react"),1),Y=require("next-yak/context"),V={},X=t=>Object.assign(F(t),{attrs:e=>F(t,e)}),O=X,F=(t,e)=>{let s=typeof t!="string"&&p in t,[r,n,o]=s?t[p]:[],i=K(e,n);return(a,...l)=>{let T=f(a,...l),g=Q(T,o),P=y=>{let m=i||T.length?(0,Y.useTheme)():V,c="$__attrs"in y?{theme:m,...y}:d({theme:m,...y,$__attrs:!0},i?.({theme:m,...y})),k=new Set("className"in c?c.className?.split(" "):[]),C={..."style"in c?c.style:{}};"$__runtimeStylesProcessed"in c||(g(c,k,C),c.$__runtimeStylesProcessed=!0),c.className=Array.from(k).join(" ")||void 0,c.style=C;let{theme:j,...v}=c,x=j===m?v:c,A=s?x:q(x);return r?r(A):w.default.createElement(t,{...A})};return Object.assign(P,{[p]:[P,i,g]})}},q=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},z=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},d=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:z(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,K=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return d(n,s(d(r,n)))}:s||e},Q=(t,e)=>t&&e?(r,n,o)=>{e(r,n,o),t(r,n,o)}:t||e;var _=new Proxy(O,{get(t,e){return t(e)}});0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
+`);return s};var N=(...t)=>{let e=[],s=[];for(let n of t)typeof n=="string"?e.push(...n.split(" ")):typeof n=="function"&&s.push(n);let r=e.length>0?[(n,o)=>{e.forEach(i=>o.add(i))},...s]:s;return f(...r)};var I=(t,...e)=>{let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:(r=>{for(let n=0;n<s.length;n++)G(r,s[n]);return{className:"",style:void 0}})};function G(t,e){let s=new Set,r={},n=e(t,s,r);for(;typeof n=="function";)n=n(t,s,r);return n}var b=(t,...e)=>"";var w=J(require("react"),1),Y=require("next-yak/context"),V={},X=t=>Object.assign(F(t),{attrs:e=>F(t,e)}),O=X,F=(t,e)=>{let s=typeof t!="string"&&p in t,[r,n,o]=s?t[p]:[],i=K(e,n);return(a,...l)=>{let T=f(a,...l),g=Q(T,o),P=y=>{let m=i||T.length?(0,Y.useTheme)():V,c="$__attrs"in y?{theme:m,...y}:d({theme:m,...y,$__attrs:!0},i?.({theme:m,...y})),k=new Set("className"in c?c.className?.split(" "):[]),C={..."style"in c?c.style:{}};"$__runtimeStylesProcessed"in c||(g(c,k,C),c.$__runtimeStylesProcessed=!0),c.className=Array.from(k).join(" ")||void 0,c.style=C;let{theme:j,...v}=c,x=j===m?v:c,A=s?x:q(x);return r?r(A):w.default.createElement(t,{...A})};return Object.assign(P,{[p]:[P,i,g]})}},q=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},z=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},d=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:z(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,K=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return d(n,s(d(r,n)))}:s||e},Q=(t,e)=>t&&e?(r,n,o)=>{e(r,n,o),t(r,n,o)}:t||e;var _=new Proxy(O,{get(t,e){return t(e)}});0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\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\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport type { GenericYakComponentOf } from \"./publicStyledApi.ts\";\n\nexport { atoms } from \"./atoms.js\";\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { styled } from \"./mocks/styled.js\";\n","import type { YakTheme } from \"./index.d.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>(\n ...args: Array<any>\n): 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 = (\n props: unknown,\n fn: (props: unknown) => any,\n): 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 (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\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 as 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 {\n css as cssInternal,\n NestedRuntimeStyleProcessor,\n} 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 = (\n styles: TemplateStringsArray,\n ...args: unknown[]\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.d.ts\";\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 =\n 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] =\n 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 =\n 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 } =\n 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<\n Exclude<typeof Component, string>\n >)}\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 stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(\n obj: T,\n): 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 =\n 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(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\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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","names":["index_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","yakComponentSymbol","css","args","className","dynamicCssFunctions","arg","props","_","style","key","value","recursivePropExecution","classNames","allStyles","unwrapProps","fn","result","atoms","staticClasses","dynamicFunctions","atom","runtimeFunctions","_","classNames","cls","css","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","classNames","style","result","keyframes","styles","dynamic","import_react","import_context","noTheme","styledFactory","Component","yakStyled","attrs","styled","isYakComponent","yakComponentSymbol","parentYakComponent","parentAttrsFn","parentRuntimeStylesFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","runtimeStylesFn","css","runtimeStyleProcessor","buildRuntimeStylesProcessor","yak","props","theme","combinedProps","combineProps","classNames","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","React","obj","result","key","mergeClassNames","a","b","newProps","ownAttrsFn","parentProps","style","styled","target","TagName"]}
1	+ {"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\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\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport type { GenericYakComponentOf } from \"./publicStyledApi.ts\";\n\nexport { atoms } from \"./atoms.js\";\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { styled } from \"./mocks/styled.js\";\n","import type { YakTheme } from \"./index.d.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>(\n ...args: Array<any>\n): 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 = (\n props: unknown,\n fn: (props: unknown) => any,\n): 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 (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\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 as 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 {\n css as cssInternal,\n NestedRuntimeStyleProcessor,\n} 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 = (\n styles: TemplateStringsArray,\n ...args: unknown[]\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.d.ts\";\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 =\n 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] =\n 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 =\n 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 } =\n 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<\n Exclude<typeof Component, string>\n >)}\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>>(\n obj: T,\n): 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 =\n 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(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\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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","names":["index_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","yakComponentSymbol","css","args","className","dynamicCssFunctions","arg","props","_","style","key","value","recursivePropExecution","classNames","allStyles","unwrapProps","fn","result","atoms","staticClasses","dynamicFunctions","atom","runtimeFunctions","_","classNames","cls","css","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","classNames","style","result","keyframes","styles","dynamic","import_react","import_context","noTheme","styledFactory","Component","yakStyled","attrs","styled","isYakComponent","yakComponentSymbol","parentYakComponent","parentAttrsFn","parentRuntimeStylesFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","runtimeStylesFn","css","runtimeStyleProcessor","buildRuntimeStylesProcessor","yak","props","theme","combinedProps","combineProps","classNames","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","React","obj","result","key","mergeClassNames","a","b","newProps","ownAttrsFn","parentProps","style","styled","target","TagName"]}

package/dist/index.js CHANGED Viewed

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

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\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\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport type { GenericYakComponentOf } from \"./publicStyledApi.ts\";\n\nexport { atoms } from \"./atoms.js\";\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { styled } from \"./mocks/styled.js\";\n","import type { YakTheme } from \"./index.d.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>(\n ...args: Array<any>\n): 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 = (\n props: unknown,\n fn: (props: unknown) => any,\n): 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 (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\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 as 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 {\n css as cssInternal,\n NestedRuntimeStyleProcessor,\n} 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 = (\n styles: TemplateStringsArray,\n ...args: unknown[]\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.d.ts\";\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 =\n 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] =\n 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 =\n 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 } =\n 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<\n Exclude<typeof Component, string>\n >)}\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 stylingen purposes\n * but are not be passed to the DOM element\n /\nconst removeNonDomProperties = <T extends Record<string, unknown>>(\n obj: T,\n): 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 =\n 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(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\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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","names":["useTheme","YakThemeProvider","yakComponentSymbol","css","args","className","dynamicCssFunctions","arg","props","_","style","key","value","recursivePropExecution","classNames","allStyles","unwrapProps","fn","result","atoms","staticClasses","dynamicFunctions","atom","runtimeFunctions","_","classNames","cls","css","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","classNames","style","result","keyframes","styles","dynamic","React","useTheme","noTheme","styledFactory","Component","yakStyled","attrs","styled","isYakComponent","yakComponentSymbol","parentYakComponent","parentAttrsFn","parentRuntimeStylesFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","runtimeStylesFn","css","runtimeStyleProcessor","buildRuntimeStylesProcessor","yak","props","theme","combinedProps","combineProps","classNames","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","obj","result","key","mergeClassNames","a","b","newProps","ownAttrsFn","parentProps","style","styled","target","TagName"]}
1	+ {"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["/*\n This file contains the typings for the public API for next-yak and testing mocks\n \n IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n \n Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n \n Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n \n Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak Babel plugin\n \n For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n /\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\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport type { GenericYakComponentOf } from \"./publicStyledApi.ts\";\n\nexport { atoms } from \"./atoms.js\";\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { styled } from \"./mocks/styled.js\";\n","import type { YakTheme } from \"./index.d.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>(\n ...args: Array<any>\n): 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 = (\n props: unknown,\n fn: (props: unknown) => any,\n): 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 (\n typeof result !== \"string\" &&\n typeof result !== \"number\" &&\n !(result instanceof String)\n ) {\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 as 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 {\n css as cssInternal,\n NestedRuntimeStyleProcessor,\n} 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 = (\n styles: TemplateStringsArray,\n ...args: unknown[]\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.d.ts\";\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 =\n 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] =\n 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 =\n 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 } =\n 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<\n Exclude<typeof Component, string>\n >)}\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>>(\n obj: T,\n): 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 =\n 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(\n parentProps,\n ownAttrsFn(combineProps(props, parentProps)),\n );\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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","names":["useTheme","YakThemeProvider","yakComponentSymbol","css","args","className","dynamicCssFunctions","arg","props","_","style","key","value","recursivePropExecution","classNames","allStyles","unwrapProps","fn","result","atoms","staticClasses","dynamicFunctions","atom","runtimeFunctions","_","classNames","cls","css","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","classNames","style","result","keyframes","styles","dynamic","React","useTheme","noTheme","styledFactory","Component","yakStyled","attrs","styled","isYakComponent","yakComponentSymbol","parentYakComponent","parentAttrsFn","parentRuntimeStylesFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","runtimeStylesFn","css","runtimeStyleProcessor","buildRuntimeStylesProcessor","yak","props","theme","combinedProps","combineProps","classNames","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","obj","result","key","mergeClassNames","a","b","newProps","ownAttrsFn","parentProps","style","styled","target","TagName"]}