Add PostCSS spacing utilities

src/defaultConfig.js

@@ -294,6 +294,21 @@ export default {
       'screen': '100vh'
     }
   },
+  spacing: {
+    common: {
+      'px': '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+    },
+    padding: {},
+    margin: {},
+    pull: {},
+  },
   constrain: {
     'xs': '20rem',
     'sm': '30rem',

src/generators/spacing.js

@@ -0,0 +1,118 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function definePadding(padding) {
+  return _.flatMap(padding, (size, modifier) => {
+    return defineClasses({
+      [`pt-${modifier}`]: {
+        'padding-top': `${size}`,
+      },
+      [`pr-${modifier}`]: {
+        'padding-right': `${size}`,
+      },
+      [`pb-${modifier}`]: {
+        'padding-bottom': `${size}`,
+      },
+      [`pl-${modifier}`]: {
+        'padding-left': `${size}`,
+      },
+      [`px-${modifier}`]: {
+        'padding-left': `${size}`,
+        'padding-right': `${size}`,
+      },
+      [`py-${modifier}`]: {
+        'padding-top': `${size}`,
+        'padding-bottom': `${size}`,
+      },
+      [`p-${modifier}`]: {
+        'padding': `${size}`,
+      },
+    })
+  })
+}
+
+function defineMargin(margin) {
+  return _.flatMap(margin, (size, modifier) => {
+    return defineClasses({
+      [`mt-${modifier}`]: {
+        'margin-top': `${size}`,
+      },
+      [`mr-${modifier}`]: {
+        'margin-right': `${size}`,
+      },
+      [`mb-${modifier}`]: {
+        'margin-bottom': `${size}`,
+      },
+      [`ml-${modifier}`]: {
+        'margin-left': `${size}`,
+      },
+      [`mx-${modifier}`]: {
+        'margin-left': `${size}`,
+        'margin-right': `${size}`,
+      },
+      [`my-${modifier}`]: {
+        'margin-top': `${size}`,
+        'margin-bottom': `${size}`,
+      },
+      [`m-${modifier}`]: {
+        'margin': `${size}`,
+      },
+    })
+  })
+}
+
+function definePull(pull) {
+  return _.flatMap(pull, (size, modifier) => {
+    size = `${size}` === '0' ? `${size}` : `-${size}`
+
+    return defineClasses({
+      [`pull-t-${modifier}`]: {
+        'margin-top': `${size}`,
+      },
+      [`pull-r-${modifier}`]: {
+        'margin-right': `${size}`,
+      },
+      [`pull-b-${modifier}`]: {
+        'margin-bottom': `${size}`,
+      },
+      [`pull-l-${modifier}`]: {
+        'margin-left': `${size}`,
+      },
+      [`pull-x-${modifier}`]: {
+        'margin-left': `${size}`,
+        'margin-right': `${size}`,
+      },
+      [`pull-y-${modifier}`]: {
+        'margin-top': `${size}`,
+        'margin-bottom': `${size}`,
+      },
+      [`pull-${modifier}`]: {
+        'margin': `${size}`,
+      },
+    })
+  })
+}
+
+export default function ({ spacing }) {
+  const padding = _.merge({}, spacing.common, spacing.padding)
+  const margin = _.merge({}, spacing.common, spacing.margin)
+  const pull = _.merge({}, spacing.common, spacing.pull)
+
+  return _.flatten([
+    definePadding(padding),
+    defineMargin(margin),
+    defineClasses({
+      'mr-auto': {
+        'margin-right': 'auto',
+      },
+      'ml-auto': {
+        'margin-left': 'auto',
+      },
+      'mx-auto': {
+        'margin-left': 'auto',
+        'margin-right': 'auto',
+      },
+    }),
+    definePull(pull),
+  ])
+}

src/lib/generateUtilities.js

@@ -20,6 +20,7 @@ import display from '../generators/display'
 import position from '../generators/position'
 import overflow from '../generators/overflow'
 import sizing from '../generators/sizing'
+import spacing from '../generators/spacing'
 import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
@@ -49,6 +50,7 @@ export default function(options) {
           position(options),
           overflow(options),
           sizing(options),
+          spacing(options),
           constrain(options),
           shadows(options),
           flex(options),