Apply responsive and hover at the per-module level, in the main generator

Author: adamwathan

src/generators/backgroundColors.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ backgroundColors }) {
-  return hoverable(
-    _.map(backgroundColors, (color, className) => {
-      return defineClass(`bg-${className}`, {
-        'background-color': color,
-      })
+  return _.map(backgroundColors, (color, className) => {
+    return defineClass(`bg-${className}`, {
+      'background-color': color,
     })
-  )
+  })
 }

src/generators/borderColors.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ borderColors }) {
-  return hoverable(
-    _.map(_.omit(borderColors, 'default'), (color, className) => {
-      return defineClass(`border-${className}`, {
-        'border-color': color,
-      })
+  return _.map(_.omit(borderColors, 'default'), (color, className) => {
+    return defineClass(`border-${className}`, {
+      'border-color': color,
     })
-  )
+  })
 }

src/generators/fontWeights.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ fontWeights }) {
-  return hoverable(
-    _.map(fontWeights, (weight, modifier) => {
-      return defineClass(`font-${modifier}`, {
-        'font-weight': `${weight}`,
-      })
+  return _.map(fontWeights, (weight, modifier) => {
+    return defineClass(`font-${modifier}`, {
+      'font-weight': `${weight}`,
     })
-  )
+  })
 }

src/generators/textColors.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ textColors }) {
-  return hoverable(
-    _.map(textColors, (color, modifier) => {
-      return defineClass(`text-${modifier}`, {
-        color,
-      })
+  return _.map(textColors, (color, modifier) => {
+    return defineClass(`text-${modifier}`, {
+      color,
     })
-  )
+  })
 }

src/generators/textStyle.js

@@ -1,29 +1,26 @@
 import defineClasses from '../util/defineClasses'
-import hoverable from '../util/hoverable'
 
 export default function() {
-  return hoverable(
-    defineClasses({
-      italic: { 'font-style': 'italic' },
-      roman: { 'font-style': 'normal' },
+  return defineClasses({
+    italic: { 'font-style': 'italic' },
+    roman: { 'font-style': 'normal' },
 
-      uppercase: { 'text-transform': 'uppercase' },
-      lowercase: { 'text-transform': 'lowercase' },
-      capitalize: { 'text-transform': 'capitalize' },
-      'normal-case': { 'text-transform': 'none' },
+    uppercase: { 'text-transform': 'uppercase' },
+    lowercase: { 'text-transform': 'lowercase' },
+    capitalize: { 'text-transform': 'capitalize' },
+    'normal-case': { 'text-transform': 'none' },
 
-      underline: { 'text-decoration': 'underline' },
-      'line-through': { 'text-decoration': 'line-through' },
-      'no-underline': { 'text-decoration': 'none' },
+    underline: { 'text-decoration': 'underline' },
+    'line-through': { 'text-decoration': 'line-through' },
+    'no-underline': { 'text-decoration': 'none' },
 
-      antialiased: {
-        '-webkit-font-smoothing': 'antialiased',
-        '-moz-osx-font-smoothing': 'grayscale',
-      },
-      'subpixel-antialiased': {
-        '-webkit-font-smoothing': 'auto',
-        '-moz-osx-font-smoothing': 'auto',
-      },
-    })
-  )
+    antialiased: {
+      '-webkit-font-smoothing': 'antialiased',
+      '-moz-osx-font-smoothing': 'grayscale',
+    },
+    'subpixel-antialiased': {
+      '-webkit-font-smoothing': 'auto',
+      '-moz-osx-font-smoothing': 'auto',
+    },
+  })
 }

src/lib/generateUtilities.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import applyClassPrefix from '../util/applyClassPrefix'
 import responsive from '../util/responsive'
+import hoverable from '../util/hoverable'
 
 import lists from '../generators/lists'
 import appearance from '../generators/appearance'
@@ -56,47 +57,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.
-            lists(unwrappedConfig),
-            appearance(unwrappedConfig),
-            backgroundColors(unwrappedConfig),
-            backgroundPosition(unwrappedConfig),
-            backgroundSize(unwrappedConfig),
-            borderColors(unwrappedConfig),
-            borderRadius(unwrappedConfig),
-            borderStyle(unwrappedConfig),
-            borderWidths(unwrappedConfig),
-            cursor(unwrappedConfig),
-            display(unwrappedConfig),
-            flexbox(unwrappedConfig),
-            float(unwrappedConfig),
-            fonts(unwrappedConfig),
-            fontWeights(unwrappedConfig),
-            height(unwrappedConfig),
-            leading(unwrappedConfig),
-            margin(unwrappedConfig),
-            maxHeight(unwrappedConfig),
-            maxWidth(unwrappedConfig),
-            minHeight(unwrappedConfig),
-            minWidth(unwrappedConfig),
-            negativeMargin(unwrappedConfig),
-            opacity(unwrappedConfig),
-            overflow(unwrappedConfig),
-            padding(unwrappedConfig),
-            pointerEvents(unwrappedConfig),
-            position(unwrappedConfig),
-            resize(unwrappedConfig),
-            shadows(unwrappedConfig),
-            textAlign(unwrappedConfig),
-            textColors(unwrappedConfig),
-            textSizes(unwrappedConfig),
-            textStyle(unwrappedConfig),
-            tracking(unwrappedConfig),
-            userSelect(unwrappedConfig),
-            verticalAlign(unwrappedConfig),
-            visibility(unwrappedConfig),
-            whitespace(unwrappedConfig),
-            width(unwrappedConfig),
-            zIndex(unwrappedConfig),
+            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)),
           ]),
         })
 
@@ -105,7 +106,7 @@ export default function(config) {
         }
 
         const tailwindClasses = postcss.root({
-          nodes: [...container(unwrappedConfig), responsive(utilities)],
+          nodes: [...container(unwrappedConfig), ...utilities.nodes],
         })
 
         applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))

src/util/responsive.js

@@ -7,5 +7,5 @@ export default function responsive(rules) {
     .atRule({
       name: 'responsive',
     })
-    .append(cloneNodes(_.isArray(rules) ? rules : rules.nodes))
+    .append(cloneNodes(_.isArray(rules) ? rules : [rules]))
 }