[refs #52] Add order utility

defaultConfig.stub.js

@@ -28,6 +28,7 @@ module.exports = {
     flex: ['responsive'],
     flexGrow: ['responsive'],
     flexShrink: ['responsive'],
+    order: ['responsive'],
     float: ['responsive'],
     fontFamily: ['responsive'],
     fontWeight: ['responsive', 'hover', 'focus'],

defaultTheme.js

@@ -322,5 +322,10 @@ module.exports = function() {
       '0': 0,
       default: 1,
     },
+    order: {
+      first: -1,
+      last: 1,
+      none: 0,
+    },
   }
 }

src/corePlugins.js

@@ -22,6 +22,7 @@ import alignContent from './plugins/alignContent'
 import flex from './plugins/flex'
 import flexGrow from './plugins/flexGrow'
 import flexShrink from './plugins/flexShrink'
+import order from './plugins/order'
 import float from './plugins/float'
 import fontFamily from './plugins/fontFamily'
 import fontWeight from './plugins/fontWeight'
@@ -104,6 +105,7 @@ export default function(config) {
     flex,
     flexGrow,
     flexShrink,
+    order,
     float,
     fontFamily,
     fontWeight,

src/plugins/order.js

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+export default function({ values, variants }) {
+  return function({ addUtilities }) {
+    const utilities = _.fromPairs(
+      _.map(values, (value, modifier) => {
+        return [
+          `.order-${modifier}`,
+          {
+            'order': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants)
+  }
+}