Make flex-* utilities customizable

defaultTheme.js

@@ -318,6 +318,12 @@ module.exports = function() {
     stroke: {
       current: 'currentColor',
     },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
     flexGrow: {
       '0': 0,
       default: 1,

src/plugins/flex.js

@@ -1,21 +1,18 @@
+import _ from 'lodash'
+
 export default function() {
-  return function({ addUtilities, config }) {
-    addUtilities(
-      {
-        '.flex-1': {
-          flex: '1 1 0%',
-        },
-        '.flex-auto': {
-          flex: '1 1 auto',
-        },
-        '.flex-initial': {
-          flex: '0 1 auto',
-        },
-        '.flex-none': {
-          flex: 'none',
-        },
-      },
-      config('variants.flex')
+  return function({ addUtilities, e, config }) {
+    const utilities = _.fromPairs(
+      _.map(config('theme.flex'), (value, modifier) => {
+        return [
+          `.${e(`flex-${modifier}`)}`,
+          {
+            flex: value,
+          },
+        ]
+      })
     )
+
+    addUtilities(utilities, config('variants.flex'))
   }
 }