Port margin module to plugin

src/defaultPlugins.js

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

src/generators/margin.js

@@ -1,31 +0,0 @@
-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/plugins/margin.js

@@ -0,0 +1,27 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const generators = [
+      (size, modifier) => ({
+        [`.${e(`m-${modifier}`)}`]: { margin: `${size}` },
+      }),
+      (size, modifier) => ({
+        [`.${e(`my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
+        [`.${e(`mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+      }),
+      (size, modifier) => ({
+        [`.${e(`mt-${modifier}`)}`]: { 'margin-top': `${size}` },
+        [`.${e(`mr-${modifier}`)}`]: { 'margin-right': `${size}` },
+        [`.${e(`mb-${modifier}`)}`]: { 'margin-bottom': `${size}` },
+        [`.${e(`ml-${modifier}`)}`]: { 'margin-left': `${size}` },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(config('margin'), generator)
+    })
+
+    addUtilities(utilities, config('modules.margin'))
+  }
+}

src/utilityModules.js

@@ -18,7 +18,6 @@ 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'
 
 export default [
   { name: 'lists', generator: lists },
@@ -41,5 +40,4 @@ export default [
   { name: 'fontWeights', generator: fontWeights },
   { name: 'height', generator: height },
   { name: 'leading', generator: leading },
-  { name: 'margin', generator: margin },
 ]