tailwindcss/src/plugins/divideWidth.js

43 lines
1.4 KiB
JavaScript
Raw Normal View History

2020-04-16 10:53:19 -04:00
import _ from 'lodash'
import nameClass from '../util/nameClass'
2020-04-16 10:53:19 -04:00
2020-10-16 13:30:06 -04:00
export default function () {
return function ({ addUtilities, theme, variants }) {
2020-04-16 10:53:19 -04:00
const generators = [
(_size, modifier) => {
const size = _size === '0' ? '0px' : _size
return {
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-divide-y-reverse': '0',
'border-top-width': `calc(${size} * calc(1 - var(--tw-divide-y-reverse)))`,
'border-bottom-width': `calc(${size} * var(--tw-divide-y-reverse))`,
},
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-divide-x-reverse': '0',
'border-right-width': `calc(${size} * var(--tw-divide-x-reverse))`,
'border-left-width': `calc(${size} * calc(1 - var(--tw-divide-x-reverse)))`,
},
}
},
2020-04-16 10:53:19 -04:00
]
const utilities = _.flatMap(generators, (generator) => {
return [
..._.flatMap(theme('divideWidth'), (value, modifier) => {
return generator(value, modifier)
}),
{
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-y-reverse': '1',
},
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-x-reverse': '1',
},
},
]
2020-04-16 10:53:19 -04:00
})
addUtilities(utilities, variants('divideWidth'))
}
}