Port padding module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import padding from './plugins/padding'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
 import resize from './plugins/resize'
@@ -18,6 +19,7 @@ import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
 export default [
+  padding(),
   pointerEvents(),
   position(),
   resize(),

src/generators/padding.js

@@ -1,31 +0,0 @@
-import _ from 'lodash'
-import defineClasses from '../util/defineClasses'
-
-function definePadding(padding) {
-  const generators = [
-    (size, modifier) =>
-      defineClasses({
-        [`p-${modifier}`]: { padding: `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`py-${modifier}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
-        [`px-${modifier}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
-      }),
-    (size, modifier) =>
-      defineClasses({
-        [`pt-${modifier}`]: { 'padding-top': `${size}` },
-        [`pr-${modifier}`]: { 'padding-right': `${size}` },
-        [`pb-${modifier}`]: { 'padding-bottom': `${size}` },
-        [`pl-${modifier}`]: { 'padding-left': `${size}` },
-      }),
-  ]
-
-  return _.flatMap(generators, generator => {
-    return _.flatMap(padding, generator)
-  })
-}
-
-export default function({ padding }) {
-  return _.flatten([definePadding(padding)])
-}

src/plugins/padding.js

@@ -0,0 +1,27 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const generators = [
+      (size, modifier) => ({
+        [`.${e(`p-${modifier}`)}`]: { padding: `${size}` },
+      }),
+      (size, modifier) => ({
+        [`.${e(`py-${modifier}`)}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
+        [`.${e(`px-${modifier}`)}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
+      }),
+      (size, modifier) => ({
+        [`.${e(`pt-${modifier}`)}`]: { 'padding-top': `${size}` },
+        [`.${e(`pr-${modifier}`)}`]: { 'padding-right': `${size}` },
+        [`.${e(`pb-${modifier}`)}`]: { 'padding-bottom': `${size}` },
+        [`.${e(`pl-${modifier}`)}`]: { 'padding-left': `${size}` },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(config('padding'), generator)
+    })
+
+    addUtilities(utilities, config('modules.padding'))
+  }
+}

src/utilityModules.js

@@ -29,7 +29,6 @@ import objectPosition from './generators/objectPosition'
 import opacity from './generators/opacity'
 import outline from './generators/outline'
 import overflow from './generators/overflow'
-import padding from './generators/padding'
 
 export default [
   { name: 'lists', generator: lists },
@@ -63,5 +62,4 @@ export default [
   { name: 'opacity', generator: opacity },
   { name: 'outline', generator: outline },
   { name: 'overflow', generator: overflow },
-  { name: 'padding', generator: padding },
 ]