Port negativeMargin module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import negativeMargin from './plugins/negativeMargin'
 import objectFit from './plugins/objectFit'
 import objectPosition from './plugins/objectPosition'
 import opacity from './plugins/opacity'
@@ -25,6 +26,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.negativeMargin === false ? () => {} : negativeMargin(),
     config.modules.objectFit === false ? () => {} : objectFit(),
     config.modules.objectPosition === false ? () => {} : objectPosition(),
     config.modules.opacity === false ? () => {} : opacity(),

src/generators/negativeMargin.js

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

@@ -0,0 +1,29 @@
+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('negativeMargin'), (size, modifier) => {
+        return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
+      })
+    })
+
+    addUtilities(utilities, config('modules.negativeMargin'))
+  }
+}

src/utilityModules.js

@@ -23,7 +23,6 @@ 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'
 
 export default [
   { name: 'lists', generator: lists },
@@ -51,5 +50,4 @@ export default [
   { name: 'maxWidth', generator: maxWidth },
   { name: 'minHeight', generator: minHeight },
   { name: 'minWidth', generator: minWidth },
-  { name: 'negativeMargin', generator: negativeMargin },
 ]