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
200 lines (190 loc) • 6.67 kB
TypeScript
import React, { ReactNode } from 'react';
interface YakTheme {
}
/**
* Returns the current yak theme context
*
* @see https://github.com/jantimon/next-yak/blob/main/packages/next-yak/runtime/context/README.md
*/
declare const useTheme: () => YakTheme;
/**
* Yak theme context provider
*
* @see https://github.com/jantimon/next-yak/blob/main/packages/next-yak/runtime/context/README.md
*/
declare const YakThemeProvider: ({ children, theme, }: {
children: ReactNode;
theme?: YakTheme;
}) => React.JSX.Element;
/**
* Allows to use atomic CSS classes in a styled or css block
*
* @usage
*
* ```tsx
* import { styled, atoms } from "next-yak";
*
* const Button = styled.button<{ $primary?: boolean }>`
* ${atoms("text-teal-600", "text-base", "rounded-md")}
* ${props => props.$primary && atoms("shadow-md")}
* `;
* ```
*/
declare const atoms: (...atoms: string[]) => () => {
className: string;
};
declare const yakComponentSymbol: unique symbol;
type ComponentStyles<TProps> = (props: TProps) => {
className: string;
style?: {
[key: string]: string;
};
};
type CSSInterpolation<TProps> = string | number | undefined | null | false | ComponentStyles<TProps> | {
[yakComponentSymbol]: any;
} | ((props: TProps) => CSSInterpolation<TProps>);
/**
* css() runtime factory of css``
*
* /!\ next-yak transpiles css`` and styled``
*
* This changes the typings of the css`` and styled`` functions.
* During development the user of next-yak wants to work with the
* typings BEFORE compilation.
*
* Therefore this is only an internal function only and it must be cast to any
* before exported to the user.
*/
declare function css$1<TProps>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
theme: YakTheme;
}>[]): ComponentStyles<TProps>;
/**
* Allows to use CSS styles in a styled or css block
*
* e.g.
*
* ```tsx
* const Component = styled.div`
* color: black;
* ${({$active}) => $active && css`color: red;`}
* `;
* ```
*/
declare const css: typeof css$1;
/**
* Allows to use CSS keyframe animations in a styled or css block
*
* @usage
*
* ```tsx
* import { styled, keyframes } from "next-yak";
*
* const rotate = keyframes`
* from {
* transform: rotate(0deg);
* }
* to {
* transform: rotate(360deg);
* }
* `;
*
* const Spinner = styled.div`
* animation: ${rotate} 1s linear infinite;
* `;
* ```
*/
declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ...dynamic: T) => string;
/**
* Allows to use CSS keyframe animations in a styled or css block
*
* @usage
*
* ```tsx
* import { styled, keyframes } from "next-yak";
*
* const rotate = keyframes`
* from {
* transform: rotate(0deg);
* }
* to {
* transform: rotate(360deg);
* }
* `;
*
* const Spinner = styled.div`
* animation: ${rotate} 1s linear infinite;
* `;
* ```
*/
declare const keyframes: typeof keyframes$1;
/**
* All valid html tags
*/
type HtmlTags = keyof React.JSX.IntrinsicElements;
/**
* Return type of the provided props merged with the initial props
* where the specified props are optional
*/
type AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<TBaseProps & {
theme: YakTheme;
}, TIn>;
/**
* The attrs function allows to add additional props in a function that receives
* the current props as argument.
*/
type AttrsFunction<TBaseProps, TIn extends object, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> = (p: Substitute<TBaseProps & {
theme: YakTheme;
}, TIn>) => Partial<TOut>;
/**
* The attrs function allows to add additional props to a styled component.
* The props can be specified as an object or as a function that receives the
* current props as argument.
*/
type Attrs<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;
declare const StyledFactory: <T>(Component: HtmlTags | React.FunctionComponent<T>) => (<TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & NoInfer<TCSSProps> & {
theme: YakTheme;
}>[]) => YakComponent<FastOmit<TCSSProps & T, never>, object, AttrsMerged<FastOmit<TCSSProps & T, never>, object>>) & {
attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & NoInfer<TCSSProps> & {
theme: YakTheme;
}>[]) => YakComponent<Substitute<TCSSProps & T, TAttrsIn>, object, AttrsMerged<Substitute<TCSSProps & T, TAttrsIn>, object>>;
};
/**
* A yak component has a special symbol attached to it that allows to
* target the component from a child component and to correctly handle the attrs function (if any).
* e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`
*/
type YakComponent<T, TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>> = React.FunctionComponent<T> & {
[yakComponentSymbol]: [
React.FunctionComponent<T>,
AttrsFunction<T, TAttrsIn, TAttrsOut>
];
};
/**
* Type for the proxy object returned by `styled` that allows to
* access all html tags as properties.
*/
type StyledLiteral<T> = <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
theme: YakTheme;
}>>) => YakComponent<TCSSProps & T>;
/**
* The `styled` method works perfectly on all of your own or any third-party component,
* as long as they attach the passed className prop to a DOM element.
*
* @usage
*
* ```tsx
* const StyledLink = styled(Link)`
* color: #BF4F74;
* font-weight: bold;
* `;
* ```
*/
declare const styled$1: typeof StyledFactory & { [Tag in HtmlTags]: StyledLiteral<React.JSX.IntrinsicElements[Tag]> & {
attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.JSX.IntrinsicElements[Tag], TAttrsIn> = AttrsMerged<React.JSX.IntrinsicElements[Tag], TAttrsIn>>(attrs: Attrs<React.JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<React.JSX.IntrinsicElements[Tag], TAttrsIn>>;
}; };
type FastOmit<T extends object, U extends string | number | symbol> = {
[K in keyof T as K extends U ? never : K]: T[K];
};
type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
declare const styled: typeof styled$1;
export { type YakTheme, YakThemeProvider, atoms, css, keyframes, styled, useTheme };