1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import isObject from './isObject'

export type MinMaxScreen = {
  min?: string
  max?: string
}

export type RawScreen = {
  raw: string
}

export type Screen = string | RawScreen | MinMaxScreen | MinMaxScreen[]

function isRawScreen(screen: unknown): screen is RawScreen {
  return isObject(screen) && (screen as RawScreen).raw !== undefined
}

export function stringifyScreen(screen: Screen): string | undefined {
  if (!screen) return undefined
  if (typeof screen === 'string') return `@media (min-width: ${screen})`
  if (isRawScreen(screen)) {
    return `@media ${(screen as RawScreen).raw}`
  }
  let str = (Array.isArray(screen) ? screen : [screen])
    .map((range) => {
      return [
        typeof range.min === 'string' ? `(min-width: ${range.min})` : null,
        typeof range.max === 'string' ? `(max-width: ${range.max})` : null,
      ]
        .filter(Boolean)
        .join(' and ')
    })
    .join(', ')
  return str ? `@media ${str}` : undefined
}