Add PostCSS z-index utilities

src/_less/utilities/z-index.less

@@ -1,21 +0,0 @@
-@z-index-1:   10;
-@z-index-2:   20;
-@z-index-3:   30;
-@z-index-4:   40;
-@z-index-5:   50;
-@z-index-6:   60;
-@z-index-7:   70;
-@z-index-8:   80;
-@z-index-9:   90;
-@z-index-10: 100;
-
-.z10  { z-index: @z-index-1; }
-.z20  { z-index: @z-index-2; }
-.z30  { z-index: @z-index-3; }
-.z40  { z-index: @z-index-4; }
-.z50  { z-index: @z-index-5; }
-.z60  { z-index: @z-index-6; }
-.z70  { z-index: @z-index-7; }
-.z80  { z-index: @z-index-8; }
-.z90  { z-index: @z-index-9; }
-.z100 { z-index: @z-index-10; }

src/defaultConfig.js

@@ -329,4 +329,13 @@ export default {
     '4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
     '5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
   },
+  zIndex: {
+    '0': 0,
+    '10': 10,
+    '20': 20,
+    '30': 30,
+    '40': 40,
+    '50': 50,
+    'auto': 'auto',
+  }
 }

src/generators/zIndex.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function ({ zIndex }) {
+  return _.map(zIndex, (value, modifier) => {
+    return defineClass(`z-${modifier}`, {
+      'z-index': value,
+    })
+  })
+}

src/lib/generateUtilities.js

@@ -24,6 +24,7 @@ import spacing from '../generators/spacing'
 import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
+import zIndex from '../generators/zIndex'
 
 export default function(options) {
   return function(css) {
@@ -54,6 +55,7 @@ export default function(options) {
           constrain(options),
           shadows(options),
           flex(options),
+          zIndex(options),
         ])
         css.insertBefore(atRule, responsive(utilities))
         atRule.remove()