import { ObjectProps , NumberOrString , NumberOrStringArray } from '@types' ; import facepaint from 'facepaint' ; import { CSSObject } from '@emotion/react' ; type StyleSheet = ObjectProps < NumberOrString | NumberOrStringArray | StyleSheet > ; type FacepaintStyleSheetObject = ObjectProps < CSSObject [ ] > ; interface BreakpointsObject { small : number ; medium : number ; large : number ; extralarge : number ; } export const breakpointSizes = { small : 576 , medium : 768 , large : 992 , extralarge : 1200 } ; type MediaQueryObject = { [ key in keyof BreakpointsObject ] ? : string ; } ; type BreakpointsKeyValueArray = [ keyof BreakpointsObject , number ] ; const mediaQueries = Object . entries ( breakpointSizes ) . reduce ( ( bp , [ key , value ] ) : MediaQueryObject => { bp [ key ] = `@media (min-width: ${ value }px)` ; return bp ; } , { } ) ; const facePaintMediaQueries = facepaint ( [ mediaQueries . small , mediaQueries . medium , mediaQueries . large , mediaQueries . extralarge ] ) ; export const parse = ( stylesheet ) : FacepaintStyleSheetObject => Object . entries ( stylesheet ) . reduce ( ( styles , [ key , value ] ) : FacepaintStyleSheetObject => { styles [ key ] = facePaintMediaQueries ( value ) ; return styles ; } , { } ) ; export const shorthands = ( ... props ) : string => props . map ( ( p ) => typeof p === 'string' ? p : `${ p }px` ) . join ( ' ' ) ; const transformParams = '0.25s ease-in-out' ; export const buildTransition = ( ... transforms ) : string => transforms . map ( ( t ) => `${ t } ${ transformParams }` ) . join ( ', ' ) ;