diff --git a/defaultTheme.js b/defaultTheme.js index 7a5547230..b3d8d5fc7 100644 --- a/defaultTheme.js +++ b/defaultTheme.js @@ -314,5 +314,13 @@ module.exports = function() { stroke: { current: 'currentColor', }, + flexGrow: { + '0': 0, + default: 1, + }, + flexShrink: { + '0': 0, + default: 1, + }, } } diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index 7deecc049..b7bd9a7f8 100644 --- a/src/plugins/flexGrow.js +++ b/src/plugins/flexGrow.js @@ -1,14 +1,19 @@ -export default function({ variants }) { - return function({ addUtilities }) { +import _ from 'lodash' + +export default function({ values, variants }) { + return function({ addUtilities, e }) { addUtilities( - { - '.flex-grow-0': { - 'flex-grow': '0', - }, - '.flex-grow': { - 'flex-grow': '1', - }, - }, + _.fromPairs( + _.map(values, (value, modifier) => { + const className = modifier === 'default' ? 'flex-grow' : `flex-grow-${modifier}` + return [ + `.${e(className)}`, + { + 'flex-grow': value, + }, + ] + }) + ), variants ) } diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js index 9756405be..cbce7c127 100644 --- a/src/plugins/flexShrink.js +++ b/src/plugins/flexShrink.js @@ -1,14 +1,19 @@ -export default function({ variants }) { - return function({ addUtilities }) { +import _ from 'lodash' + +export default function({ values, variants }) { + return function({ addUtilities, e }) { addUtilities( - { - '.flex-shrink-0': { - 'flex-shrink': '0', - }, - '.flex-shrink': { - 'flex-shrink': '1', - }, - }, + _.fromPairs( + _.map(values, (value, modifier) => { + const className = modifier === 'default' ? 'flex-shrink' : `flex-shrink-${modifier}` + return [ + `.${e(className)}`, + { + 'flex-shrink': value, + }, + ] + }) + ), variants ) }