add margin and padding aliases

src/box.tsx

@@ -3,6 +3,7 @@ import facepaint from "facepaint";
 import cc from "classcat";
 import * as CSS from "csstype";
 import React, { ReactNode } from "react";
+import expandAliases from "./expandAliases";
 
 export interface BoxProps extends CSS.PropertiesFallback<number | string | number[] | string[] | null> {
   is?: any;
@@ -17,6 +18,8 @@ export interface BoxProps extends CSS.PropertiesFallback<number | string | numbe
 const Box = ({ is = "div", className, css, props, style, children, ...rest }: BoxProps) => {
   const mq = facepaint(["@media(min-width: 420px)", "@media(min-width: 920px)", "@media(min-width: 1120px)"]);
 
+  rest = expandAliases(rest);
+
   return (
     <ClassNames>
       {({ css: ecss }) =>

src/expandAliases.ts

@@ -0,0 +1,26 @@
+import { BoxProps } from "./box";
+
+export default function expandAliases(props: BoxProps): BoxProps {
+  if (props.marginX) {
+    props.marginLeft = props.marginX;
+    props.marginRight = props.marginX;
+    delete props.marginX;
+  }
+  if (props.marginY) {
+    props.marginTop = props.marginY;
+    props.marginBottom = props.marginY;
+    delete props.marginY;
+  }
+  if (props.paddingX) {
+    props.paddingLeft = props.paddingX;
+    props.paddingRight = props.paddingX;
+    delete props.paddingX;
+  }
+  if (props.paddingY) {
+    props.paddingTop = props.paddingY;
+    props.paddingBottom = props.paddingY;
+    delete props.paddingY;
+  }
+
+  return props;
+}

tools/story.tsx

@@ -157,6 +157,12 @@ storiesOf("Box", module)
       <Box innerRef={logRef}>innerRef</Box>
     </Box>
   ))
+  .add("aliases", () => (
+    <Box>
+      <Box width={200} height={200} background="red" marginY={64} paddingX={18} marginX={18} />
+      <Box width={200} height={200} background="blue" />
+    </Box>
+  ))
   .add("props pass through", () => (
     <Box>
       <Box is="input" type="file" />