mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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:
parent
2d91aa8caa
commit
e8b64fdb62
@ -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],
|
||||
}
|
||||
}, {})
|
||||
}
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user