Skip to main content

stylex_transform/shared/utils/css/tests/
css_custom_properties_validation_test.rs

1#[cfg(test)]
2mod css_tests {
3  use crate::shared::structures::state_manager::StateManager;
4  use crate::shared::utils::css::common::transform_value_cached;
5
6  #[test]
7  #[should_panic(expected = "Rule contains an unclosed function")]
8  fn disallow_unclosed_style_value_functions() {
9    assert_eq!(
10      transform_value_cached("color", "var(--foo", &mut StateManager::default()),
11      "1px",
12    );
13  }
14
15  #[test]
16  #[should_panic(expected = "Unprefixed custom properties")]
17  fn disallow_unprefixed_custom_properties() {
18    assert_eq!(
19      transform_value_cached("color", "var(foo)", &mut StateManager::default()),
20      "1px",
21    );
22  }
23
24  #[test]
25  fn basic_var_properties() {
26    assert_eq!(
27      transform_value_cached("color", "var(--foo)", &mut StateManager::default()),
28      "var(--foo)",
29    );
30    assert_eq!(
31      transform_value_cached(
32        "backgroundColor",
33        "var(--bar)",
34        &mut StateManager::default()
35      ),
36      "var(--bar)"
37    );
38  }
39
40  #[test]
41  fn transition_properties() {
42    assert_eq!(
43      transform_value_cached(
44        "transitionProperty",
45        "opacity, margin-top",
46        &mut StateManager::default()
47      ),
48      "opacity,margin-top"
49    );
50    assert_eq!(
51      transform_value_cached(
52        "transitionProperty",
53        "opacity, marginTop",
54        &mut StateManager::default()
55      ),
56      "opacity,margin-top"
57    );
58  }
59
60  #[test]
61  fn shadow_properties() {
62    assert_eq!(
63      transform_value_cached(
64        "boxShadow",
65        "0px 2px 4px var(--shadow-1)",
66        &mut StateManager::default()
67      ),
68      "0 2px 4px var(--shadow-1)"
69    );
70    assert_eq!(
71      transform_value_cached("boxShadow", "1px 1px #000", &mut StateManager::default()),
72      "1px 1px #000",
73    );
74  }
75
76  #[test]
77  fn spacing_and_calculations() {
78    assert_eq!(
79      transform_value_cached(
80        "padding",
81        "var(--rightpadding, 20px)",
82        &mut StateManager::default()
83      ),
84      "var(--rightpadding,20px)"
85    );
86    assert_eq!(
87      transform_value_cached(
88        "padding",
89        "calc((100% - 50px) * 0.5) var(--rightpadding, 20px)",
90        &mut StateManager::default()
91      ),
92      "calc((100% - 50px) * .5) var(--rightpadding,20px)"
93    );
94    assert_eq!(
95      transform_value_cached(
96        "margin",
97        "max(0px, (48px - var(--x16dnrjz)) / 2)",
98        &mut StateManager::default()
99      ),
100      "max(0px,(48px - var(--x16dnrjz)) / 2)"
101    );
102  }
103
104  #[test]
105  fn hashed_vars() {
106    assert_eq!(
107      transform_value_cached(
108        "backgroundColor",
109        "var(----__hashed_var__1jqb1tb, revert)",
110        &mut StateManager::default()
111      ),
112      "var(----__hashed_var__1jqb1tb,revert)"
113    );
114    assert_eq!(
115      transform_value_cached(
116        "--__hashed_var__1jqb1tb",
117        "var(----__hashed_var__1jqb1tb, revert)",
118        &mut StateManager::default()
119      ),
120      "var(----__hashed_var__1jqb1tb,revert)"
121    );
122  }
123
124  #[test]
125  fn quotes_handling() {
126    assert_eq!(
127      transform_value_cached("quotes", r#""''""#, &mut StateManager::default()),
128      r#""""#
129    );
130    assert_eq!(
131      transform_value_cached("quotes", r#""'123'""#, &mut StateManager::default()),
132      r#""123""#
133    );
134  }
135
136  #[test]
137  fn grid_properties() {
138    assert_eq!(
139      transform_value_cached(
140        "gridTemplateAreas",
141        r#"'"content"'"#,
142        &mut StateManager::default()
143      ),
144      r#""content""#
145    );
146    assert_eq!(
147      transform_value_cached(
148        "gridTemplateAreas",
149        r#"'"content" "sidebar"'"#,
150        &mut StateManager::default()
151      ),
152      r#""content" "sidebar""#
153    );
154    assert_eq!(
155      transform_value_cached(
156        "gridTemplateAreas",
157        r#"'"content""sidebar"'"#,
158        &mut StateManager::default()
159      ),
160      r#""content" "sidebar""#
161    );
162    assert_eq!(
163      transform_value_cached(
164        "gridTemplateColumns",
165        r#"auto 0fr 0fr"#,
166        &mut StateManager::default()
167      ),
168      r#"auto 0fr 0fr"#
169    );
170  }
171
172  #[test]
173  fn transform_properties() {
174    assert_eq!(
175      transform_value_cached(
176        "--span-t",
177        r#"translateX(4px)"#,
178        &mut StateManager::default()
179      ),
180      r#"translateX(4px)"#
181    );
182  }
183
184  #[test]
185  fn modern_color_formats() {
186    assert_eq!(
187      transform_value_cached(
188        "color",
189        r#"oklch(42.1% 0.192 328.6 / 1)"#,
190        &mut StateManager::default()
191      ),
192      r#"oklch(42.1% 0.192 328.6 / 1)"#
193    );
194    assert_eq!(
195      transform_value_cached(
196        "color",
197        r#"oklch(from var(--xs74gcj) l c h / 0.5)"#,
198        &mut StateManager::default()
199      ),
200      r#"oklch(from var(--xs74gcj) l c h / 0.5)"#
201    );
202    assert_eq!(
203      transform_value_cached(
204        "color",
205        r#"oklch(59.69% 0.156 49.77  /  .5)"#,
206        &mut StateManager::default()
207      ),
208      r#"oklch(59.69% 0.156 49.77 / .5)"#
209    );
210  }
211
212  #[test]
213  fn complex_gradients() {
214    assert_eq!(
215      transform_value_cached(
216        "color",
217        r#"radial-gradient(circle at 0% 0%, oklch(from   var(--colors-tile-background) calc(l +  0.1) calc(c + 0.2) h) 0,  transparent  15%),  radial-gradient(circle at 80% 100%,oklch(from   var(--colors-tile-background)  calc(l - 0.25) calc(c + 0.01) h) 0, transparent 30%), linear-gradient(45deg,var(--colors-tile-background) 0%, oklch(from var(--colors-tile-background) calc(l - 0.1) calc(c + 0.3) h) 100%)"#,
218        &mut StateManager::default()
219      ),
220      r#"radial-gradient(circle at 0% 0%, oklch(from var(--colors-tile-background) calc(l + 0.1) calc(c + 0.2) h) 0, transparent 15%), radial-gradient(circle at 80% 100%,oklch(from var(--colors-tile-background) calc(l - 0.25) calc(c + 0.01) h) 0, transparent 30%), linear-gradient(45deg,var(--colors-tile-background) 0%, oklch(from var(--colors-tile-background) calc(l - 0.1) calc(c + 0.3) h) 100%)"#
221    );
222    assert_eq!(
223      transform_value_cached(
224        "color",
225        r#"linear-gradient(to right, oklch(from #000 calc(l + 0.1)  c  h  /  0.1) 10%, oklch(from #000 calc(l  +  0.2)  c  h)  18%,  oklch(from #000 calc(l  + 0.1)  c h / 0.1) 33%)"#,
226        &mut StateManager::default()
227      ),
228      r#"linear-gradient(to right, oklch(from #000 calc(l + 0.1) c h / 0.1) 10%, oklch(from #000 calc(l + 0.2) c h) 18%, oklch(from #000 calc(l + 0.1) c h / 0.1) 33%)"#
229    );
230  }
231
232  #[test]
233  fn oklab_colors() {
234    assert_eq!(
235      transform_value_cached(
236        "color",
237        r#"oklab(40.101%   0.1147   0.0453)"#,
238        &mut StateManager::default()
239      ),
240      r#"oklab(40.101% 0.1147 0.0453)"#
241    );
242
243    assert_eq!(
244      transform_value_cached(
245        "color",
246        r#"var(--a)   var(--b)      var(--c)"#,
247        &mut StateManager::default()
248      ),
249      r#"var(--a) var(--b) var(--c)"#
250    );
251
252    assert_eq!(
253      transform_value_cached(
254        "color",
255        r#"oklab(from #0000FF calc(l  +  0.1)  a  b  /  calc(alpha  *  0.9))"#,
256        &mut StateManager::default()
257      ),
258      r#"oklab(from #0000FF calc(l + 0.1) a b / calc(alpha * 0.9))"#
259    );
260    assert_eq!(
261      transform_value_cached(
262        "color",
263        r#"oklab(from hsl(180 100% 50%) calc(l  -  0.1)  a  b)"#,
264        &mut StateManager::default()
265      ),
266      r#"oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)"#
267    );
268    assert_eq!(
269      transform_value_cached(
270        "color",
271        r#"oklab(from green l  a  b  /  0.5)"#,
272        &mut StateManager::default()
273      ),
274      r#"oklab(from green l a b / 0.5)"#
275    );
276  }
277
278  #[test]
279  fn clamp_colors() {
280    assert_eq!(
281      transform_value_cached(
282        "color",
283        r#"clamp(200px,  40%,     400px)"#,
284        &mut StateManager::default()
285      ),
286      r#"clamp(200px, 40%, 400px)"#
287    );
288
289    assert_eq!(
290      transform_value_cached(
291        "color",
292        r#"clamp(min(10vw,      20rem),     300px,     max(90vw,     55rem))"#,
293        &mut StateManager::default()
294      ),
295      r#"clamp(min(10vw, 20rem), 300px, max(90vw, 55rem))"#
296    );
297
298    assert_eq!(
299      transform_value_cached(
300        "color",
301        r#"clamp(0, (var(--l-threshold, 0.623)   /  l - 1)   *    infinity,    1)"#,
302        &mut StateManager::default()
303      ),
304      r#"clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1)"#
305    );
306  }
307
308  #[test]
309  fn allow_url_properties() {
310    assert_eq!(
311      transform_value_cached(
312        "backgroundImage",
313        r#"url("https://images.unsplash.com/photo-1634170380004-4b3b3b3b3b3b")"#,
314        &mut StateManager::default()
315      ),
316      r#"url("https://images.unsplash.com/photo-1634170380004-4b3b3b3b3b3b")"#,
317    );
318
319    assert_eq!(
320      transform_value_cached(
321        "backgroundImage",
322        r#"url("http://images.unsplash.com/photo-1634170380004-4b3b3b3b3b3b")"#,
323        &mut StateManager::default()
324      ),
325      r#"url("http://images.unsplash.com/photo-1634170380004-4b3b3b3b3b3b")"#,
326    );
327
328    assert_eq!(
329      transform_value_cached(
330        "backgroundImage",
331        r#"url("https://1.2.3.4/photo-1634170380004-4b3b3b3b3b3b")"#,
332        &mut StateManager::default()
333      ),
334      r#"url("https://1.2.3.4/photo-1634170380004-4b3b3b3b3b3b")"#,
335    );
336
337    assert_eq!(
338      transform_value_cached(
339        "backgroundImage",
340        r#"url("http://1.2.3.4/photo-1634170380004-4b3b3b3b3b3b")"#,
341        &mut StateManager::default()
342      ),
343      r#"url("http://1.2.3.4/photo-1634170380004-4b3b3b3b3b3b")"#,
344    );
345
346    assert_eq!(
347      transform_value_cached(
348        "backgroundImage",
349        r#"url("/photo-1634170380004-4b3b3b3b3b3b")"#,
350        &mut StateManager::default()
351      ),
352      r#"url("/photo-1634170380004-4b3b3b3b3b3b")"#,
353    );
354
355    assert_eq!(
356      transform_value_cached(
357        "backgroundImage",
358        r#"url("./photo-1634170380004-4b3b3b3b3b3b")"#,
359        &mut StateManager::default()
360      ),
361      r#"url("./photo-1634170380004-4b3b3b3b3b3b")"#,
362    );
363
364    assert_eq!(
365      transform_value_cached(
366        "backgroundImage",
367        r#"url(asset:communityEmpowermentRoles/Communities-Empowerment-Roles-Platform-Spark-New-Convo-QP-WWW_light)"#,
368        &mut StateManager::default()
369      ),
370      r#"url(asset:communityEmpowermentRoles/Communities-Empowerment-Roles-Platform-Spark-New-Convo-QP-WWW_light)"#,
371    );
372
373    assert_eq!(
374      transform_value_cached(
375        "backgroundImage",
376        r#"url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")"#,
377        &mut StateManager::default()
378      ),
379      r#"url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")"#,
380    );
381  }
382  #[test]
383  fn filter_properties() {
384    assert_eq!(
385      transform_value_cached(
386        "filter",
387        "drop-shadow(0 2px 10px rgba(0, 0, 0, 0.1))",
388        &mut StateManager::default()
389      ),
390      "drop-shadow(0 2px 10px rgba(0,0,0,.1))"
391    );
392
393    assert_eq!(
394      transform_value_cached(
395        "filter",
396        "drop-shadow(0 -2px 10px rgba(0, 0, 0, 0.1))",
397        &mut StateManager::default()
398      ),
399      "drop-shadow(0 -2px 10px rgba(0,0,0,.1))"
400    );
401  }
402
403  #[test]
404  fn should_normalize_dimensions() {
405    assert_eq!(
406      transform_value_cached("gridColumnStart", "1", &mut StateManager::default()),
407      "1"
408    );
409
410    assert_eq!(
411      transform_value_cached("gridColumnStart", "-1", &mut StateManager::default()),
412      "-1"
413    );
414
415    assert_eq!(
416      transform_value_cached(
417        "color",
418        "calc(0 - var(--someVar))",
419        &mut StateManager::default()
420      ),
421      "calc(0 - var(--someVar))"
422    );
423
424    assert_eq!(
425      transform_value_cached(
426        "color",
427        "calc(0px - var(--someVar))",
428        &mut StateManager::default()
429      ),
430      "calc(0px - var(--someVar))"
431    );
432  }
433}