function position(firstValue) {
    for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      values[_key - 1] = arguments[_key];
    }
    if (positionMap.indexOf(firstValue) >= 0 && firstValue) {
      return _extends__default["default"]({}, directionalProperty.apply(void 0, [''].concat(values)), {
        position: firstValue
      });
    } else {
      return directionalProperty.apply(void 0, ['', firstValue].concat(values));
    }
  }
Shorthand accepts up to five values, including null to skip a value, and maps them to their respective directions. The first value can optionally be a position keyword.
@example
// Styles as object usage
const styles = {
  ...position('12px', '24px', '36px', '48px')
}

// styled-components usage
const div = styled.div`
  ${position('12px', '24px', '36px', '48px')}
`

// CSS as JS Output

div {
  'top': '12px',
  'right': '24px',
  'bottom': '36px',
  'left': '48px'
}

// Styles as object usage
const styles = {
  ...position('absolute', '12px', '24px', '36px', '48px')
}

// styled-components usage
const div = styled.div`
  ${position('absolute', '12px', '24px', '36px', '48px')}
`

// CSS as JS Output

div {
  'position': 'absolute',
  'top': '12px',
  'right': '24px',
  'bottom': '36px',
  'left': '48px'
}