interface BreakPoints { smallPhone : number ; phone : number ; tablet : number ; desktop : number ; largeDesktop : number ; } let breakpoints = { smallPhone : 320 , phone : 375 , tablet : 768 , desktop : 1024 , largeDesktop : 1440 , } ; const signRegex = /^[<=>]+/ ; function throwError ( ) { throw "invalid media-query  :(" ; } function throwBreakPointError ( ) { throw "invalid breakpoint :(" ; } /**
 * get breakpoint list of css-in-js-media
 */ function getBreakPoints ( ) { return breakpoints ; } function checkValidBreakpoint ( customizedBreakPoints ) { const keysOfOrigin = Object . keys ( breakpoints ) ; const keysOfCustomized = Object . keys ( customizedBreakPoints ) ; return keysOfCustomized . every ( ( key ) => keysOfOrigin . includes ( key ) ) ; } param customizedBreakPoints function setBreakPoints ( customizedBreakPoints ) { const isValidBreakPoints = checkValidBreakpoint ( customizedBreakPoints ) ; if ( ! isValidBreakPoints ) { return throwBreakPointError ( ) ; } breakpoints = { ... breakpoints , ... customizedBreakPoints } ; } param query param betweenQuery function cssinjsMedia ( query , betweenQuery ? ) { const queries = betweenQuery ? [ query , betweenQuery ] : [ query ] ; return queries . every ( checkValid ) ? `@media ${ queries . map ( convertToQuery ) . join ( " and " ) }` : throwError ( ) ; } function checkValid ( param ) { const [ sign , screenSize ] = parseParam ( param ) ; const checkResult = Boolean ( sign ) && Boolean ( breakpoints [ screenSize ] ) ; return checkResult ; } function parseParam ( param ) { const sign = param . match ( signRegex ) ? param . match ( signRegex ) [ 0 ] . trim ( ) : "" ; const screenSize = param . replace ( signRegex , "" ) . trim ( ) ; return [ sign , screenSize ] ; } function calculateSize ( sign , screenSize ) { if ( sign . includes ( "=" ) ) { return breakpoints [ screenSize ] ; } if ( sign . includes ( ">" ) ) { return breakpoints [ screenSize ] + 1 ; } return breakpoints [ screenSize ] - 1 ; } function convertToQuery ( param ) { const [ sign , screenSize ] = parseParam ( param ) ; const size = calculateSize ( sign , screenSize ) ; const unit = typeof size === "number" ? "px" : "" ; const widthCondition = sign . includes ( ">" ) ? "min-width" : "max-width" ; return `(${ widthCondition }: ${ size }${ unit })` ; } export default cssinjsMedia ; export { getBreakPoints , setBreakPoints } ;