1pub mod border_color;
3pub mod border_radius;
4pub mod border_style;
5pub mod border_width;
6pub mod divide_color;
7pub mod divide_style;
8pub mod divide_width;
9pub mod outline_color;
10pub mod outline_offset;
11pub mod outline_style;
12pub mod outline_width;
13pub mod ring_color;
14pub mod ring_offset_color;
15pub mod ring_offset_width;
16pub mod ring_width;
17
18#[cfg(test)]
19mod tests {
20 use crate::{generate, utils::testing::base_config};
21
22 use pretty_assertions::assert_eq;
23
24 #[test]
25 fn border_color() {
26 assert_eq!(
27 generate(["border-red-400"], &base_config()),
28 ".border-red-400 {
29 border-color: oklch(70.4% .191 22.216);
30}"
31 );
32 assert_eq!(
33 generate(["border-[rgb(12,12,12)]"], &base_config()),
34 r".border-\[rgb\(12\,12\,12\)\] {
35 border-color: rgb(12,12,12);
36}"
37 );
38 assert_eq!(
39 generate(["border-x-[#ff0]"], &base_config()),
40 r".border-x-\[\#ff0\] {
41 border-inline-color: #ff0;
42}"
43 );
44 assert_eq!(
45 generate(["border-s-blue-400"], &base_config()),
46 ".border-s-blue-400 {
47 border-inline-start-color: oklch(70.7% .165 254.624);
48}"
49 );
50 assert_eq!(
51 generate(["border-e-blue-400/10"], &base_config()),
52 r".border-e-blue-400\/10 {
53 border-inline-end-color: color-mix(in oklab, oklch(70.7% .165 254.624) 10%, transparent);
54}"
55 );
56 }
57
58 #[test]
59 fn border_style() {
60 assert_eq!(
61 generate(["border-dashed"], &base_config()),
62 ".border-dashed {
63 border-style: dashed;
64}"
65 );
66
67 assert_eq!(
68 generate(["border-[solid_none_solid_none]"], &base_config()),
69 r".border-\[solid_none_solid_none\] {
70 border-style: solid none solid none;
71}"
72 );
73 }
74
75 #[test]
76 fn border_width() {
77 assert_eq!(
78 generate(["border"], &base_config()),
79 ".border {
80 border-width: 1px;
81}"
82 );
83 assert_eq!(
84 generate(["border-x"], &base_config()),
85 ".border-x {
86 border-inline-width: 1px;
87}"
88 );
89 assert_eq!(
90 generate(["border-s"], &base_config()),
91 ".border-s {
92 border-inline-start-width: 1px;
93}"
94 );
95 assert_eq!(
96 generate(["border-t"], &base_config()),
97 ".border-t {
98 border-top-width: 1px;
99}"
100 );
101
102 assert_eq!(
103 generate(["border-2"], &base_config()),
104 ".border-2 {
105 border-width: 2px;
106}"
107 );
108 assert_eq!(
109 generate(["border-x-24"], &base_config()),
110 ".border-x-24 {
111 border-inline-width: 24px;
112}"
113 );
114 assert_eq!(
115 generate(["border-e-2"], &base_config()),
116 ".border-e-2 {
117 border-inline-end-width: 2px;
118}"
119 );
120 assert_eq!(
121 generate(["border-t-42"], &base_config()),
122 ".border-t-42 {
123 border-top-width: 42px;
124}"
125 );
126 assert_eq!(
127 generate(["border-b-[3rem]"], &base_config()),
128 r".border-b-\[3rem\] {
129 border-bottom-width: 3rem;
130}"
131 );
132 assert_eq!(
133 generate(["border-y-[thick]"], &base_config()),
134 r".border-y-\[thick\] {
135 border-block-width: thick;
136}"
137 );
138 }
139
140 #[test]
141 fn border_radius() {
142 assert_eq!(
143 generate(["rounded-sm"], &base_config()),
144 ".rounded-sm {
145 border-radius: 0.25rem;
146}"
147 );
148 assert_eq!(
149 generate(["rounded-[2px]"], &base_config()),
150 r".rounded-\[2px\] {
151 border-radius: 2px;
152}"
153 );
154 assert_eq!(
155 generate(["rounded-bl-sm"], &base_config()),
156 ".rounded-bl-sm {
157 border-bottom-left-radius: 0.25rem;
158}"
159 );
160 assert_eq!(
161 generate(["rounded-t-sm"], &base_config()),
162 ".rounded-t-sm {
163 border-top-left-radius: 0.25rem;
164 border-top-right-radius: 0.25rem;
165}"
166 );
167 assert_eq!(
168 generate(["rounded-s-sm"], &base_config()),
169 ".rounded-s-sm {
170 border-start-start-radius: 0.25rem;
171 border-end-start-radius: 0.25rem;
172}"
173 );
174 assert_eq!(
175 generate(["rounded-xl"], &base_config()),
176 ".rounded-xl {
177 border-radius: 0.75rem;
178}"
179 );
180
181 assert_eq!(
182 generate(["rounded-xs"], &base_config()),
183 ".rounded-xs {
184 border-radius: 0.125rem;
185}"
186 );
187 assert_eq!(
188 generate(["rounded-bl-full"], &base_config()),
189 ".rounded-bl-full {
190 border-bottom-left-radius: 9999px;
191}"
192 );
193 assert_eq!(
194 generate(["rounded-ee-md"], &base_config()),
195 ".rounded-ee-md {
196 border-end-end-radius: 0.375rem;
197}"
198 );
199 assert_eq!(
200 generate(["rounded-t-3xl"], &base_config()),
201 ".rounded-t-3xl {
202 border-top-left-radius: 1.5rem;
203 border-top-right-radius: 1.5rem;
204}"
205 );
206 assert_eq!(
207 generate(["rounded-b-[3em]"], &base_config()),
208 r".rounded-b-\[3em\] {
209 border-bottom-left-radius: 3em;
210 border-bottom-right-radius: 3em;
211}"
212 );
213 assert_eq!(
214 generate(["rounded-tr-[20%]"], &base_config()),
215 r".rounded-tr-\[20\%\] {
216 border-top-right-radius: 20%;
217}"
218 );
219 }
220
221 #[test]
222 fn divide_style() {
223 assert_eq!(
224 generate(["divide-double"], &base_config()),
225 ".divide-double > :not([hidden]) ~ :not([hidden]) {
226 border-style: double;
227}"
228 );
229 }
230
231 #[test]
232 fn divide_color() {
233 assert_eq!(
234 generate(["divide-red-400"], &base_config()),
235 ".divide-red-400 > :not([hidden]) ~ :not([hidden]) {
236 border-color: oklch(70.4% .191 22.216);
237}"
238 );
239 assert_eq!(
240 generate(["divide-[rgb(12,12,12)]"], &base_config()),
241 r".divide-\[rgb\(12\,12\,12\)\] > :not([hidden]) ~ :not([hidden]) {
242 border-color: rgb(12,12,12);
243}"
244 );
245 }
246
247 #[test]
248 fn divide_width() {
249 assert_eq!(
250 generate(["divide-x"], &base_config()),
251 ".divide-x > :not([hidden]) ~ :not([hidden]) {
252 --en-divide-x-reverse: 0;
253 border-inline-start-width: calc(1px * var(--en-divide-x-reverse));
254 border-inline-end-width: calc(1px * calc(1 - var(--en-divide-x-reverse)));
255}"
256 );
257 assert_eq!(
258 generate(["divide-y-2"], &base_config()),
259 ".divide-y-2 > :not([hidden]) ~ :not([hidden]) {
260 --en-divide-y-reverse: 0;
261 border-block-start-width: calc(2px * var(--en-divide-y-reverse));
262 border-block-end-width: calc(2px * calc(1 - var(--en-divide-y-reverse)));
263}"
264 );
265 assert_eq!(
266 generate(["divide-x-reverse"], &base_config()),
267 ".divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
268 --en-divide-x-reverse: 1;
269}"
270 );
271 assert_eq!(
272 generate(["divide-y-[0.1rem]"], &base_config()),
273 r".divide-y-\[0\.1rem\] > :not([hidden]) ~ :not([hidden]) {
274 --en-divide-y-reverse: 0;
275 border-block-start-width: calc(0.1rem * var(--en-divide-y-reverse));
276 border-block-end-width: calc(0.1rem * calc(1 - var(--en-divide-y-reverse)));
277}"
278 );
279 assert_eq!(
280 generate(["divide-y-reverse"], &base_config()),
281 ".divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
282 --en-divide-y-reverse: 1;
283}"
284 );
285 }
286
287 #[test]
288 fn outline_style() {
289 assert_eq!(
290 generate(["outline-hidden"], &base_config()),
291 ".outline-hidden {
292 outline: 2px solid transparent;
293 outline-offset: 2px;
294}"
295 );
296 assert_eq!(
297 generate(["outline-dashed"], &base_config()),
298 ".outline-dashed {
299 outline-style: dashed;
300}"
301 );
302 }
303
304 #[test]
305 fn outline_width() {
306 assert_eq!(
307 generate(["outline-33"], &base_config()),
308 ".outline-33 {
309 outline-width: 33px;
310}"
311 );
312 assert_eq!(
313 generate(["outline-[2rem]"], &base_config()),
314 r".outline-\[2rem\] {
315 outline-width: 2rem;
316}"
317 );
318 assert_eq!(
319 generate(["outline-[thin]"], &base_config()),
320 r".outline-\[thin\] {
321 outline-width: thin;
322}"
323 );
324 }
325
326 #[test]
327 fn outline_color() {
328 assert_eq!(
329 generate(["outline-red-400"], &base_config()),
330 ".outline-red-400 {
331 outline-color: oklch(70.4% .191 22.216);
332}"
333 );
334 assert_eq!(
335 generate(["outline-[rgb(12,12,12)]"], &base_config()),
336 r".outline-\[rgb\(12\,12\,12\)\] {
337 outline-color: rgb(12,12,12);
338}"
339 );
340 }
341
342 #[test]
343 fn outline_offset() {
344 assert_eq!(
345 generate(["outline-offset-12"], &base_config()),
346 ".outline-offset-12 {
347 outline-offset: 12px;
348}"
349 );
350 assert_eq!(
351 generate(["outline-offset-[1rem]"], &base_config()),
352 r".outline-offset-\[1rem\] {
353 outline-offset: 1rem;
354}"
355 );
356 }
357
358 #[test]
359 fn ring_width() {
360 assert_eq!(
361 generate(["ring"], &base_config()),
362 ".ring {
363 --en-ring-shadow: 0 0 0 calc(1px + var(--en-ring-offset-width)) var(--en-ring-color);
364 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), var(--en-shadow, 0 0 #0000);
365}"
366 );
367 assert_eq!(
368 generate(["ring-11"], &base_config()),
369 ".ring-11 {
370 --en-ring-shadow: 0 0 0 calc(11px + var(--en-ring-offset-width)) var(--en-ring-color);
371 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), var(--en-shadow, 0 0 #0000);
372}"
373 );
374 assert_eq!(
375 generate(["inset-ring"], &base_config()),
376 ".inset-ring {
377 --en-inset-ring-shadow: inset 0 0 0 calc(1px + var(--en-ring-offset-width)) var(--en-ring-color);
378 box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow, 0 0 #0000);
379}"
380 );
381 assert_eq!(
382 generate(["inset-ring-12"], &base_config()),
383 ".inset-ring-12 {
384 --en-inset-ring-shadow: inset 0 0 0 calc(12px + var(--en-ring-offset-width)) var(--en-ring-color);
385 box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow, 0 0 #0000);
386}"
387 );
388 }
389
390 #[test]
391 fn ring_color() {
392 assert_eq!(
393 generate(["ring-red-400"], &base_config()),
394 ".ring-red-400 {
395 --en-ring-color: oklch(70.4% .191 22.216);
396}"
397 );
398 assert_eq!(
399 generate(["ring-[rgb(12,12,12)]"], &base_config()),
400 r".ring-\[rgb\(12\,12\,12\)\] {
401 --en-ring-color: rgb(12,12,12);
402}"
403 );
404 assert_eq!(
405 generate(["inset-ring-red-400"], &base_config()),
406 ".inset-ring-red-400 {
407 --en-inset-ring-color: oklch(70.4% .191 22.216);
408}"
409 );
410 }
411
412 #[test]
413 fn ring_offset_width() {
414 assert_eq!(
415 generate(["ring-offset-13"], &base_config()),
416 ".ring-offset-13 {
417 --en-ring-offset-shadow: var(--en-ring-inset) 0 0 0 var(--en-ring-offset-width) var(--en-ring-offset-color);
418 --en-ring-offset-width: 13px;
419}"
420 );
421 assert_eq!(
422 generate(["ring-offset-[13em]"], &base_config()),
423 r".ring-offset-\[13em\] {
424 --en-ring-offset-shadow: var(--en-ring-inset) 0 0 0 var(--en-ring-offset-width) var(--en-ring-offset-color);
425 --en-ring-offset-width: 13em;
426}"
427 );
428 }
429
430 #[test]
431 fn ring_offset_color() {
432 assert_eq!(
433 generate(["ring-offset-red-400"], &base_config()),
434 ".ring-offset-red-400 {
435 --en-ring-offset-shadow: var(--en-ring-inset) 0 0 0 var(--en-ring-offset-width) var(--en-ring-offset-color);
436 --en-ring-offset-color: oklch(70.4% .191 22.216);
437}"
438 );
439 assert_eq!(
440 generate(["ring-offset-[rgb(12,12,12)]"], &base_config()),
441 r".ring-offset-\[rgb\(12\,12\,12\)\] {
442 --en-ring-offset-shadow: var(--en-ring-inset) 0 0 0 var(--en-ring-offset-width) var(--en-ring-offset-color);
443 --en-ring-offset-color: rgb(12,12,12);
444}"
445 );
446 }
447}