tailwindcss/src/plugins/contrast.js
Adam Wathan 60a06788fe
Add CSS filter support (#3923)
* 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>
2021-04-04 19:09:34 -04:00

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'))
}
}
}