* Implement `filter` helper classes with all methods * Rename filter plugins/utilities, drop filter opacity, add drop shadow * Remove non-final default filter values * Working on default filter values, add basic JIT support * Working on blur values * New blur values (these are ~okay) * Match drop-shadow values to box-shadows by eye as best as possible * Update tests * Fix kitchen sink test * Add filter variants configuration * Move drop-shadow to end of filters list Co-Authored-By: Peter Neupauer <peter@neupauer.sk> * Add invert variants configuration * Add backdrop-filter utilities * Update tests * Transition filters by default * Alphabetize new config keys * Optimize filter plugins for JIT + add arbitrary value support Except for drop-shadow, will add that once we can think it through a bit. Co-authored-by: Nick Schmidt <nick@kreativgebiet.com> Co-authored-by: Peter Neupauer <peter@neupauer.sk>
37 lines
1,021 B
JavaScript
37 lines
1,021 B
JavaScript
import _ from 'lodash'
|
|
const { asValue, nameClass } = require('../../jit/pluginUtils')
|
|
|
|
export default function () {
|
|
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
|
|
if (config('mode') === 'jit') {
|
|
matchUtilities({
|
|
contrast: (modifier, { theme }) => {
|
|
let value = asValue(modifier, theme.contrast)
|
|
|
|
if (value === undefined) {
|
|
return []
|
|
}
|
|
|
|
return {
|
|
[nameClass('contrast', modifier)]: { '--tw-contrast': `contrast(${value})` },
|
|
}
|
|
},
|
|
})
|
|
} else {
|
|
const utilities = _.fromPairs(
|
|
_.map(theme('contrast'), (value, modifier) => {
|
|
return [
|
|
nameClass('contrast', modifier),
|
|
{
|
|
'--tw-contrast': Array.isArray(value)
|
|
? value.map((v) => `contrast(${v})`).join(' ')
|
|
: `contrast(${value})`,
|
|
},
|
|
]
|
|
})
|
|
)
|
|
|
|
addUtilities(utilities, variants('contrast'))
|
|
}
|
|
}
|
|
}
|