Port fonts module to plugins

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import fonts from './plugins/fonts'
 import fontWeights from './plugins/fontWeights'
 import height from './plugins/height'
 import leading from './plugins/leading'
@@ -34,6 +35,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.fonts === false ? () => {} : fonts(),
     config.modules.fontWeights === false ? () => {} : fontWeights(),
     config.modules.height === false ? () => {} : height(),
     config.modules.leading === false ? () => {} : leading(),

src/generators/fonts.js

@@ -1,14 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ fonts }) {
-  return _.map(fonts, (families, font) => {
-    if (_.isArray(families)) {
-      families = families.join(', ')
-    }
-
-    return defineClass(`font-${font}`, {
-      'font-family': `${families}`,
-    })
-  })
-}

src/plugins/fonts.js

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

src/utilityModules.js

@@ -14,7 +14,6 @@ import cursor from './generators/cursor'
 import display from './generators/display'
 import flexbox from './generators/flexbox'
 import float from './generators/float'
-import fonts from './generators/fonts'
 
 export default [
   { name: 'lists', generator: lists },
@@ -33,5 +32,4 @@ export default [
   { name: 'display', generator: display },
   { name: 'flexbox', generator: flexbox },
   { name: 'float', generator: float },
-  { name: 'fonts', generator: fonts },
 ]