Discussion on: You Don't Need CSS-in-JS: Why I Use Stylesheets

/**
 * Media Query Utilities
 */
export const media = {
  mobile: (first, ...args) => css`
    @media (max-width: ${breakpoints.mobile}) {
      ${css(first, ...args)}
    }
  `,
  desktop: (first, ...args) => css`
    @media (min-width: ${breakpoints.desktop}) {
      ${css(first, ...args)}
    }
  `,
  /**
   * Return a style that only applies when the property matches the media query:
   *
   * `'mobile'` => apply style to mobile
   *
   * `'desktop'` => apply style to desktop
   *
   * `true` => apply the style for all sizes
   *
   * `false` => don't apply the style
   */
  switch: (switchProp?: BreakpointSwitchProp) => (first, ...args) => {
    if (switchProp === 'mobile') {
      return media.mobile(first, ...args)
    } else if (switchProp === 'desktop') {
      return media.desktop(first, ...args)
    } else if (switchProp === true) {
      return css(first, ...args)
    } else {
      return ''
    }
  },
  noMotion: (first, ...args) => css`
    @media (prefers-reduced-motion: reduce) {
      ${css(first, ...args)}
    }
  `
}