Thin wrapper "macro" for declarative breakpoint media queries in emotion styled components

emotion-media-query-macro.js

/**
 * Similar to Sass mixins
 * Goals are:
 * - intuitive, sensible naming convention for ranges
 * - declarative syntax
 * Two approaches explored...
 */
 

/* Breakpoints - if we want to keep these as separate variables (pros/cons) */
const phone =     '26.563em';
const tablet =    '48.000em';
const desktop =   '64em';
const breakpoints = {
  phone,
  tablet,
  desktop,
};

/**
 * individual 'mixin' per MQ approach
 * is arguably easier to reason about and nicer to read
 */
function forTabletUp(styles) {
  return `
    @media (min-width: ${breakpoints.tablet}) {
      ${styles}
    }
  `;
}

function forDesktopUp(styles) {
  return `
    @media (min-width: ${breakpoints.desktop}) {
      ${styles}
    }
  `;
}

/**
 * alternative
 * pro: a single wrapper
 * con: requires mental mapping of these 'range' variables
 */
function forSize(range, styles) {
  switch (range) {
    case 'tablet-up':
      return `
        @media (min-width: ${breakpoints.tablet}) {
          ${styles}
        }
      `;
    case 'desktop-up':
      return `
        @media (min-width: ${breakpoints.desktop}) {
          ${styles}
        }
      `;
    default:
      return '';
  }
}

/* usage of both approaches */
const StyledComponent = styled('div')`
  border: 1px solid red;

  ${forTabletUp(`
    background: yellow;
  `)}

  ${forDesktopUp(`
    background: green;
  `)}

  ${forSize('desktop-up', `
    border-bottom: 3px dotted purple;
  `)}
`;