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-to-b/decreasing"], &base_config()),
124 r".bg-linear-to-b\/decreasing {
125 background-image: linear-gradient(to bottom in oklch decreasing hue, var(--en-gradient-stops));
126}"
127 );
128 assert_eq!(generate(["bg-linear-to-b/d"], &base_config()), "",);
129 assert_eq!(generate(["bg-linear-to-b/"], &base_config()), "",);
130 assert_eq!(
131 generate(["bg-linear-[to_bottom_#000,#fff]"], &base_config()),
132 r".bg-linear-\[to_bottom_\#000\,\#fff\] {
133 background-image: linear-gradient(to bottom #000,#fff);
134}"
135 );
136 assert_eq!(
137 generate(["bg-[url('/hello.png')]"], &base_config()),
138 r".bg-\[url\(\'\/hello\.png\'\)\] {
139 background-image: url('/hello.png');
140}"
141 );
142 assert_eq!(
143 generate(["bg-[url('/hello_with_underscores.png')]"], &base_config()),
144 r".bg-\[url\(\'\/hello_with_underscores\.png\'\)\] {
145 background-image: url('/hello_with_underscores.png');
146}"
147 );
148 assert_eq!(
149 generate(["bg-radial"], &base_config()),
150 ".bg-radial {
151 background-image: radial-gradient(in oklab, var(--en-gradient-stops));
152}"
153 );
154 assert_eq!(
155 generate(["bg-radial-[at_50%_75%]"], &base_config()),
156 r".bg-radial-\[at_50\%_75\%\] {
157 background-image: radial-gradient(at 50% 75%);
158}"
159 );
160 assert_eq!(
161 generate(["bg-conic"], &base_config()),
162 ".bg-conic {
163 background-image: conic-gradient(in oklab, var(--en-gradient-stops));
164}"
165 );
166 assert_eq!(
167 generate(["bg-conic/decreasing"], &base_config()),
168 r".bg-conic\/decreasing {
169 background-image: conic-gradient(in oklch decreasing hue, var(--en-gradient-stops));
170}"
171 );
172 assert_eq!(
173 generate(["bg-conic-180"], &base_config()),
174 ".bg-conic-180 {
175 background-image: conic-gradient(from 180deg in oklab, var(--en-gradient-stops));
176}"
177 );
178 assert_eq!(
179 generate(["-bg-conic-180"], &base_config()),
180 ".-bg-conic-180 {
181 background-image: conic-gradient(from -180deg in oklab, var(--en-gradient-stops));
182}"
183 );
184 }
185
186 #[test]
187 fn background_color() {
188 assert_eq!(
189 generate(["bg-red-400"], &base_config()),
190 ".bg-red-400 {
191 background-color: oklch(70.4% .191 22.216);
192}"
193 );
194 assert_eq!(
195 generate(["bg-[rgb(12,12,12)]"], &base_config()),
196 r".bg-\[rgb\(12\,12\,12\)\] {
197 background-color: rgb(12,12,12);
198}"
199 );
200 assert_eq!(
201 generate(["bg-[purple]"], &base_config()),
202 r".bg-\[purple\] {
203 background-color: purple;
204}"
205 );
206 }
207}