Rename generators to match planned module names

src/generators/height.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`h-${modifer}`, {
+      height: `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineHeights(config.height)])
+}

src/generators/margin.js

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function defineMargin(margin) {
+  const generators = [
+    (size, modifier) =>
+      defineClasses({
+        [`m-${modifier}`]: { margin: `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
+        [`mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`mt-${modifier}`]: { 'margin-top': `${size}` },
+        [`mr-${modifier}`]: { 'margin-right': `${size}` },
+        [`mb-${modifier}`]: { 'margin-bottom': `${size}` },
+        [`ml-${modifier}`]: { 'margin-left': `${size}` },
+      }),
+  ]
+
+  return _.flatMap(generators, generator => {
+    return _.flatMap(margin, generator)
+  })
+}
+
+export default function({ margin }) {
+  return _.flatten([defineMargin(margin)])
+}

src/generators/maxHeight.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMaxHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`max-h-${modifer}`, {
+      'max-height': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMaxHeights(config.maxHeight)])
+}

src/generators/maxWidth.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMaxWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`max-w-${modifer}`, {
+      'max-width': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMaxWidths(config.maxWidth)])
+}

src/generators/minHeight.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMinHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`min-h-${modifer}`, {
+      'min-height': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMinHeights(config.minHeight)])
+}

src/generators/minWidth.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMinWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`min-w-${modifer}`, {
+      'min-width': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMinWidths(config.minWidth)])
+}

src/generators/negativeMargin.js

@@ -0,0 +1,33 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function defineNegativeMargin(negativeMargin) {
+  const generators = [
+    (size, modifier) =>
+      defineClasses({
+        [`-m-${modifier}`]: { margin: `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`-my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
+        [`-mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`-mt-${modifier}`]: { 'margin-top': `${size}` },
+        [`-mr-${modifier}`]: { 'margin-right': `${size}` },
+        [`-mb-${modifier}`]: { 'margin-bottom': `${size}` },
+        [`-ml-${modifier}`]: { 'margin-left': `${size}` },
+      }),
+  ]
+
+  return _.flatMap(generators, generator => {
+    return _.flatMap(negativeMargin, (size, modifier) => {
+      return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
+    })
+  })
+}
+
+export default function({ negativeMargin }) {
+  return _.flatten([defineNegativeMargin(negativeMargin)])
+}

