next-yak
Version:
next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration
1 lines • 27 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","names":["css","css","styled","css","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n className: string;\n style?: {\n [key: string]: string;\n };\n};\n\nexport type CSSInterpolation<TProps> =\n | string\n | number\n | undefined\n | null\n | false\n | ComponentStyles<TProps>\n | {\n // type only identifier to allow targeting components\n // e.g. styled.svg`${Button}:hover & { fill: red; }`\n [yakComponentSymbol]: any;\n }\n | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n props: unknown,\n classNames: Set<string>,\n style: React.CSSProperties,\n) =>\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | void\n | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n styles: TemplateStringsArray,\n ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n // Normally this could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n let className: string | undefined;\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n // A CSS-module class name which got auto generated during build from static css\n // e.g. css`color: red;`\n // compiled -> css(\"yak31e4\")\n if (typeof arg === \"string\") {\n className = arg;\n }\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n else if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n // Dynamic CSS with css variables e.g.\n // css`transform: translate(${props => props.x}, ${props => props.y});`\n // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n else if (typeof arg === \"object\" && \"style\" in arg) {\n dynamicCssFunctions.push((props, _, style) => {\n for (const key in arg.style) {\n const value = arg.style[key];\n if (typeof value === \"function\") {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(\n // The value for a css value can be a theme dependent function e.g.:\n // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n // css`border-color: ${borderColor};`\n // Therefore the value has to be extracted recursively\n recursivePropExecution(props, value),\n );\n } else {\n // @ts-expect-error CSSProperties don't allow css variables\n style[key] = String(value);\n }\n }\n });\n }\n }\n\n // Non Dynamic CSS\n // This is just an optimization for the common case where there are no dynamic css functions\n if (dynamicCssFunctions.length === 0) {\n return (_, classNames) => {\n if (className) {\n classNames.add(className);\n }\n return () => {};\n };\n }\n\n return (props, classNames, allStyles) => {\n if (className) {\n classNames.add(className);\n }\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n }\n };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n props: unknown,\n fn: NestedRuntimeStyleProcessor,\n classNames: Set<string>,\n style: React.CSSProperties,\n) => {\n let result = fn(props, classNames, style);\n while (result) {\n if (typeof result === \"function\") {\n result = result(props, classNames, style);\n continue;\n } else if (typeof result === \"object\") {\n if (\"className\" in result && result.className) {\n classNames.add(result.className);\n }\n if (\"style\" in result && result.style) {\n for (const key in result.style) {\n // This is hard for typescript to infer\n style[key as keyof React.CSSProperties] = result.style[\n key as keyof React.CSSProperties\n ] as any;\n }\n }\n }\n break;\n }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n const result = fn(props);\n if (typeof result === \"function\") {\n return recursivePropExecution(props, result);\n }\n if (process.env.NODE_ENV === \"development\") {\n if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n throw new Error(\n `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n result,\n )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n );\n }\n }\n return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n * ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n * ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n const staticClasses: string[] = [];\n const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n for (const atom of atoms) {\n if (typeof atom === \"string\") {\n staticClasses.push(...atom.split(\" \"));\n } else if (typeof atom === \"function\") {\n dynamicFunctions.push(atom);\n }\n }\n\n const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n staticClasses.length > 0\n ? [\n (_, classNames) => {\n staticClasses.forEach((cls) => classNames.add(cls));\n },\n ...dynamicFunctions,\n ]\n : dynamicFunctions;\n\n // @ts-expect-error the internal implementation of css is not typed\n return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n * color: black;\n * ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n // When called in yak files as a template tag (without SWC transformation),\n // return { __yak: rawCss } so the cross-file resolver can\n // extract the mixin value from evaluated .yak files.\n if (Array.isArray(styles) && \"raw\" in styles) {\n let rawCss = styles[0];\n for (let i = 0; i < args.length; i++) {\n const interpolation = args[i];\n rawCss +=\n interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n ? (interpolation as { __yak: string }).__yak\n : String(interpolation);\n rawCss += styles[i + 1];\n }\n return { __yak: rawCss } as any;\n }\n\n const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n for (const arg of args as Array<string | Function | object>) {\n // Dynamic CSS e.g.\n // css`${props => props.active && css`color: red;`}`\n // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n if (typeof arg === \"function\") {\n dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n }\n }\n if (dynamicCssFunctions.length === 0) {\n return {\n className: \"\",\n style: undefined,\n };\n }\n return ((props: unknown) => {\n for (let i = 0; i < dynamicCssFunctions.length; i++) {\n // run the dynamic expressions and ignore the return value\n // the execution is important to ensure that the user code is executed\n // the same way as in the real runtime\n executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n }\n return {\n className: \"\",\n style: undefined,\n };\n }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n props: unknown,\n expression: NestedRuntimeStyleProcessor,\n) {\n const classNames = new Set<string>();\n const style = {};\n let result = expression(props, classNames, style);\n while (typeof result === \"function\") {\n result = result(props, classNames, style);\n }\n return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n * from {\n * transform: rotate(0deg);\n * }\n * to {\n * transform: rotate(360deg);\n * }\n * `;\n *\n * const Spinner = styled.div`\n * animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n // the keyframes function is a no-op in the mock\n // as it has no dynamic runtime behavior but only css\n return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n Attrs,\n AttrsMerged,\n Styled,\n YakComponent,\n AttrsFunction,\n StyledFn,\n HtmlTags,\n Substitute,\n StyledLiteral,\n RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n Object.assign(yakStyled(Component), {\n attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n * color: #BF4F74;\n * font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n // so that the sequence of the attrs functions is preserved\n const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n ? (Component[yakComponentSymbol] as [\n YakComponent<unknown>,\n ExtractAttrsFunction<typeof attrs>,\n RuntimeStyleProcessor<unknown>,\n ])\n : [];\n\n const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n return (styles, ...values) => {\n // combine all interpolated logic into a single function\n // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n const runtimeStylesFn = css(\n styles,\n ...(values as CSSInterpolation<unknown>[]),\n ) as RuntimeStyleProcessor<unknown>;\n const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n runtimeStylesFn,\n parentRuntimeStylesFn,\n );\n const Yak: React.FunctionComponent = (props) => {\n // if the css component does not require arguments\n // it can be called without arguments and we skip calling useTheme()\n //\n // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n // getRuntimeStyles and attrsFn are constants defined outside of the component\n //\n // for example\n //\n // const Button = styled.button`color: red;`\n // ^ does not need to have access to theme, so we skip calling useTheme()\n //\n // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n // ^ must be have access to theme, so we call useTheme()\n const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n // The first components which is not wrapped in a yak component will execute all attrs functions\n // starting from the innermost yak component to the outermost yak component (itself)\n const combinedProps =\n \"$__attrs\" in props\n ? ({\n theme,\n ...props,\n } as {\n theme: YakTheme;\n className?: string;\n style?: React.CSSProperties;\n })\n : // overwrite and merge the current props with the processed attrs\n combineProps(\n {\n theme,\n ...(props as {\n className?: string;\n style?: React.CSSProperties;\n }),\n // mark the props as processed\n $__attrs: true,\n },\n mergedAttrsFn?.({ theme, ...(props as any) }),\n );\n\n const classNames = new Set<string>(\n \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n );\n const styles = {\n ...(\"style\" in combinedProps ? combinedProps.style : {}),\n };\n\n // execute all functions inside the style literal if not already executed\n // e.g. styled.button`color: ${props => props.color};`\n if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n runtimeStyleProcessor(combinedProps, classNames, styles);\n // @ts-expect-error this is not typed correctly\n combinedProps.$__runtimeStylesProcessed = true;\n }\n\n combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n combinedProps.style = styles;\n\n // delete the yak theme from the props\n // this must happen after the runtimeStyles are calculated\n // prevents passing the theme prop to the DOM element of a styled component\n const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n const propsBeforeFiltering =\n themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n // so that they are not passed to the DOM element\n const filteredProps = !isYakComponent\n ? removeNonDomProperties(propsBeforeFiltering)\n : propsBeforeFiltering;\n\n return parentYakComponent ? (\n // if the styled(Component) syntax is used and the component is a yak component\n // we can call the yak function directly without running through react createElement\n parentYakComponent(filteredProps)\n ) : (\n // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n <Component\n {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n />\n );\n };\n\n // Assign the yakComponentSymbol directly without forwardRef\n return Object.assign(Yak, {\n [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n unknown,\n unknown,\n unknown,\n ],\n });\n };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n const result = {} as T;\n for (const key in obj) {\n if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n result[key] = obj[key];\n }\n }\n return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n if (!a && !b) return undefined;\n if (!a) return b;\n if (!b) return a;\n return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n T extends {\n className?: string;\n style?: React.CSSProperties;\n },\n TOther extends\n | {\n className?: string;\n style?: React.CSSProperties;\n }\n | null\n | undefined,\n>(\n props: T,\n newProps: TOther,\n) =>\n newProps\n ? (props.className === newProps.className || !newProps.className) &&\n (props.style === newProps.style || !newProps.style)\n ? // shortcut if no style and class merging is necessary\n {\n ...props,\n ...newProps,\n }\n : // merge class names and styles\n {\n ...props,\n ...newProps,\n className: mergeClassNames(props.className, newProps.className),\n style: { ...props.style, ...newProps.style },\n }\n : // if no new props are provided, no merging is necessary\n props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n T,\n TAttrsIn extends object,\n TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n if (ownAttrsFn && parentAttrsFn) {\n return (props) => {\n const parentProps = parentAttrsFn(props);\n\n // overwrite and merge the parent props with the props received from the attrs function\n // after they went through the parent attrs function.\n //\n // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n // the whole props object calculated from the previous attrs functions\n return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n };\n }\n\n return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n runtimeStylesFn: RuntimeStyleProcessor<T>,\n parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n if (runtimeStylesFn && parentRuntimeStylesFn) {\n const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n parentRuntimeStylesFn(props, classNames, style);\n runtimeStylesFn(props, classNames, style);\n };\n return combined;\n }\n return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n T extends object,\n TAttrsIn extends object = {},\n TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n get(target, TagName: keyof React.JSX.IntrinsicElements) {\n return target(TagName);\n },\n}) as typeof StyledFactory;\n"],"mappings":"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"}