diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index 766a50393..945fe2596 100644 --- a/src/lib/generateUtilities.js +++ b/src/lib/generateUtilities.js @@ -4,6 +4,8 @@ import applyClassPrefix from '../util/applyClassPrefix' import responsive from '../util/responsive' import hoverable from '../util/hoverable' +import container from '../generators/container' + import lists from '../generators/lists' import appearance from '../generators/appearance' import backgroundColors from '../generators/backgroundColors' @@ -13,7 +15,6 @@ import borderColors from '../generators/borderColors' import borderRadius from '../generators/borderRadius' import borderStyle from '../generators/borderStyle' import borderWidths from '../generators/borderWidths' -import container from '../generators/container' import cursor from '../generators/cursor' import display from '../generators/display' import flexbox from '../generators/flexbox' @@ -47,13 +48,63 @@ import whitespace from '../generators/whitespace' import width from '../generators/width' import zIndex from '../generators/zIndex' +function modules() { + return [ + { name: 'lists', generator: lists }, + { name: 'appearance', generator: appearance }, + { name: 'backgroundColors', generator: backgroundColors }, + { name: 'backgroundPosition', generator: backgroundPosition }, + { name: 'backgroundSize', generator: backgroundSize }, + { name: 'borderColors', generator: borderColors }, + { name: 'borderRadius', generator: borderRadius }, + { name: 'borderStyle', generator: borderStyle }, + { name: 'borderWidths', generator: borderWidths }, + { name: 'cursor', generator: cursor }, + { name: 'display', generator: display }, + { name: 'flexbox', generator: flexbox }, + { name: 'float', generator: float }, + { name: 'fonts', generator: fonts }, + { name: 'fontWeights', generator: fontWeights }, + { name: 'height', generator: height }, + { name: 'leading', generator: leading }, + { name: 'margin', generator: margin }, + { name: 'maxHeight', generator: maxHeight }, + { name: 'maxWidth', generator: maxWidth }, + { name: 'minHeight', generator: minHeight }, + { name: 'minWidth', generator: minWidth }, + { name: 'negativeMargin', generator: negativeMargin }, + { name: 'opacity', generator: opacity }, + { name: 'overflow', generator: overflow }, + { name: 'padding', generator: padding }, + { name: 'pointerEvents', generator: pointerEvents }, + { name: 'position', generator: position }, + { name: 'resize', generator: resize }, + { name: 'shadows', generator: shadows }, + { name: 'textAlign', generator: textAlign }, + { name: 'textColors', generator: textColors }, + { name: 'textSizes', generator: textSizes }, + { name: 'textStyle', generator: textStyle }, + { name: 'tracking', generator: tracking }, + { name: 'userSelect', generator: userSelect }, + { name: 'verticalAlign', generator: verticalAlign }, + { name: 'visibility', generator: visibility }, + { name: 'whitespace', generator: whitespace }, + { name: 'width', generator: width }, + { name: 'zIndex', generator: zIndex }, + ] +} + function withVariants(module, variants) { - return _.reduce(variants, (module, variant) => { - return { - responsive: responsive, - hover: hoverable, - }[variant](module) - }, module) + return _.reduce( + variants, + (result, variant) => { + return { + responsive, + hover: hoverable, + }[variant](result) + }, + module + ) } export default function(config) { @@ -63,51 +114,12 @@ export default function(config) { css.walkAtRules('tailwind', atRule => { if (atRule.params === 'utilities') { const utilities = postcss.root({ - nodes: _.flatten([ - // The `lists` module needs to be first to allow overriding the margin and - // padding values that it sets with other utilities. - 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), - ]), + nodes: _.flatMap(modules(), module => + withVariants( + module.generator(unwrappedConfig), + unwrappedConfig.options.modules[module.name] + ) + ), }) if (_.get(unwrappedConfig, 'options.important', false)) {