60a06788fe
* 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>
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
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({
|
|
'backdrop-hue-rotate': (modifier, { theme }) => {
|
|
let value = asValue(modifier, theme.backdropHueRotate)
|
|
|
|
if (value === undefined) {
|
|
return []
|
|
}
|
|
|
|
return {
|
|
[nameClass('backdrop-hue-rotate', modifier)]: {
|
|
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
|
|
},
|
|
}
|
|
},
|
|
})
|
|
} else {
|
|
const utilities = _.fromPairs(
|
|
_.map(theme('backdropHueRotate'), (value, modifier) => {
|
|
return [
|
|
nameClass('backdrop-hue-rotate', modifier),
|
|
{
|
|
'--tw-backdrop-hue-rotate': Array.isArray(value)
|
|
? value.map((v) => `hue-rotate(${v})`).join(' ')
|
|
: `hue-rotate(${value})`,
|
|
},
|
|
]
|
|
})
|
|
)
|
|
|
|
addUtilities(utilities, variants('backdropHueRotate'))
|
|
}
|
|
}
|
|
}
|