Port float module to plugin

src/defaultPlugins.js

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

src/generators/float.js

@@ -1,20 +0,0 @@
-import _ from 'lodash'
-import postcss from 'postcss'
-import defineClasses from '../util/defineClasses'
-
-export default function() {
-  return _.concat(
-    defineClasses({
-      'float-right': { float: 'right' },
-      'float-left': { float: 'left' },
-      'float-none': { float: 'none' },
-    }),
-    postcss.parse(`
-      .clearfix:after {
-        content: "";
-        display: table;
-        clear: both;
-      }
-    `).nodes
-  )
-}

src/plugins/float.js

@@ -0,0 +1,14 @@
+export default function () {
+  return function ({ addUtilities, config }) {
+    addUtilities({
+      '.float-right': { float: 'right' },
+      '.float-left': { float: 'left' },
+      '.float-none': { float: 'none' },
+      '.clearfix:after': {
+        content: '""',
+        display: 'table',
+        clear: 'both',
+      }
+    }, config('modules.float'))
+  }
+}

src/utilityModules.js

@@ -13,7 +13,6 @@ import borderWidths from './generators/borderWidths'
 import cursor from './generators/cursor'
 import display from './generators/display'
 import flexbox from './generators/flexbox'
-import float from './generators/float'
 
 export default [
   { name: 'lists', generator: lists },
@@ -31,5 +30,4 @@ export default [
   { name: 'cursor', generator: cursor },
   { name: 'display', generator: display },
   { name: 'flexbox', generator: flexbox },
-  { name: 'float', generator: float },
 ]