encre_css/plugins/effect/
mod.rs

1//! Effect utilities
2pub mod background_blend_mode;
3pub mod box_shadow;
4pub mod box_shadow_color;
5pub mod text_shadow;
6pub mod text_shadow_color;
7pub mod mix_blend_mode;
8pub mod opacity;
9
10#[cfg(test)]
11mod tests {
12    use crate::{generate, utils::testing::base_config};
13
14    use pretty_assertions::assert_eq;
15
16    #[test]
17    fn background_blend_mode() {
18        assert_eq!(
19            generate(["bg-blend-multiply"], &base_config()),
20            ".bg-blend-multiply {
21  background-blend-mode: multiply;
22}"
23        );
24        assert_eq!(
25            generate(["bg-blend-luminosity"], &base_config()),
26            ".bg-blend-luminosity {
27  background-blend-mode: luminosity;
28}"
29        );
30    }
31
32    #[test]
33    fn box_shadow() {
34        assert_eq!(
35            generate(["shadow-sm"], &base_config()),
36            ".shadow-sm {
37  --en-shadow: 0 1px 3px 0 var(--en-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--en-shadow-color, rgb(0 0 0 / 0.1));
38  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
39}"
40        );
41        assert_eq!(
42            generate(["shadow-2xl"], &base_config()),
43            ".shadow-2xl {
44  --en-shadow: 0 25px 50px -12px var(--en-shadow-color, rgb(0 0 0 / 0.25));
45  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
46}"
47        );
48        assert_eq!(
49            generate(["shadow-none"], &base_config()),
50            ".shadow-none {
51  --en-shadow: 0 0 #0000;
52  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
53}"
54        );
55        assert_eq!(
56            generate(["shadow-[12px_3rem_12rem_2em_#f00]"], &base_config()),
57            r".shadow-\[12px_3rem_12rem_2em_\#f00\] {
58  --en-shadow: 12px 3rem 12rem 2em var(--en-shadow-color, #f00);
59  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
60}"
61        );
62
63        assert_eq!(
64            generate(["inset-shadow-sm"], &base_config()),
65            r".inset-shadow-sm {
66  --en-inset-shadow: 0 2px 4px var(--en-inset-shadow-color, rgb(0 0 0 / 0.05));
67  box-shadow: var(--en-inset-shadow), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow, 0 0 #0000);
68}"
69        );
70
71        assert_eq!(
72            generate(["inset-shadow-[0_2px_2px_rgb(0_0_0_/_0.1)]"], &base_config()),
73            r".inset-shadow-\[0_2px_2px_rgb\(0_0_0_\/_0\.1\)\] {
74  --en-inset-shadow: 0 2px 2px var(--en-inset-shadow-color, rgb(0 0 0 / 0.1));
75  box-shadow: var(--en-inset-shadow), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow, 0 0 #0000);
76}"
77        );
78    }
79
80    #[test]
81    fn box_shadow_color() {
82        assert_eq!(
83            generate(["shadow-red-400"], &base_config()),
84            ".shadow-red-400 {
85  --en-shadow-color: oklch(70.4% .191 22.216);
86}"
87        );
88        assert_eq!(
89            generate(["shadow-[rgb(12,12,12)]"], &base_config()),
90            r".shadow-\[rgb\(12\,12\,12\)\] {
91  --en-shadow-color: rgb(12,12,12);
92}"
93        );
94        assert_eq!(
95            generate(["inset-shadow-red-400"], &base_config()),
96            ".inset-shadow-red-400 {
97  --en-inset-shadow-color: oklch(70.4% .191 22.216);
98}"
99        );
100    }
101
102    #[test]
103    fn text_shadow() {
104        assert_eq!(
105            generate(["text-shadow-2xs"], &base_config()),
106            ".text-shadow-2xs {
107  text-shadow: 0px 1px 0px var(--en-text-shadow-color, rgb(0 0 0 / 0.15));
108}"
109        );
110        assert_eq!(
111            generate(["text-shadow-sm"], &base_config()),
112            ".text-shadow-sm {
113  text-shadow: 0px 1px 0px var(--en-text-shadow-color, rgb(0 0 0 / 0.075)), 0px 1px 1px var(--en-text-shadow-color, rgb(0 0 0 / 0.075)), 0px 2px 2px var(--en-text-shadow-color, rgb(0 0 0 / 0.075));
114}"
115        );
116        assert_eq!(
117            generate(["text-shadow-none"], &base_config()),
118            ".text-shadow-none {
119  text-shadow: none;
120}"
121        );
122        assert_eq!(
123            generate(["text-shadow-[12px_3rem_12rem_#f00]"], &base_config()),
124            r".text-shadow-\[12px_3rem_12rem_\#f00\] {
125  text-shadow: 12px 3rem 12rem var(--en-text-shadow-color, #f00);
126}"
127        );
128    }
129
130    #[test]
131    fn text_shadow_color() {
132        assert_eq!(
133            generate(["text-shadow-red-400"], &base_config()),
134            ".text-shadow-red-400 {
135  --en-text-shadow-color: oklch(70.4% .191 22.216);
136}"
137        );
138        assert_eq!(
139            generate(["text-shadow-[rgb(12,12,12)]"], &base_config()),
140            r".text-shadow-\[rgb\(12\,12\,12\)\] {
141  --en-text-shadow-color: rgb(12,12,12);
142}"
143        );
144    }
145
146    #[test]
147    fn mix_blend_mode() {
148        assert_eq!(
149            generate(["mix-blend-multiply"], &base_config()),
150            ".mix-blend-multiply {
151  mix-blend-mode: multiply;
152}"
153        );
154        assert_eq!(
155            generate(["mix-blend-plus-lighter"], &base_config()),
156            ".mix-blend-plus-lighter {
157  mix-blend-mode: plus-lighter;
158}"
159        );
160    }
161
162    #[test]
163    fn opacity() {
164        assert_eq!(
165            generate(["opacity-12"], &base_config()),
166            ".opacity-12 {
167  opacity: 0.12;
168}"
169        );
170    }
171}
encre_css/plugins/effect/mod.rs

encre_css/plugins/effect/
mod.rs
