55 lines
2.8 KiB
JavaScript
55 lines
2.8 KiB
JavaScript
|
import { css, quickPluginTest } from '../util/run'
|
||
|
|
|
||
|
|
quickPluginTest('backdropSepia', {
|
||
|
|
safelist: [
|
||
|
|
// Arbitrary values
|
||
|
|
'backdrop-sepia-[50%]',
|
||
|
|
'backdrop-sepia-[var(--my-value)]',
|
||
|
|
],
|
||
|
|
}).toMatchFormattedCss(css`
|
||
|
|
.backdrop-sepia {
|
||
|
|
--tw-backdrop-sepia: sepia(100%);
|
||
|
|
-webkit-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);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
.backdrop-sepia-0 {
|
||
|
|
--tw-backdrop-sepia: sepia(0);
|
||
|
|
-webkit-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);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
.backdrop-sepia-\[50\%\] {
|
||
|
|
--tw-backdrop-sepia: sepia(50%);
|
||
|
|
-webkit-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);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
.backdrop-sepia-\[var\(--my-value\)\] {
|
||
|
|
--tw-backdrop-sepia: sepia(var(--my-value));
|
||
|
|
-webkit-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);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
`)
|