diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 3731eb808..691745127 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -770,6 +770,49 @@ module.exports = { options: { prefix: '', important: false, + modules: { + appearance: ['responsive'], + backgroundColors: ['responsive', 'hover'], + backgroundPosition: ['responsive'], + backgroundSize: ['responsive'], + borderColors: ['responsive', 'hover'], + borderRadius: ['responsive'], + borderStyle: ['responsive'], + borderWidths: ['responsive'], + cursor: ['responsive'], + display: ['responsive'], + flexbox: ['responsive'], + float: ['responsive'], + fonts: ['responsive'], + fontWeights: ['responsive', 'hover'], + height: ['responsive'], + leading: ['responsive'], + lists: ['responsive'], + margin: ['responsive'], + maxHeight: ['responsive'], + maxWidth: ['responsive'], + minHeight: ['responsive'], + minWidth: ['responsive'], + negativeMargin: ['responsive'], + opacity: ['responsive'], + overflow: ['responsive'], + padding: ['responsive'], + pointerEvents: ['responsive'], + position: ['responsive'], + resize: ['responsive'], + shadows: ['responsive'], + textAlign: ['responsive'], + textColors: ['responsive', 'hover'], + textSizes: ['responsive'], + textStyle: ['responsive', 'hover'], + tracking: ['responsive'], + userSelect: ['responsive'], + verticalAlign: ['responsive'], + visibility: ['responsive'], + whitespace: ['responsive'], + width: ['responsive'], + zIndex: ['responsive'], + } }, } diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index bf78d7a9b..766a50393 100644 --- a/src/lib/generateUtilities.js +++ b/src/lib/generateUtilities.js @@ -47,6 +47,15 @@ import whitespace from '../generators/whitespace' import width from '../generators/width' import zIndex from '../generators/zIndex' +function withVariants(module, variants) { + return _.reduce(variants, (module, variant) => { + return { + responsive: responsive, + hover: hoverable, + }[variant](module) + }, module) +} + export default function(config) { return function(css) { const unwrappedConfig = config() @@ -57,47 +66,47 @@ export default function(config) { nodes: _.flatten([ // The `lists` module needs to be first to allow overriding the margin and // padding values that it sets with other utilities. - responsive(lists(unwrappedConfig)), - responsive(appearance(unwrappedConfig)), - responsive(hoverable(backgroundColors(unwrappedConfig))), - responsive(backgroundPosition(unwrappedConfig)), - responsive(backgroundSize(unwrappedConfig)), - responsive(hoverable(borderColors(unwrappedConfig))), - responsive(borderRadius(unwrappedConfig)), - responsive(borderStyle(unwrappedConfig)), - responsive(borderWidths(unwrappedConfig)), - responsive(cursor(unwrappedConfig)), - responsive(display(unwrappedConfig)), - responsive(flexbox(unwrappedConfig)), - responsive(float(unwrappedConfig)), - responsive(fonts(unwrappedConfig)), - responsive(hoverable(fontWeights(unwrappedConfig))), - responsive(height(unwrappedConfig)), - responsive(leading(unwrappedConfig)), - responsive(margin(unwrappedConfig)), - responsive(maxHeight(unwrappedConfig)), - responsive(maxWidth(unwrappedConfig)), - responsive(minHeight(unwrappedConfig)), - responsive(minWidth(unwrappedConfig)), - responsive(negativeMargin(unwrappedConfig)), - responsive(opacity(unwrappedConfig)), - responsive(overflow(unwrappedConfig)), - responsive(padding(unwrappedConfig)), - responsive(pointerEvents(unwrappedConfig)), - responsive(position(unwrappedConfig)), - responsive(resize(unwrappedConfig)), - responsive(shadows(unwrappedConfig)), - responsive(textAlign(unwrappedConfig)), - responsive(hoverable(textColors(unwrappedConfig))), - responsive(textSizes(unwrappedConfig)), - responsive(hoverable(textStyle(unwrappedConfig))), - responsive(tracking(unwrappedConfig)), - responsive(userSelect(unwrappedConfig)), - responsive(verticalAlign(unwrappedConfig)), - responsive(visibility(unwrappedConfig)), - responsive(whitespace(unwrappedConfig)), - responsive(width(unwrappedConfig)), - responsive(zIndex(unwrappedConfig)), + withVariants(lists(unwrappedConfig), unwrappedConfig.options.modules.lists), + withVariants(appearance(unwrappedConfig), unwrappedConfig.options.modules.appearance), + withVariants(backgroundColors(unwrappedConfig), unwrappedConfig.options.modules.backgroundColors), + withVariants(backgroundPosition(unwrappedConfig), unwrappedConfig.options.modules.backgroundPosition), + withVariants(backgroundSize(unwrappedConfig), unwrappedConfig.options.modules.backgroundSize), + withVariants(borderColors(unwrappedConfig), unwrappedConfig.options.modules.borderColors), + withVariants(borderRadius(unwrappedConfig), unwrappedConfig.options.modules.borderRadius), + withVariants(borderStyle(unwrappedConfig), unwrappedConfig.options.modules.borderStyle), + withVariants(borderWidths(unwrappedConfig), unwrappedConfig.options.modules.borderWidths), + withVariants(cursor(unwrappedConfig), unwrappedConfig.options.modules.cursor), + withVariants(display(unwrappedConfig), unwrappedConfig.options.modules.display), + withVariants(flexbox(unwrappedConfig), unwrappedConfig.options.modules.flexbox), + withVariants(float(unwrappedConfig), unwrappedConfig.options.modules.float), + withVariants(fonts(unwrappedConfig), unwrappedConfig.options.modules.fonts), + withVariants(fontWeights(unwrappedConfig), unwrappedConfig.options.modules.fontWeights), + withVariants(height(unwrappedConfig), unwrappedConfig.options.modules.height), + withVariants(leading(unwrappedConfig), unwrappedConfig.options.modules.leading), + withVariants(margin(unwrappedConfig), unwrappedConfig.options.modules.margin), + withVariants(maxHeight(unwrappedConfig), unwrappedConfig.options.modules.maxHeight), + withVariants(maxWidth(unwrappedConfig), unwrappedConfig.options.modules.maxWidth), + withVariants(minHeight(unwrappedConfig), unwrappedConfig.options.modules.minHeight), + withVariants(minWidth(unwrappedConfig), unwrappedConfig.options.modules.minWidth), + withVariants(negativeMargin(unwrappedConfig), unwrappedConfig.options.modules.negativeMargin), + withVariants(opacity(unwrappedConfig), unwrappedConfig.options.modules.opacity), + withVariants(overflow(unwrappedConfig), unwrappedConfig.options.modules.overflow), + withVariants(padding(unwrappedConfig), unwrappedConfig.options.modules.padding), + withVariants(pointerEvents(unwrappedConfig), unwrappedConfig.options.modules.pointerEvents), + withVariants(position(unwrappedConfig), unwrappedConfig.options.modules.position), + withVariants(resize(unwrappedConfig), unwrappedConfig.options.modules.resize), + withVariants(shadows(unwrappedConfig), unwrappedConfig.options.modules.shadows), + withVariants(textAlign(unwrappedConfig), unwrappedConfig.options.modules.textAlign), + withVariants(textColors(unwrappedConfig), unwrappedConfig.options.modules.textColors), + withVariants(textSizes(unwrappedConfig), unwrappedConfig.options.modules.textSizes), + withVariants(textStyle(unwrappedConfig), unwrappedConfig.options.modules.textStyle), + withVariants(tracking(unwrappedConfig), unwrappedConfig.options.modules.tracking), + withVariants(userSelect(unwrappedConfig), unwrappedConfig.options.modules.userSelect), + withVariants(verticalAlign(unwrappedConfig), unwrappedConfig.options.modules.verticalAlign), + withVariants(visibility(unwrappedConfig), unwrappedConfig.options.modules.visibility), + withVariants(whitespace(unwrappedConfig), unwrappedConfig.options.modules.whitespace), + withVariants(width(unwrappedConfig), unwrappedConfig.options.modules.width), + withVariants(zIndex(unwrappedConfig), unwrappedConfig.options.modules.zIndex), ]), }) diff --git a/src/util/hoverable.js b/src/util/hoverable.js index ad76b8a35..ffda63d01 100644 --- a/src/util/hoverable.js +++ b/src/util/hoverable.js @@ -1,3 +1,4 @@ +import _ from 'lodash' import postcss from 'postcss' import cloneNodes from './cloneNodes' @@ -6,5 +7,5 @@ export default function hoverable(rules) { .atRule({ name: 'hoverable', }) - .append(cloneNodes(rules)) + .append(cloneNodes(_.isArray(rules) ? rules : [rules])) }