tailwindcss/src/plugins/backdropFilter.js

66 lines
2.6 KiB
JavaScript

export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
},
})
addUtilities(
{
'.backdrop-filter-none': { 'backdrop-filter': 'none' },
},
variants('backdropFilter')
)
} else {
addUtilities(
{
'.backdrop-filter': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
},
'.backdrop-filter-none': { 'backdrop-filter': 'none' },
},
variants('backdropFilter')
)
}
}
}