UNPKG

@compiled/react

Version:

A familiar and performant compile time CSS-in-JS library for React.

76 lines (75 loc) 2.41 kB
import type { JSX } from 'react'; import type { CssFunction } from '../types'; type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? { /** * ## CSS prop * * Style a JSX element. * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-css-prop). * * ### Style with objects * * @example * ``` * import { css } from '@compiled/react'; * * <div css={css({ fontSize: 12 })} /> * ``` * * ### Style with template literals * * @example * ``` * import { css } from '@compiled/react'; * * <div css={css`color: red;`} /> * ``` * * ### Compose styles with arrays * * @example * ``` * import { css } from '@compiled/react'; * * <div * css={[ * css({ fontSize: 12 }), * css`color: red;`, * ]} * /> * ``` */ css?: CssFunction<void> | CssFunction<void>[]; } : {} : {}; type ReactJSXElementType = string | React.JSXElementConstructor<any>; type ReactJSXElement = JSX.Element; type ReactJSXElementClass = JSX.ElementClass; type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes; type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>; type ReactJSXIntrinsicElements = JSX.IntrinsicElements; export declare namespace CompiledJSX { type ElementType = ReactJSXElementType; type Element = ReactJSXElement; type ElementClass = ReactJSXElementClass; interface ElementAttributesProperty { props: {}; } interface ElementChildrenAttribute { children: {}; } type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> & React.JSX.LibraryManagedAttributes<C, P> & { key?: React.Key | null; }; type IntrinsicAttributes = ReactJSXIntrinsicAttributes; type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>; type IntrinsicElements = { [K in keyof ReactJSXIntrinsicElements]: Omit<ReactJSXIntrinsicElements[K], 'className'> & { /** * The class name prop now can be given the output of xcss prop from `@compiled/react`. */ className?: string | Record<string, any> | null | false; css?: CssFunction<void> | CssFunction<void>[]; }; }; } export {};