Merge pull request #865 from tailwindcss/combine-margin-plugins

Remove negativeMargin plugin, handle negative values in regular margin plugin

src/corePlugins.js

@@ -34,7 +34,6 @@ import maxHeight from './plugins/maxHeight'
 import maxWidth from './plugins/maxWidth'
 import minHeight from './plugins/minHeight'
 import minWidth from './plugins/minWidth'
-import negativeMargin from './plugins/negativeMargin'
 import objectFit from './plugins/objectFit'
 import objectPosition from './plugins/objectPosition'
 import opacity from './plugins/opacity'
@@ -105,7 +104,6 @@ export default function({ corePlugins: corePluginConfig }) {
     maxWidth,
     minHeight,
     minWidth,
-    negativeMargin,
     objectFit,
     objectPosition,
     opacity,

src/plugins/margin.js

@@ -1,20 +1,30 @@
 import _ from 'lodash'
 
+function className(prefix, modifier) {
+  return _.startsWith(modifier, '-') ? `-${prefix}-${modifier.slice(1)}` : `${prefix}-${modifier}`
+}
+
 export default function() {
   return function({ addUtilities, e, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(`m-${modifier}`)}`]: { margin: `${size}` },
+        [`.${e(className('m', modifier))}`]: { margin: `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(`my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
-        [`.${e(`mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+        [`.${e(className('my', modifier))}`]: {
+          'margin-top': `${size}`,
+          'margin-bottom': `${size}`,
+        },
+        [`.${e(className('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}` },
+        [`.${e(className('mt', modifier))}`]: { 'margin-top': `${size}` },
+        [`.${e(className('mr', modifier))}`]: { 'margin-right': `${size}` },
+        [`.${e(className('mb', modifier))}`]: { 'margin-bottom': `${size}` },
+        [`.${e(className('ml', modifier))}`]: { 'margin-left': `${size}` },
       }),
     ]
 

src/plugins/negativeMargin.js

@@ -1,29 +0,0 @@
-import _ from 'lodash'
-
-export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    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(theme('negativeMargin'), (size, modifier) => {
-        return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
-      })
-    })
-
-    addUtilities(utilities, variants('negativeMargin'))
-  }
-}

src/util/resolveConfig.js

@@ -4,6 +4,17 @@ import defaults from 'lodash/defaults'
 import map from 'lodash/map'
 import get from 'lodash/get'
 
+const utils = {
+  negative: function (scale) {
+    return Object.keys(scale)
+      .filter(key => scale[key] !== '0')
+      .reduce((negativeScale, key) => ({
+        ...negativeScale,
+        [`-${key}`]: `-${scale[key]}`
+      }), {})
+  }
+}
+
 function value(valueToResolve, ...args) {
   return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve
 }
@@ -33,7 +44,7 @@ function resolveFunctionKeys(object) {
   return Object.keys(object).reduce((resolved, key) => {
     return {
       ...resolved,
-      [key]: isFunction(object[key]) ? object[key](resolveObjectPath) : object[key],
+      [key]: isFunction(object[key]) ? object[key](resolveObjectPath, utils) : object[key],
     }
   }, {})
 }

stubs/defaultConfig.stub.js

@@ -305,8 +305,11 @@ module.exports = {
       screen: '100vh',
     },
     padding: theme => theme('spacing'),
-    margin: theme => ({ auto: 'auto', ...theme('spacing') }),
-    negativeMargin: theme => theme('spacing'),
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',