Add PostCSS sizing utilities

src/defaultConfig.js

@@ -256,6 +256,44 @@ export default {
       'pink-lightest',
     ]
   },
+  sizing: {
+    common: {
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '64': '16rem',
+      '96': '24rem',
+      '128': '32rem',
+      'full': '100%',
+    },
+    width: {
+      '1\\/2': '50%',
+      '1\\/3': 'calc(100% / 3)',
+      '2\\/3': 'calc(100% / 3 * 2)',
+      '1\\/4': '25%',
+      '3\\/4': '75%',
+      '1\\/5': '20%',
+      '2\\/5': '40%',
+      '3\\/5': '60%',
+      '4\\/5': '80%',
+      '1\\/6': 'calc(100% / 6)',
+      '5\\/6': 'calc(100% / 6 * 5)',
+      'screen': '100vw'
+    },
+    height: {
+      'screen': '100vh'
+    }
+  },
   constrain: {
     'xs': '20rem',
     'sm': '30rem',

src/generators/sizing.js

@@ -0,0 +1,27 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`w-${modifer}`, {
+      'width': `${size}`,
+    })
+  })
+}
+
+function defineHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`h-${modifer}`, {
+      'height': `${size}`,
+    })
+  })
+}
+
+export default function ({ sizing }) {
+  const widths = _.merge({}, sizing.common, sizing.width)
+  const heights = _.merge({}, sizing.common, sizing.height)
+  return _.flatten([
+    defineWidths(widths),
+    defineHeights(heights),
+  ])
+}

src/lib/generateUtilities.js

@@ -19,6 +19,7 @@ import rounded from '../generators/rounded'
 import display from '../generators/display'
 import position from '../generators/position'
 import overflow from '../generators/overflow'
+import sizing from '../generators/sizing'
 import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
@@ -47,6 +48,7 @@ export default function(options) {
           display(options),
           position(options),
           overflow(options),
+          sizing(options),
           constrain(options),
           shadows(options),
           flex(options),