src/generators/padding.js

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function definePadding(padding) {
+  const generators = [
+    (size, modifier) =>
+      defineClasses({
+        [`p-${modifier}`]: { padding: `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`py-${modifier}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
+        [`px-${modifier}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`pt-${modifier}`]: { 'padding-top': `${size}` },
+        [`pr-${modifier}`]: { 'padding-right': `${size}` },
+        [`pb-${modifier}`]: { 'padding-bottom': `${size}` },
+        [`pl-${modifier}`]: { 'padding-left': `${size}` },
+      }),
+  ]
+
+  return _.flatMap(generators, generator => {
+    return _.flatMap(padding, generator)
+  })
+}
+
+export default function({ padding }) {
+  return _.flatten([definePadding(padding)])
+}

src/generators/sizing.js

@@ -1,61 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-function defineWidths(widths) {
-  return _.map(widths, (size, modifer) => {
-    return defineClass(`w-${modifer}`, {
-      width: `${size}`,
-    })
-  })
-}
-
-function defineMinWidths(widths) {
-  return _.map(widths, (size, modifer) => {
-    return defineClass(`min-w-${modifer}`, {
-      'min-width': `${size}`,
-    })
-  })
-}
-
-function defineMaxWidths(widths) {
-  return _.map(widths, (size, modifer) => {
-    return defineClass(`max-w-${modifer}`, {
-      'max-width': `${size}`,
-    })
-  })
-}
-
-function defineHeights(heights) {
-  return _.map(heights, (size, modifer) => {
-    return defineClass(`h-${modifer}`, {
-      height: `${size}`,
-    })
-  })
-}
-
-function defineMinHeights(heights) {
-  return _.map(heights, (size, modifer) => {
-    return defineClass(`min-h-${modifer}`, {
-      'min-height': `${size}`,
-    })
-  })
-}
-
-function defineMaxHeights(heights) {
-  return _.map(heights, (size, modifer) => {
-    return defineClass(`max-h-${modifer}`, {
-      'max-height': `${size}`,
-    })
-  })
-}
-
-export default function(config) {
-  return _.flatten([
-    defineWidths(config.width),
-    defineMinWidths(config.minWidth),
-    defineMaxWidths(config.maxWidth),
-    defineHeights(config.height),
-    defineMinHeights(config.minHeight),
-    defineMaxHeights(config.maxHeight),
-  ])
-}

src/generators/spacing.js

@@ -1,87 +0,0 @@
-import _ from 'lodash'
-import defineClasses from '../util/defineClasses'
-
-function definePadding(padding) {
-  const generators = [
-    (size, modifier) =>
-      defineClasses({
-        [`p-${modifier}`]: { padding: `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`py-${modifier}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
-        [`px-${modifier}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`pt-${modifier}`]: { 'padding-top': `${size}` },
-        [`pr-${modifier}`]: { 'padding-right': `${size}` },
-        [`pb-${modifier}`]: { 'padding-bottom': `${size}` },
-        [`pl-${modifier}`]: { 'padding-left': `${size}` },
-      }),
-  ]
-
-  return _.flatMap(generators, generator => {
-    return _.flatMap(padding, generator)
-  })
-}
-
-function defineMargin(margin) {
-  const generators = [
-    (size, modifier) =>
-      defineClasses({
-        [`m-${modifier}`]: { margin: `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
-        [`mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`mt-${modifier}`]: { 'margin-top': `${size}` },
-        [`mr-${modifier}`]: { 'margin-right': `${size}` },
-        [`mb-${modifier}`]: { 'margin-bottom': `${size}` },
-        [`ml-${modifier}`]: { 'margin-left': `${size}` },
-      }),
-  ]
-
-  return _.flatMap(generators, generator => {
-    return _.flatMap(margin, generator)
-  })
-}
-
-function defineNegativeMargin(negativeMargin) {
-  const generators = [
-    (size, modifier) =>
-      defineClasses({
-        [`-m-${modifier}`]: { margin: `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`-my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
-        [`-mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`-mt-${modifier}`]: { 'margin-top': `${size}` },
-        [`-mr-${modifier}`]: { 'margin-right': `${size}` },
-        [`-mb-${modifier}`]: { 'margin-bottom': `${size}` },
-        [`-ml-${modifier}`]: { 'margin-left': `${size}` },
-      }),
-  ]
-
-  return _.flatMap(generators, generator => {
-    return _.flatMap(negativeMargin, (size, modifier) => {
-      return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
-    })
-  })
-}
-
-export default function({ padding, margin, negativeMargin }) {
-  return _.flatten([
-    definePadding(padding),
-    defineMargin(margin),
-    defineNegativeMargin(negativeMargin),
-  ])
-}

src/generators/width.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`w-${modifer}`, {
+      width: `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineWidths(config.width)])
+}

src/lib/generateUtilities.js

@@ -1,41 +1,49 @@
 import _ from 'lodash'
 import postcss from 'postcss'
 import applyClassPrefix from '../util/applyClassPrefix'
+import responsive from '../util/responsive'
+
+import lists from '../generators/lists'
+import appearance from '../generators/appearance'
 import backgroundColors from '../generators/backgroundColors'
-import backgroundPositions from '../generators/backgroundPositions'
+import backgroundPosition from '../generators/backgroundPosition'
 import backgroundSize from '../generators/backgroundSize'
 import borderColors from '../generators/borderColors'
-import borderStyles from '../generators/borderStyles'
+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 flex from '../generators/flex'
-import floats from '../generators/floats'
-import forms from '../generators/forms'
-import lists from '../generators/lists'
+import flexbox from '../generators/flexbox'
+import float from '../generators/float'
+import fonts from '../generators/fonts'
+import fontWeights from '../generators/fontWeights'
+import height from '../generators/height'
+import leading from '../generators/leading'
+import margin from '../generators/margin'
+import maxHeight from '../generators/maxHeight'
+import maxWidth from '../generators/maxWidth'
+import minHeight from '../generators/minHeight'
+import minWidth from '../generators/minWidth'
+import negativeMargin from '../generators/negativeMargin'
 import opacity from '../generators/opacity'
 import overflow from '../generators/overflow'
+import padding from '../generators/padding'
 import pointerEvents from '../generators/pointerEvents'
 import position from '../generators/position'
 import resize from '../generators/resize'
-import responsive from '../util/responsive'
-import rounded from '../generators/rounded'
 import shadows from '../generators/shadows'
-import sizing from '../generators/sizing'
-import spacing from '../generators/spacing'
 import textAlign from '../generators/textAlign'
 import textColors from '../generators/textColors'
-import textFonts from '../generators/textFonts'
-import textLeading from '../generators/textLeading'
 import textSizes from '../generators/textSizes'
 import textStyle from '../generators/textStyle'
-import textTracking from '../generators/textTracking'
-import textWeights from '../generators/textWeights'
-import textWrap from '../generators/textWrap'
+import tracking from '../generators/tracking'
 import userSelect from '../generators/userSelect'
 import verticalAlign from '../generators/verticalAlign'
 import visibility from '../generators/visibility'
+import whitespace from '../generators/whitespace'
+import width from '../generators/width'
 import zIndex from '../generators/zIndex'
 
 export default function(config) {
@@ -46,40 +54,49 @@ export default function(config) {
       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.
             lists(unwrappedConfig),
-            forms(unwrappedConfig),
-            textSizes(unwrappedConfig),
-            textWeights(unwrappedConfig),
-            textFonts(unwrappedConfig),
-            textColors(unwrappedConfig),
-            textLeading(unwrappedConfig),
-            textTracking(unwrappedConfig),
-            textAlign(unwrappedConfig),
-            textWrap(unwrappedConfig),
-            textStyle(unwrappedConfig),
-            verticalAlign(unwrappedConfig),
+            appearance(unwrappedConfig),
             backgroundColors(unwrappedConfig),
-            backgroundPositions(unwrappedConfig),
+            backgroundPosition(unwrappedConfig),
             backgroundSize(unwrappedConfig),
-            borderWidths(unwrappedConfig),
             borderColors(unwrappedConfig),
-            borderStyles(unwrappedConfig),
-            rounded(unwrappedConfig),
-            display(unwrappedConfig),
-            position(unwrappedConfig),
-            overflow(unwrappedConfig),
-            sizing(unwrappedConfig),
-            spacing(unwrappedConfig),
-            shadows(unwrappedConfig),
-            flex(unwrappedConfig),
-            floats(unwrappedConfig),
-            visibility(unwrappedConfig),
-            zIndex(unwrappedConfig),
-            opacity(unwrappedConfig),
-            userSelect(unwrappedConfig),
-            pointerEvents(unwrappedConfig),
-            resize(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),
           ]),
         })