Port leading module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import leading from './plugins/leading'
 import margin from './plugins/margin'
 import maxHeight from './plugins/maxHeight'
 import maxWidth from './plugins/maxWidth'
@@ -31,6 +32,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.leading === false ? () => {} : leading(),
     config.modules.margin === false ? () => {} : margin(),
     config.modules.maxHeight === false ? () => {} : maxHeight(),
     config.modules.maxWidth === false ? () => {} : maxWidth(),

src/generators/leading.js

@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ leading }) {
-  return _.map(leading, (value, modifier) => {
-    return defineClass(`leading-${modifier}`, {
-      'line-height': `${value}`,
-    })
-  })
-}

src/plugins/leading.js

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('leading'), (value, modifier) => {
+      return [`.${e(`leading-${modifier}`)}`, {
+        'line-height': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.leading'))
+  }
+}

src/utilityModules.js

@@ -17,7 +17,6 @@ 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'
 
 export default [
   { name: 'lists', generator: lists },
@@ -39,5 +38,4 @@ export default [
   { name: 'fonts', generator: fonts },
   { name: 'fontWeights', generator: fontWeights },
   { name: 'height', generator: height },
-  { name: 'leading', generator: leading },
 ]