{"size": 1012, "ext": "js", "max_stars_repo_path": "src/styles/utils.js", "max_stars_repo_name": "daniellimhong/say-their-names-web", "max_stars_repo_stars_event_min_datetime": "2020-06-03T21:23:53.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-28T17:23:43.000Z", "max_issues_repo_path": "src/styles/utils.js", "max_issues_repo_name": "daniellimhong/say-their-names-web", "max_issues_repo_issues_event_min_datetime": "2020-06-03T12:49:20.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-10T20:37:17.000Z", "max_forks_repo_path": "src/styles/utils.js", "max_forks_repo_name": "daniellimhong/say-their-names-web", "max_forks_repo_forks_event_min_datetime": "2020-06-03T16:47:52.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-21T03:20:41.000Z"}
{"max_stars_count": 47, "max_issues_count": 78, "max_forks_count": 31, "avg_line_length": 26.6315789474, "max_line_length": 82, "alphanum_fraction": 0.6442687747}
import { css } from 'styled-components';
import Breakpoints from '../constants/Breakpoints';

/**
 * Media Query Helper
 * @description
 * A little CSS helper for writing media queries.
 * Uses a mobile-first approach (min-width).
 * @example
 * ```js
 * const StyledBox = styled.div`
 *  padding-top: 1rem; // Will apply to xs(0px) and up
 *
 *  ${MediaQuery.md`
 *    padding-top: 2rem; // Will apply to md(960px) devices and up
 *  `}
 *
 *  ${MediaQuery.lg`
 *    padding-top: 3rem; // Will apply to lg(1280px) devices and up
 *  `}
 * `;
 * ```
 */
const MediaQuery = Object.keys(Breakpoints).reduce((accumulator, size) => {
  // use em in breakpoints to work properly cross-browser and support users
  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
  const emSize = Breakpoints[size] / 16;

  accumulator[size] = (...args) => css`
    @media screen and (min-width: ${emSize}em) {
      ${css(...args)};
    }
  `;
  return accumulator;
}, {});

export default MediaQuery;
