Add order utility

Author: Florian Bouvot

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'

src/plugins/order.js

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