responsive "mixins" breakpoints for style components

responsive.js

import { css } from 'styled-components';

const breakpoints = {
  smallScreen: 1200,
  tablet: 768,
  mobile: 520,
  smallMobile: 375
};

export const respondTo = Object.keys(breakpoints).reduce((accumulator, label) => {
  accumulator[label] = (...args) => css`
    @media (max-width: ${breakpoints[label] + 'px'}) {
      ${css(...args)};
    }
  `;
  
  return accumulator;
}, {});

SomeComponent.jsx

import { COLORS, respondTo } from 'styles';

const SideBarOffset = styled.div`
  background-color: ${COLORS.MAIN};;
  height: 100%;
  width: ${(props) => props.offset + 'px'};
  flex-basis: auto;

  ${respondTo.tablet`
    width: 0px;
  `}
`;