encre_css/plugins/effect/
mod.rs1pub mod background_blend_mode;
3pub mod box_shadow;
4pub mod box_shadow_color;
5pub mod mix_blend_mode;
6pub mod opacity;
7pub mod text_shadow;
8pub mod text_shadow_color;
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(
73 ["inset-shadow-[0_2px_2px_rgb(0_0_0_/_0.1)]"],
74 &base_config()
75 ),
76 r".inset-shadow-\[0_2px_2px_rgb\(0_0_0_\/_0\.1\)\] {
77 --en-inset-shadow: 0 2px 2px var(--en-inset-shadow-color, rgb(0 0 0 / 0.1));
78 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);
79}"
80 );
81 }
82
83 #[test]
84 fn box_shadow_color() {
85 assert_eq!(
86 generate(["shadow-red-400"], &base_config()),
87 ".shadow-red-400 {
88 --en-shadow-color: oklch(70.4% .191 22.216);
89}"
90 );
91 assert_eq!(
92 generate(["shadow-[rgb(12,12,12)]"], &base_config()),
93 r".shadow-\[rgb\(12\,12\,12\)\] {
94 --en-shadow-color: rgb(12,12,12);
95}"
96 );
97 assert_eq!(
98 generate(["inset-shadow-red-400"], &base_config()),
99 ".inset-shadow-red-400 {
100 --en-inset-shadow-color: oklch(70.4% .191 22.216);
101}"
102 );
103 }
104
105 #[test]
106 fn text_shadow() {
107 assert_eq!(
108 generate(["text-shadow-2xs"], &base_config()),
109 ".text-shadow-2xs {
110 text-shadow: 0px 1px 0px var(--en-text-shadow-color, rgb(0 0 0 / 0.15));
111}"
112 );
113 assert_eq!(
114 generate(["text-shadow-sm"], &base_config()),
115 ".text-shadow-sm {
116 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));
117}"
118 );
119 assert_eq!(
120 generate(["text-shadow-none"], &base_config()),
121 ".text-shadow-none {
122 text-shadow: none;
123}"
124 );
125 assert_eq!(
126 generate(["text-shadow-[12px_3rem_12rem_#f00]"], &base_config()),
127 r".text-shadow-\[12px_3rem_12rem_\#f00\] {
128 text-shadow: 12px 3rem 12rem var(--en-text-shadow-color, #f00);
129}"
130 );
131 }
132
133 #[test]
134 fn text_shadow_color() {
135 assert_eq!(
136 generate(["text-shadow-red-400"], &base_config()),
137 ".text-shadow-red-400 {
138 --en-text-shadow-color: oklch(70.4% .191 22.216);
139}"
140 );
141 assert_eq!(
142 generate(["text-shadow-[rgb(12,12,12)]"], &base_config()),
143 r".text-shadow-\[rgb\(12\,12\,12\)\] {
144 --en-text-shadow-color: rgb(12,12,12);
145}"
146 );
147 }
148
149 #[test]
150 fn mix_blend_mode() {
151 assert_eq!(
152 generate(["mix-blend-multiply"], &base_config()),
153 ".mix-blend-multiply {
154 mix-blend-mode: multiply;
155}"
156 );
157 assert_eq!(
158 generate(["mix-blend-plus-lighter"], &base_config()),
159 ".mix-blend-plus-lighter {
160 mix-blend-mode: plus-lighter;
161}"
162 );
163 }
164
165 #[test]
166 fn opacity() {
167 assert_eq!(
168 generate(["opacity-12"], &base_config()),
169 ".opacity-12 {
170 opacity: 0.12;
171}"
172 );
173 }
174}