encre_css/plugins/filter/
mod.rs1pub mod backdrop_blur;
3pub mod backdrop_brightness;
4pub mod backdrop_contrast;
5pub mod backdrop_filter;
6pub mod backdrop_grayscale;
7pub mod backdrop_hue_rotate;
8pub mod backdrop_invert;
9pub mod backdrop_saturate;
10pub mod backdrop_sepia;
11pub mod blur;
12pub mod brightness;
13pub mod contrast;
14pub mod drop_shadow;
15pub mod filter_type;
16pub mod grayscale;
17pub mod hue_rotate;
18pub mod invert;
19pub mod saturate;
20pub mod sepia;
21
22const CSS_FILTER: &str = "filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);";
23const CSS_BACKDROP_FILTER: [&str; 2] = ["-webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);", "backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);"];
24
25#[cfg(test)]
26mod tests {
27 use crate::{generate, utils::testing::base_config};
28
29 use pretty_assertions::assert_eq;
30
31 #[test]
32 fn blur() {
33 assert_eq!(
34 generate(["blur-md"], &base_config()),
35 ".blur-md {
36 --en-blur: blur(12px);
37 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
38}"
39 );
40 assert_eq!(
41 generate(["blur-none"], &base_config()),
42 ".blur-none {
43 --en-blur: blur(0);
44 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
45}"
46 );
47 assert_eq!(
48 generate(["blur-[42px]"], &base_config()),
49 r".blur-\[42px\] {
50 --en-blur: blur(42px);
51 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
52}"
53 );
54 }
55
56 #[test]
57 fn brightness() {
58 assert_eq!(
59 generate(["brightness-20"], &base_config()),
60 ".brightness-20 {
61 --en-brightness: brightness(0.2);
62 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
63}"
64 );
65 }
66
67 #[test]
68 fn contrast() {
69 assert_eq!(
70 generate(["contrast-20"], &base_config()),
71 ".contrast-20 {
72 --en-contrast: contrast(0.2);
73 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
74}"
75 );
76 }
77
78 #[test]
79 fn drop_shadow() {
80 assert_eq!(
81 generate(["drop-shadow-md"], &base_config()),
82 ".drop-shadow-md {
83 --en-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
84 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
85}"
86 );
87 assert_eq!(
88 generate(["drop-shadow-none"], &base_config()),
89 ".drop-shadow-none {
90 --en-drop-shadow: drop-shadow(0 0 #0000);
91 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
92}"
93 );
94 assert_eq!(
95 generate(["drop-shadow-[42px_12em_#f0f]"], &base_config()),
96 r".drop-shadow-\[42px_12em_\#f0f\] {
97 --en-drop-shadow: drop-shadow(42px 12em #f0f);
98 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
99}"
100 );
101 }
102
103 #[test]
104 fn filter_type() {
105 assert_eq!(
106 generate(["filter"], &base_config()),
107 ".filter {
108 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
109}"
110 );
111
112 assert_eq!(
113 generate(["filter-none"], &base_config()),
114 ".filter-none {
115 filter: none;
116}"
117 );
118 }
119
120 #[test]
121 fn grayscale() {
122 assert_eq!(
123 generate(["grayscale-20"], &base_config()),
124 ".grayscale-20 {
125 --en-grayscale: grayscale(0.2);
126 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
127}"
128 );
129
130 assert_eq!(
131 generate(["grayscale"], &base_config()),
132 ".grayscale {
133 --en-grayscale: grayscale(100%);
134 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
135}"
136 );
137 }
138
139 #[test]
140 fn hue_rotate() {
141 assert_eq!(
142 generate(["hue-rotate-170"], &base_config()),
143 ".hue-rotate-170 {
144 --en-hue-rotate: hue-rotate(170deg);
145 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
146}"
147 );
148 assert_eq!(
149 generate(["-hue-rotate-170"], &base_config()),
150 ".-hue-rotate-170 {
151 --en-hue-rotate: hue-rotate(-170deg);
152 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
153}"
154 );
155 }
156
157 #[test]
158 fn invert() {
159 assert_eq!(
160 generate(["invert-20"], &base_config()),
161 ".invert-20 {
162 --en-invert: invert(0.2);
163 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
164}"
165 );
166
167 assert_eq!(
168 generate(["invert"], &base_config()),
169 ".invert {
170 --en-invert: invert(100%);
171 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
172}"
173 );
174 }
175
176 #[test]
177 fn saturate() {
178 assert_eq!(
179 generate(["saturate-20"], &base_config()),
180 ".saturate-20 {
181 --en-saturate: saturate(0.2);
182 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
183}"
184 );
185 }
186
187 #[test]
188 fn sepia() {
189 assert_eq!(
190 generate(["sepia-20"], &base_config()),
191 ".sepia-20 {
192 --en-sepia: sepia(0.2);
193 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
194}"
195 );
196
197 assert_eq!(
198 generate(["sepia"], &base_config()),
199 ".sepia {
200 --en-sepia: sepia(100%);
201 filter: var(--en-blur) var(--en-brightness) var(--en-contrast) var(--en-grayscale) var(--en-hue-rotate) var(--en-invert) var(--en-saturate) var(--en-sepia) var(--en-drop-shadow);
202}"
203 );
204 }
205
206 #[test]
207 fn backdrop_blur() {
208 assert_eq!(
209 generate(["backdrop-blur-md"], &base_config()),
210
211 ".backdrop-blur-md {
212 --en-backdrop-blur: blur(12px);
213 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
214 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
215}"
216 );
217 assert_eq!(
218 generate(["backdrop-blur-none"], &base_config()),
219 ".backdrop-blur-none {
220 --en-backdrop-blur: blur(0);
221 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
222 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
223}"
224 );
225 assert_eq!(
226 generate(["backdrop-blur-[42px]"], &base_config()),
227 r".backdrop-blur-\[42px\] {
228 --en-backdrop-blur: blur(42px);
229 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
230 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
231}"
232 );
233 }
234
235 #[test]
236 fn backdrop_brightness() {
237 assert_eq!(
238 generate(["backdrop-brightness-20"], &base_config()),
239 ".backdrop-brightness-20 {
240 --en-backdrop-brightness: brightness(0.2);
241 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
242 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
243}"
244 );
245 }
246
247 #[test]
248 fn backdrop_contrast() {
249 assert_eq!(
250 generate(["backdrop-contrast-20"], &base_config()),
251 ".backdrop-contrast-20 {
252 --en-backdrop-contrast: contrast(0.2);
253 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
254 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
255}"
256 );
257 }
258
259 #[test]
260 fn backdrop_filter() {
261 assert_eq!(
262 generate(["backdrop-filter"], &base_config()),
263 ".backdrop-filter {
264 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
265 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
266}"
267 );
268
269 assert_eq!(
270 generate(["backdrop-filter-none"], &base_config()),
271 ".backdrop-filter-none {
272 -webkit-backdrop-filter: none;
273 backdrop-filter: none;
274}"
275 );
276 }
277
278 #[test]
279 fn backdrop_grayscale() {
280 assert_eq!(
281 generate(["backdrop-grayscale-20"], &base_config()),
282 ".backdrop-grayscale-20 {
283 --en-backdrop-grayscale: grayscale(0.2);
284 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
285 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
286}"
287 );
288
289 assert_eq!(
290 generate(["backdrop-grayscale"], &base_config()),
291 ".backdrop-grayscale {
292 --en-backdrop-grayscale: grayscale(100%);
293 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
294 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
295}"
296 );
297 }
298
299 #[test]
300 fn backdrop_hue_rotate() {
301 assert_eq!(
302 generate(["backdrop-hue-rotate-170"], &base_config()),
303 ".backdrop-hue-rotate-170 {
304 --en-backdrop-hue-rotate: hue-rotate(170deg);
305 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
306 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
307}"
308 );
309 assert_eq!(
310 generate(["-backdrop-hue-rotate-170"], &base_config()),
311 ".-backdrop-hue-rotate-170 {
312 --en-backdrop-hue-rotate: hue-rotate(-170deg);
313 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
314 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
315}"
316 );
317 }
318
319 #[test]
320 fn backdrop_invert() {
321 assert_eq!(
322 generate(["backdrop-invert-20"], &base_config()),
323 ".backdrop-invert-20 {
324 --en-backdrop-invert: invert(0.2);
325 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
326 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
327}"
328 );
329
330 assert_eq!(
331 generate(["backdrop-invert"], &base_config()),
332 ".backdrop-invert {
333 --en-backdrop-invert: invert(100%);
334 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
335 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
336}"
337 );
338 }
339
340 #[test]
341 fn backdrop_saturate() {
342 assert_eq!(
343 generate(["backdrop-saturate-20"], &base_config()),
344 ".backdrop-saturate-20 {
345 --en-backdrop-saturate: saturate(0.2);
346 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
347 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
348}"
349 );
350 }
351
352 #[test]
353 fn backdrop_sepia() {
354 assert_eq!(
355 generate(["backdrop-sepia-20"], &base_config()),
356 ".backdrop-sepia-20 {
357 --en-backdrop-sepia: sepia(0.2);
358 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
359 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
360}"
361 );
362
363 assert_eq!(
364 generate(["backdrop-sepia"], &base_config()),
365 ".backdrop-sepia {
366 --en-backdrop-sepia: sepia(100%);
367 -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
368 backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
369}"
370 );
371 }
372}