Support styled-system object breakpoints

transformAliasProps.js

const breakpoints = {
  all: '_',
  bp320: '320px',
  bp480: '480px'
}

export const transformAliasProps = props => {
  let result = {};
  for (let prop in props) {
    if (typeof props[prop] === "object" && !Array.isArray(props[prop])) {
      let propOrQuery = prop;
      if (breakpoints[prop]) {
        propOrQuery = `@media screen and (min-width: ${breakpoints[prop]})`
      }
      result = { ...result, [propOrQuery]: transformAliasProps(props[prop]) };
    } else {
      result = { ...result, ...transformAlias(prop, props[prop]) };
    }
  }
  return result;
}