import { css } from 'styled-components' ; interface Breakpoints { [ key ] : number ; } interface MediaQueries { [ key ] : ( declarations : TemplateStringsArray ) => TemplateStringsArray ; } interface Object { [ key ] : object ; } const breakpoints = { sm : 36 , md : 48 , lg : 62 , xl : 75 , } as Breakpoints ; export const media = Object . keys ( breakpoints ) . reduce ( ( queryObject , screen ) => { queryObject [ screen ] = ( declarations ) => { return `
    @media only screen and (min-width: ${ breakpoints [ screen ] }em) {
      ${ css ( declarations ) }
    }
    ` ; } ; return queryObject ; } , { } ) as MediaQueries ;