tailwindcss/src/plugins/inset.js

40 lines
1.3 KiB
JavaScript
Raw Normal View History

2019-03-14 12:35:37 -04:00
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
2019-03-14 12:35:37 -04:00
2019-03-14 12:19:14 -04:00
export default function() {
return function({ addUtilities, e, theme, variants }) {
2019-03-14 12:35:37 -04:00
const generators = [
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('inset', modifier))}`]: {
2019-03-14 12:35:37 -04:00
top: `${size}`,
right: `${size}`,
bottom: `${size}`,
left: `${size}`,
2019-03-14 12:19:14 -04:00
},
2019-03-14 12:35:37 -04:00
}),
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: {
top: `${size}`,
bottom: `${size}`,
},
[`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: {
right: `${size}`,
left: `${size}`,
},
2019-03-14 12:35:37 -04:00
}),
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` },
[`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` },
[`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` },
[`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` },
2019-03-14 12:35:37 -04:00
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('inset'), generator)
2019-03-14 12:35:37 -04:00
})
addUtilities(utilities, variants('inset'))
2019-03-14 12:19:14 -04:00
}
}