Move negative margin logic into a helper

Adds a new `utils` bucket that's passed as a second arg when using a closure for theme values. The idea is you can destructure useful helper functions out of this argument, in this case a `negative` function that converts a positive scale to negative values. That's the only helper function right now, but making it a destructurable arg so we can add more if necessary without adding a bunch of positional arguments.
This commit is contained in:
Adam Wathan 2019-04-24 15:15:30 -04:00
parent 2d91aa8caa
commit e8b64fdb62
2 changed files with 17 additions and 15 deletions

View File

@ -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],
}
}, {})
}

View File

@ -305,20 +305,11 @@ module.exports = {
screen: '100vh',
},
padding: theme => theme('spacing'),
margin: theme => {
const negativeSpacing = Object.keys(theme('spacing'))
.filter(key => theme('spacing')[key] !== '0')
.reduce((negativeSpacing, key) => ({
...negativeSpacing,
[`-${key}`]: `-${theme('spacing')[key]}`
}), {})
return {
auto: 'auto',
...theme('spacing'),
...negativeSpacing,
}
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
}),
objectPosition: {
bottom: 'bottom',
center: 'center',