twind
Version:
compiles tailwind like shorthand syntax into css at runtime
74 lines (70 loc) • 2.12 kB
TypeScript
import { MaybeThunk, MaybeArray, Falsy, Directive, CSSRules, CSSAtKeyframes, CSSProperties, Context } from 'twind';
export * from 'twind';
/**
* [[include:src/css/README.md]]
*
* @packageDocumentation
* @module twind/css
*/
interface CSSFactory<T, I, R> {
(strings: TemplateStringsArray, ...interpolations: readonly MaybeThunk<MaybeArray<I | string | number | Falsy>>[]): Directive<R>;
(tokens: MaybeThunk<MaybeArray<T | Falsy>>): Directive<R>;
(...tokens: readonly MaybeThunk<T | Falsy>[]): Directive<R>;
}
declare const css: CSSFactory<CSSRules, CSSRules, CSSRules>;
/**
*
* ```js
* const bounce = keyframes({
* 'from, 20%, 53%, 80%, to': {
* transform: 'translate3d(0,0,0)',
* },
* '40%, 43%': {
* transform: 'translate3d(0, -30px, 0)',
* },
* '70%': {
* transform: 'translate3d(0, -15px, 0)',
* },
* '90%': {
* transform: 'translate3d(0, -4px, 0)',
* }
* })
*
* css({
* animation: `${bounce} 1s ease infinite`,
* })
* ```
* @param waypoints
*/
declare const keyframes: CSSFactory<CSSAtKeyframes, CSSAtKeyframes | CSSProperties, string>;
/**
*
* ```js
* const bounce = animation('1s ease infinite', {
* 'from, 20%, 53%, 80%, to': {
* transform: 'translate3d(0,0,0)',
* },
* '40%, 43%': {
* transform: 'translate3d(0, -30px, 0)',
* },
* '70%': {
* transform: 'translate3d(0, -15px, 0)',
* },
* '90%': {
* transform: 'translate3d(0, -4px, 0)',
* }
* })
* ```
*/
interface Animation {
(value: string | CSSRules | ((context: Context) => string)): CSSFactory<CSSAtKeyframes, CSSAtKeyframes | CSSProperties, CSSRules>;
(value: string | CSSRules | ((context: Context) => string), waypoints: CSSAtKeyframes | Directive<string>): Directive<CSSRules>;
}
declare const animation: Animation;
interface Screen {
(size: string): Directive<string>;
(size: string, css: Directive<CSSRules> | MaybeArray<CSSRules | Falsy>): Directive<CSSRules>;
}
declare const screen: Screen;
export { Animation, CSSFactory, Screen, animation, css, keyframes, screen };
//# sourceMappingURL=css.d.ts.map