Split flex into separate plugin

defaultConfig.stub.js

@@ -25,6 +25,7 @@ module.exports = {
     alignSelf: ['responsive'],
     justifyContent: ['responsive'],
     alignContent: ['responsive'],
+    flex: ['responsive'],
     flexbox: ['responsive'],
     float: ['responsive'],
     fontFamily: ['responsive'],

src/corePlugins.js

@@ -19,6 +19,7 @@ import alignItems from './plugins/alignItems'
 import alignSelf from './plugins/alignSelf'
 import justifyContent from './plugins/justifyContent'
 import alignContent from './plugins/alignContent'
+import flex from './plugins/flex'
 import flexbox from './plugins/flexbox'
 import float from './plugins/float'
 import fontFamily from './plugins/fontFamily'
@@ -99,6 +100,7 @@ export default function(config) {
     alignSelf,
     justifyContent,
     alignContent,
+    flex,
     flexbox,
     float,
     fontFamily,

src/plugins/flex.js

@@ -0,0 +1,21 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.flex-1': {
+          flex: '1 1 0%',
+        },
+        '.flex-auto': {
+          flex: '1 1 auto',
+        },
+        '.flex-initial': {
+          flex: '0 1 auto',
+        },
+        '.flex-none': {
+          flex: 'none',
+        },
+      },
+      variants
+    )
+  }
+}

src/plugins/flexbox.js

@@ -2,18 +2,6 @@ export default function({ variants }) {
   return function({ addUtilities }) {
     addUtilities(
       {
-        '.flex-1': {
-          flex: '1 1 0%',
-        },
-        '.flex-auto': {
-          flex: '1 1 auto',
-        },
-        '.flex-initial': {
-          flex: '0 1 auto',
-        },
-        '.flex-none': {
-          flex: 'none',
-        },
         '.flex-grow': {
           'flex-grow': '1',
         },