Generate responsive/hover variants based on config instead of hard-coded

Author: adamwathan

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'],
+    }
   },
 
 }

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),
           ]),
         })
 

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]))
 }