diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 5a9ae5abf..b58f3a789 100644 --- a/src/defaultPlugins.js +++ b/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(), diff --git a/src/generators/padding.js b/src/generators/padding.js deleted file mode 100644 index 82a5ac679..000000000 --- a/src/generators/padding.js +++ /dev/null @@ -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)]) -} diff --git a/src/plugins/padding.js b/src/plugins/padding.js new file mode 100644 index 000000000..85025861f --- /dev/null +++ b/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')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index b9fec04b8..5590e766b 100644 --- a/src/utilityModules.js +++ b/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 }, ]