encre_css/plugins/background/
mod.rs1pub mod background_attachment;
3pub mod background_clip;
4pub mod background_color;
5pub mod background_image;
6pub mod background_origin;
7pub mod background_position;
8pub mod background_repeat;
9pub mod background_size;
10pub mod gradient_color_stops;
11
12#[cfg(test)]
13mod tests {
14 use crate::{generate, utils::testing::base_config};
15
16 use pretty_assertions::assert_eq;
17
18 #[test]
19 fn background_attachment() {
20 assert_eq!(
21 generate(["bg-fixed"], &base_config()),
22 ".bg-fixed {
23 background-attachment: fixed;
24}"
25 );
26 }
27
28 #[test]
29 fn background_clip() {
30 assert_eq!(
31 generate(["bg-clip-border"], &base_config()),
32 ".bg-clip-border {
33 background-clip: border-box;
34}"
35 );
36 assert_eq!(
37 generate(["bg-clip-padding"], &base_config()),
38 ".bg-clip-padding {
39 background-clip: padding-box;
40}"
41 );
42 assert_eq!(
43 generate(["bg-clip-text"], &base_config()),
44 ".bg-clip-text {
45 background-clip: text;
46}"
47 );
48 }
49
50 #[test]
51 fn background_origin() {
52 assert_eq!(
53 generate(["bg-origin-padding"], &base_config()),
54 ".bg-origin-padding {
55 background-origin: padding-box;
56}"
57 );
58 }
59
60 #[test]
61 fn background_repeat() {
62 assert_eq!(
63 generate(["bg-repeat-y"], &base_config()),
64 ".bg-repeat-y {
65 background-repeat: repeat-y;
66}"
67 );
68 }
69
70 #[test]
71 fn background_size() {
72 assert_eq!(
73 generate(["bg-cover"], &base_config()),
74 ".bg-cover {
75 background-size: cover;
76}"
77 );
78 assert_eq!(
79 generate(["bg-[25%]"], &base_config()),
80 r".bg-\[25\%\] {
81 background-size: 25%;
82}"
83 );
84 }
85
86 #[test]
87 fn background_position() {
88 assert_eq!(
89 generate(["bg-right-bottom"], &base_config()),
90 ".bg-right-bottom {
91 background-position: right bottom;
92}"
93 );
94 assert_eq!(
95 generate(["bg-[position:25%_100px]"], &base_config()),
96 r".bg-\[position\:25\%_100px\] {
97 background-position: 25% 100px;
98}"
99 );
100 }
101
102 #[test]
103 fn background_image() {
104 assert_eq!(
105 generate(["bg-gradient-to-b"], &base_config()),
106 ".bg-gradient-to-b {
107 background-image: linear-gradient(to bottom in oklab, var(--en-gradient-stops));
108}"
109 );
110 assert_eq!(
111 generate(["bg-linear-to-b"], &base_config()),
112 ".bg-linear-to-b {
113 background-image: linear-gradient(to bottom in oklab, var(--en-gradient-stops));
114}"
115 );
116 assert_eq!(
117 generate(["bg-linear-123"], &base_config()),
118 ".bg-linear-123 {
119 background-image: linear-gradient(123deg in oklab, var(--en-gradient-stops));
120}"
121 );
122 assert_eq!(
123 generate(["bg-linear-123/hsl"], &base_config()),
124 r".bg-linear-123\/hsl {
125 background-image: linear-gradient(123deg in hsl, var(--en-gradient-stops));
126}"
127 );
128 assert_eq!(
129 generate(["bg-linear-to-b/decreasing"], &base_config()),
130 r".bg-linear-to-b\/decreasing {
131 background-image: linear-gradient(to bottom in oklch decreasing hue, var(--en-gradient-stops));
132}"
133 );
134 assert_eq!(generate(["bg-linear-to-b/d"], &base_config()), "",);
135 assert_eq!(generate(["bg-linear-to-b/"], &base_config()), "",);
136 assert_eq!(
137 generate(["bg-linear-[to_bottom_#000,#fff]"], &base_config()),
138 r".bg-linear-\[to_bottom_\#000\,\#fff\] {
139 background-image: linear-gradient(to bottom #000,#fff);
140}"
141 );
142 assert_eq!(
143 generate(["bg-[url('/hello.png')]"], &base_config()),
144 r".bg-\[url\(\'\/hello\.png\'\)\] {
145 background-image: url('/hello.png');
146}"
147 );
148 assert_eq!(
149 generate(
150 ["bg-[url('/hello_with_underscores.png')]"],
151 &base_config()
152 ),
153 r".bg-\[url\(\'\/hello_with_underscores\.png\'\)\] {
154 background-image: url('/hello_with_underscores.png');
155}"
156 );
157 assert_eq!(
158 generate(["bg-radial"], &base_config()),
159 ".bg-radial {
160 background-image: radial-gradient(in oklab, var(--en-gradient-stops));
161}"
162 );
163 assert_eq!(
164 generate(["bg-radial-[at_50%_75%]"], &base_config()),
165 r".bg-radial-\[at_50\%_75\%\] {
166 background-image: radial-gradient(at 50% 75%);
167}"
168 );
169 assert_eq!(
170 generate(["bg-conic"], &base_config()),
171 ".bg-conic {
172 background-image: conic-gradient(in oklab, var(--en-gradient-stops));
173}"
174 );
175 assert_eq!(
176 generate(["bg-conic/decreasing"], &base_config()),
177 r".bg-conic\/decreasing {
178 background-image: conic-gradient(in oklch decreasing hue, var(--en-gradient-stops));
179}"
180 );
181 assert_eq!(
182 generate(["bg-conic-180"], &base_config()),
183 ".bg-conic-180 {
184 background-image: conic-gradient(from 180deg in oklab, var(--en-gradient-stops));
185}"
186 );
187 assert_eq!(
188 generate(["-bg-conic-180"], &base_config()),
189 ".-bg-conic-180 {
190 background-image: conic-gradient(from -180deg in oklab, var(--en-gradient-stops));
191}"
192 );
193 assert_eq!(
194 generate(["bg-none"], &base_config()),
195 ".bg-none {
196 background-image: none;
197}"
198 );
199 assert!(generate(["bg-none/decreasing"], &base_config()).is_empty(),);
200 }
201
202 #[test]
203 fn background_color() {
204 assert_eq!(
205 generate(["bg-red-400"], &base_config()),
206 ".bg-red-400 {
207 background-color: oklch(70.4% .191 22.216);
208}"
209 );
210 assert_eq!(
211 generate(["bg-[rgb(12,12,12)]"], &base_config()),
212 r".bg-\[rgb\(12\,12\,12\)\] {
213 background-color: rgb(12,12,12);
214}"
215 );
216 assert_eq!(
217 generate(["bg-[purple]"], &base_config()),
218 r".bg-\[purple\] {
219 background-color: purple;
220}"
221 );
222 assert_eq!(
223 generate(["bg-[color:var(--primary)]"], &base_config()),
224 r".bg-\[color\:var\(--primary\)\] {
225 background-color: var(--primary);
226}"
227 );
228 }
229
230 #[test]
231 fn gradient_color_stops() {
232 assert_eq!(
233 generate(["from-red-200"], &base_config()),
234 r".from-red-200 {
235 --en-gradient-from: oklch(88.5% .062 18.334);
236 --en-gradient-stops: var(--en-gradient-from), var(--en-gradient-to, transparent);
237}"
238 );
239
240 assert_eq!(
241 generate(["from-[#f00]"], &base_config()),
242 r".from-\[\#f00\] {
243 --en-gradient-from: #f00;
244 --en-gradient-stops: var(--en-gradient-from), var(--en-gradient-to, transparent);
245}"
246 );
247
248 assert_eq!(
249 generate(["via-blue-200"], &base_config()),
250 r".via-blue-200 {
251 --en-gradient-stops: var(--en-gradient-from), oklch(88.2% .059 254.128), var(--en-gradient-to, transparent);
252}"
253 );
254
255 assert_eq!(
256 generate(["via-[rgb(12,12,12)]"], &base_config()),
257 r".via-\[rgb\(12\,12\,12\)\] {
258 --en-gradient-stops: var(--en-gradient-from), rgb(12,12,12), var(--en-gradient-to, transparent);
259}"
260 );
261
262 assert_eq!(
263 generate(["to-green-200"], &base_config()),
264 r".to-green-200 {
265 --en-gradient-to: oklch(92.5% .084 155.995);
266}"
267 );
268
269 assert_eq!(
270 generate(["to-[hwb(61_0%_0%)]"], &base_config()),
271 r".to-\[hwb\(61_0\%_0\%\)\] {
272 --en-gradient-to: hwb(61 0% 0%);
273}"
274 );
275 }
276}