import { StyleObject } from '@tamagui/helpers' ; import { mediaObjectToString } from '../hooks/useMedia' ; import { MediaQueries } from '../types' ; export const MEDIA_SEP = '_' ; export const createMediaStyle = ( { identifier , rules } , mediaKey , mediaQueries , negate ? , importance = 0 ) => { const mediaKeys = Object . keys ( mediaQueries ) ; const mediaKeyPrecendence = mediaKeys . reduce ( ( acc , cur , i ) => { acc [ cur ] = new Array ( importance + 1 ) . fill ( ':root' ) . join ( '' ) ; return acc ; } , { } ) ; const negKey = negate ? '0' : '' ; const ogPrefix = identifier . slice ( 0 , identifier . indexOf ( '-' ) + 1 ) ; const nextIdentifier = `${ identifier . replace ( ogPrefix , `${ ogPrefix }${ MEDIA_SEP }${ mediaKey }${ negKey }${ MEDIA_SEP }` ) }` ; const screenStr = negate ? 'not all' : 'screen' ; const mediaSelector = mediaObjectToString ( mediaQueries [ mediaKey ] ) ; const mediaQuery = `${ screenStr } and ${ mediaSelector }` ; const precendencePrefix = mediaKeyPrecendence [ mediaKey ] ; const styleInner = rules [ 0 ] . replace ( identifier , nextIdentifier ) ; let styleRule = '' ; if ( styleInner . includes ( '@media' ) ) { styleRule = styleInner . replace ( '{' , ` and ${ mediaQuery } {` ) ; } else { styleRule = `@media ${ mediaQuery } { ${ precendencePrefix } ${ styleInner } }` ; } return { styleRule , identifier : nextIdentifier , } ; } ;