1#[cfg(test)]
2mod stylex_define_vars {
3 use std::rc::Rc;
4
5 use indexmap::IndexMap;
6 use swc_core::ecma::ast::{Expr, PropOrSpread};
7
8 use crate::shared::enums::data_structures::evaluate_result_value::EvaluateResultValue;
9 use crate::shared::enums::data_structures::flat_compiled_styles_value::FlatCompiledStylesValue;
10 use crate::shared::structures::base_css_type::BaseCSSType;
11 use crate::shared::structures::functions::FunctionType;
12 use crate::shared::structures::state_manager::StateManager;
13 use crate::shared::structures::types::{FlatCompiledStyles, InjectableStylesMap};
14 use crate::shared::transformers::stylex_define_vars::stylex_define_vars;
15 use crate::shared::transformers::stylex_types::get_types_fn;
16 use crate::shared::utils::ast::convertors::create_string_expr;
17 use crate::shared::utils::common::create_hash;
18 use stylex_ast::ast::factories::{
19 create_key_value_prop, create_nested_object_prop, create_object_expression,
20 };
21 use stylex_enums::value_with_default::ValueWithDefault;
22 use stylex_structures::stylex_state_options::StyleXStateOptions;
23 use stylex_types::structures::injectable_style::InjectableStyle;
24
25 enum DefaultVarsFactoryValue<'a> {
26 Simple(&'a str),
27 Nested(&'a [(&'a str, &'a str)]),
28 }
29
30 type DefaultVarsFactoryArgs<'a> = [(
31 &'a str,
32 DefaultVarsFactoryValue<'a>,
33 &'a [(&'a str, &'a [(&'a str, &'a str)])],
34 &'a [Expr],
35 )];
36 fn default_vars_factory(args: &DefaultVarsFactoryArgs) -> EvaluateResultValue {
37 let props = args
38 .iter()
39 .map(|(key, values, nested_values, types_values)| match values {
40 DefaultVarsFactoryValue::Simple(value) => {
41 create_key_value_prop(key, create_string_expr(value))
42 },
43 DefaultVarsFactoryValue::Nested(values) => {
44 let mut props = values
45 .iter()
46 .map(|(key, value)| create_key_value_prop(key, create_string_expr(value)))
47 .collect::<Vec<PropOrSpread>>();
48
49 let nested_props = nested_values
50 .iter()
51 .map(|val| {
52 let props = val
53 .1
54 .iter()
55 .map(|(key, value)| create_key_value_prop(key, create_string_expr(value)))
56 .collect::<Vec<PropOrSpread>>();
57
58 create_key_value_prop(val.0, create_object_expression(props))
59 })
60 .collect::<Vec<PropOrSpread>>();
61
62 props.extend(nested_props);
63
64 let types_props = types_values
65 .iter()
66 .flat_map(|expr| expr.as_object().unwrap().props.clone())
67 .collect::<Vec<PropOrSpread>>();
68
69 props.extend(types_props);
70
71 create_nested_object_prop(key, props)
72 },
73 })
74 .collect::<Vec<PropOrSpread>>();
75
76 EvaluateResultValue::Expr(create_object_expression(props))
77 }
78
79 fn expected_css_result_factory(injected_styles: &[(&str, (&str, f64))]) -> InjectableStylesMap {
80 let mut expected_injected_styles = IndexMap::new();
81
82 for injected_style in injected_styles {
83 let (key, value) = injected_style;
84 expected_injected_styles.insert(
85 key.to_string(),
86 InjectableStyle::regular(value.0.to_string(), Some(value.1)),
87 );
88 }
89 expected_injected_styles
90 }
91
92 fn expected_js_result_factory(js_output: &[(&str, &str)]) -> FlatCompiledStyles {
93 let mut expected_injected_styles = IndexMap::new();
94
95 for (key, value) in js_output {
96 expected_injected_styles.insert(
97 key.to_string(),
98 Rc::new(FlatCompiledStylesValue::String(value.to_string())),
99 );
100 }
101
102 expected_injected_styles
103 }
104
105 #[test]
106 fn converts_set_of_vars_to_css() {
107 let export_id = "TestTheme.stylex.js//buttonTheme";
108 let class_name_prefix = 'x';
109
110 let default_vars = default_vars_factory(&[
111 (
112 "bgColor",
113 DefaultVarsFactoryValue::Nested(&[
114 ("default", "blue"),
115 ("@media (prefers-color-scheme: dark)", "lightblue"),
116 ("@media print", "white"),
117 ]),
118 &[],
119 &[],
120 ),
121 (
122 "bgColorDisabled",
123 DefaultVarsFactoryValue::Nested(&[
124 ("default", "grey"),
125 ("@media (prefers-color-scheme: dark)", "rgba(0, 0, 0, 0.8)"),
126 ]),
127 &[],
128 &[],
129 ),
130 (
131 "cornerRadius",
132 DefaultVarsFactoryValue::Simple("10px"),
133 &[],
134 &[],
135 ),
136 (
137 "fgColor",
138 DefaultVarsFactoryValue::Nested(&[("default", "pink")]),
139 &[],
140 &[],
141 ),
142 ]);
143
144 let mut state = Box::new(StateManager {
145 export_id: Some(export_id.to_string()),
146 ..StateManager::default()
147 });
148
149 let (js_output, css_output) = stylex_define_vars(&default_vars, &mut state);
150
151 assert_eq!(
152 js_output,
153 expected_js_result_factory(&[
154 (
155 "__varGroupHash__",
156 format!("{}{}", class_name_prefix, create_hash(export_id)).as_str()
157 ),
158 (
159 "bgColor",
160 format!(
161 "var(--{}{})",
162 class_name_prefix,
163 create_hash(format!("{}.bgColor", export_id).as_str())
164 )
165 .as_str()
166 ),
167 (
168 "bgColorDisabled",
169 format!(
170 "var(--{}{})",
171 class_name_prefix,
172 create_hash(format!("{}.bgColorDisabled", export_id).as_str())
173 )
174 .as_str()
175 ),
176 (
177 "cornerRadius",
178 format!(
179 "var(--{}{})",
180 class_name_prefix,
181 create_hash(format!("{}.cornerRadius", export_id).as_str())
182 )
183 .as_str()
184 ),
185 (
186 "fgColor",
187 format!(
188 "var(--{}{})",
189 class_name_prefix,
190 create_hash(format!("{}.fgColor", export_id).as_str())
191 )
192 .as_str()
193 ),
194 ])
195 );
196
197 assert_eq!(
198 css_output,
199 expected_css_result_factory(&[
200 (
201 "x568ih9",
202 (
203 ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
204 0.1
205 )
206 ),
207 (
208 "x568ih9-1lveb7",
209 (
210 "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
211 0.2
212 )
213 ),
214 (
215 "x568ih9-bdddrq",
216 ("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.2)
217 )
218 ])
219 )
220 }
221
222 #[test]
223 fn maintains_literal_var_names_in_css() {
224 let export_id = "TestTheme.stylex.js//buttonTheme";
225 let class_name_prefix = 'x';
226
227 let default_vars = default_vars_factory(&[
228 (
229 "--bgColor",
230 DefaultVarsFactoryValue::Nested(&[
231 ("default", "blue"),
232 ("@media (prefers-color-scheme: dark)", "lightblue"),
233 ("@media print", "white"),
234 ]),
235 &[],
236 &[],
237 ),
238 (
239 "--bgColorDisabled",
240 DefaultVarsFactoryValue::Nested(&[
241 ("default", "grey"),
242 ("@media (prefers-color-scheme: dark)", "rgba(0, 0, 0, 0.8)"),
243 ]),
244 &[],
245 &[],
246 ),
247 (
248 "--cornerRadius",
249 DefaultVarsFactoryValue::Simple("10px"),
250 &[],
251 &[],
252 ),
253 (
254 "--fgColor",
255 DefaultVarsFactoryValue::Nested(&[("default", "pink")]),
256 &[],
257 &[],
258 ),
259 ]);
260
261 let mut state = Box::new(StateManager {
262 export_id: Some(export_id.to_string()),
263 ..StateManager::default()
264 });
265
266 let (js_output, css_output) = stylex_define_vars(&default_vars, &mut state);
267
268 assert_eq!(
269 js_output,
270 expected_js_result_factory(&[
271 (
272 "__varGroupHash__",
273 format!("{}{}", class_name_prefix, create_hash(export_id)).as_str()
274 ),
275 ("--bgColor", "var(--bgColor)"),
276 ("--bgColorDisabled", "var(--bgColorDisabled)"),
277 ("--cornerRadius", "var(--cornerRadius)"),
278 ("--fgColor", "var(--fgColor)"),
279 ])
280 );
281
282 assert_eq!(
283 css_output,
284 expected_css_result_factory(&[
285 (
286 "x568ih9",
287 (
288 ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
289 0.1
290 )
291 ),
292 (
293 "x568ih9-1lveb7",
294 (
295 "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
296 0.2
297 )
298 ),
299 (
300 "x568ih9-bdddrq",
301 ("@media print{:root, .x568ih9{--bgColor:white;}}", 0.2)
302 )
303 ])
304 )
305 }
306
307 #[test]
308 fn converts_set_of_vars_with_nested_at_rules_to_css() {
309 let export_id = "TestTheme.stylex.js//buttonTheme";
310 let class_name_prefix = 'x';
311
312 let default_vars = default_vars_factory(&[
313 (
314 "bgColor",
315 DefaultVarsFactoryValue::Nested(&[("default", "blue"), ("@media print", "white")]),
316 &[(
317 "@media (prefers-color-scheme: dark)",
318 &[
319 ("default", "lightblue"),
320 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
321 ],
322 )],
323 &[],
324 ),
325 (
326 "bgColorDisabled",
327 DefaultVarsFactoryValue::Nested(&[]),
328 &[
329 (
330 "default",
331 &[
332 ("default", "grey"),
333 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
334 ],
335 ),
336 (
337 "@media (prefers-color-scheme: dark)",
338 &[
339 ("default", "rgba(0, 0, 0, 0.8)"),
340 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
341 ],
342 ),
343 ],
344 &[],
345 ),
346 (
347 "cornerRadius",
348 DefaultVarsFactoryValue::Simple("10px"),
349 &[],
350 &[],
351 ),
352 (
353 "fgColor",
354 DefaultVarsFactoryValue::Nested(&[("default", "pink")]),
355 &[],
356 &[],
357 ),
358 ]);
359
360 let mut state = Box::new(StateManager {
361 export_id: Some(export_id.to_string()),
362 ..StateManager::default()
363 });
364
365 let (js_output, css_output) = stylex_define_vars(&default_vars, &mut state);
366
367 assert_eq!(
368 js_output,
369 expected_js_result_factory(&[
370 (
371 "__varGroupHash__",
372 format!("{}{}", class_name_prefix, create_hash(export_id)).as_str()
373 ),
374 (
375 "bgColor",
376 format!(
377 "var(--{}{})",
378 class_name_prefix,
379 create_hash(format!("{}.bgColor", export_id).as_str())
380 )
381 .as_str()
382 ),
383 (
384 "bgColorDisabled",
385 format!(
386 "var(--{}{})",
387 class_name_prefix,
388 create_hash(format!("{}.bgColorDisabled", export_id).as_str())
389 )
390 .as_str()
391 ),
392 (
393 "cornerRadius",
394 format!(
395 "var(--{}{})",
396 class_name_prefix,
397 create_hash(format!("{}.cornerRadius", export_id).as_str())
398 )
399 .as_str()
400 ),
401 (
402 "fgColor",
403 format!(
404 "var(--{}{})",
405 class_name_prefix,
406 create_hash(format!("{}.fgColor", export_id).as_str())
407 )
408 .as_str()
409 ),
410 ])
411 );
412
413 assert_eq!(
414 css_output,
415 expected_css_result_factory(&[
416 (
417 "x568ih9",
418 (
419 ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
420 0.1
421 )
422 ),
423 (
424 "x568ih9-1e6ryz3",
425 (
426 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
427 0.3
428 )
429 ),
430 (
431 "x568ih9-1lveb7",
432 (
433 "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
434 0.2
435 )
436 ),
437 (
438 "x568ih9-bdddrq",
439 ("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.2)
440 ),
441 (
442 "x568ih9-kpd015",
443 (
444 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
445 0.2
446 )
447 )
448 ])
449 )
450 }
451
452 #[test]
453 fn converts_set_of_vars_with_nested_at_rules_to_css_and_includes_key_in_variable_name_as_prefix_in_debug_mode()
454 {
455 let export_id = "TestTheme.stylex.js//buttonTheme";
456 let class_name_prefix = 'x';
457
458 let default_vars = default_vars_factory(&[
459 (
460 "bgColor",
461 DefaultVarsFactoryValue::Nested(&[("default", "blue"), ("@media print", "white")]),
462 &[(
463 "@media (prefers-color-scheme: dark)",
464 &[
465 ("default", "lightblue"),
466 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
467 ],
468 )],
469 &[],
470 ),
471 (
472 "bgColorDisabled",
473 DefaultVarsFactoryValue::Nested(&[]),
474 &[
475 (
476 "default",
477 &[
478 ("default", "grey"),
479 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
480 ],
481 ),
482 (
483 "@media (prefers-color-scheme: dark)",
484 &[
485 ("default", "rgba(0, 0, 0, 0.8)"),
486 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
487 ],
488 ),
489 ],
490 &[],
491 ),
492 (
493 "cornerRadius",
494 DefaultVarsFactoryValue::Simple("10px"),
495 &[],
496 &[],
497 ),
498 (
499 "fgColor",
500 DefaultVarsFactoryValue::Nested(&[("default", "pink")]),
501 &[],
502 &[],
503 ),
504 ]);
505
506 let mut state = Box::new(StateManager {
507 export_id: Some(export_id.to_string()),
508 options: StyleXStateOptions {
509 debug: true,
510 enable_debug_class_names: true,
511 ..StateManager::default().options
512 },
513 ..StateManager::default()
514 });
515
516 let (js_output, css_output) = stylex_define_vars(&default_vars, &mut state);
517
518 assert_eq!(
519 js_output,
520 expected_js_result_factory(&[
521 (
522 "__varGroupHash__",
523 format!("{}{}", class_name_prefix, create_hash(export_id)).as_str()
524 ),
525 (
526 "bgColor",
527 format!(
528 "var(--bgColor-{}{})",
529 class_name_prefix,
530 create_hash(format!("{}.bgColor", export_id).as_str())
531 )
532 .as_str()
533 ),
534 (
535 "bgColorDisabled",
536 format!(
537 "var(--bgColorDisabled-{}{})",
538 class_name_prefix,
539 create_hash(format!("{}.bgColorDisabled", export_id).as_str())
540 )
541 .as_str()
542 ),
543 (
544 "cornerRadius",
545 format!(
546 "var(--cornerRadius-{}{})",
547 class_name_prefix,
548 create_hash(format!("{}.cornerRadius", export_id).as_str())
549 )
550 .as_str()
551 ),
552 (
553 "fgColor",
554 format!(
555 "var(--fgColor-{}{})",
556 class_name_prefix,
557 create_hash(format!("{}.fgColor", export_id).as_str())
558 )
559 .as_str()
560 ),
561 ])
562 );
563
564 assert_eq!(
565 css_output,
566 expected_css_result_factory(&[
567 (
568 "x568ih9",
569 (
570 ":root, .x568ih9{--bgColor-xgck17p:blue;--bgColorDisabled-xpegid5:grey;--cornerRadius-xrqfjmn:10px;--fgColor-x4y59db:pink;}",
571 0.1
572 )
573 ),
574 (
575 "x568ih9-1e6ryz3",
576 (
577 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor-xgck17p:oklab(0.7 -0.3 -0.4);--bgColorDisabled-xpegid5:oklab(0.7 -0.3 -0.4);}}}",
578 0.3
579 )
580 ),
581 (
582 "x568ih9-1lveb7",
583 (
584 "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor-xgck17p:lightblue;--bgColorDisabled-xpegid5:rgba(0, 0, 0, 0.8);}}",
585 0.2
586 )
587 ),
588 (
589 "x568ih9-bdddrq",
590 (
591 "@media print{:root, .x568ih9{--bgColor-xgck17p:white;}}",
592 0.2
593 )
594 ),
595 (
596 "x568ih9-kpd015",
597 (
598 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--bgColorDisabled-xpegid5:oklab(0.7 -0.3 -0.4);}}",
599 0.2
600 )
601 )
602 ])
603 )
604 }
605
606 #[test]
607 fn converts_set_of_vars_with_nested_at_rules_to_css_and_does_not_include_key_prefix_in_debug_mode_with_debug_classnames_off()
608 {
609 let export_id = "TestTheme.stylex.js//buttonTheme";
610 let class_name_prefix = 'x';
611
612 let default_vars = default_vars_factory(&[
613 (
614 "bgColor",
615 DefaultVarsFactoryValue::Nested(&[("default", "blue"), ("@media print", "white")]),
616 &[(
617 "@media (prefers-color-scheme: dark)",
618 &[
619 ("default", "lightblue"),
620 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
621 ],
622 )],
623 &[],
624 ),
625 (
626 "bgColorDisabled",
627 DefaultVarsFactoryValue::Nested(&[]),
628 &[
629 (
630 "default",
631 &[
632 ("default", "grey"),
633 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
634 ],
635 ),
636 (
637 "@media (prefers-color-scheme: dark)",
638 &[
639 ("default", "rgba(0, 0, 0, 0.8)"),
640 ("@supports (color: oklab(0 0 0))", "oklab(0.7 -0.3 -0.4)"),
641 ],
642 ),
643 ],
644 &[],
645 ),
646 (
647 "cornerRadius",
648 DefaultVarsFactoryValue::Simple("10px"),
649 &[],
650 &[],
651 ),
652 (
653 "fgColor",
654 DefaultVarsFactoryValue::Nested(&[("default", "pink")]),
655 &[],
656 &[],
657 ),
658 ]);
659
660 let mut state = Box::new(StateManager {
661 export_id: Some(export_id.to_string()),
662 options: StyleXStateOptions {
663 debug: false,
664 enable_debug_class_names: false,
665 ..StateManager::default().options
666 },
667 ..StateManager::default()
668 });
669
670 let (js_output, css_output) = stylex_define_vars(&default_vars, &mut state);
671
672 assert_eq!(
673 js_output,
674 expected_js_result_factory(&[
675 (
676 "__varGroupHash__",
677 format!("{}{}", class_name_prefix, create_hash(export_id)).as_str()
678 ),
679 (
680 "bgColor",
681 format!(
682 "var(--{}{})",
683 class_name_prefix,
684 create_hash(format!("{}.bgColor", export_id).as_str())
685 )
686 .as_str()
687 ),
688 (
689 "bgColorDisabled",
690 format!(
691 "var(--{}{})",
692 class_name_prefix,
693 create_hash(format!("{}.bgColorDisabled", export_id).as_str())
694 )
695 .as_str()
696 ),
697 (
698 "cornerRadius",
699 format!(
700 "var(--{}{})",
701 class_name_prefix,
702 create_hash(format!("{}.cornerRadius", export_id).as_str())
703 )
704 .as_str()
705 ),
706 (
707 "fgColor",
708 format!(
709 "var(--{}{})",
710 class_name_prefix,
711 create_hash(format!("{}.fgColor", export_id).as_str())
712 )
713 .as_str()
714 ),
715 ])
716 );
717
718 assert_eq!(
719 css_output,
720 expected_css_result_factory(&[
721 (
722 "x568ih9",
723 (
724 ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
725 0.1
726 )
727 ),
728 (
729 "x568ih9-1e6ryz3",
730 (
731 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
732 0.3
733 )
734 ),
735 (
736 "x568ih9-1lveb7",
737 (
738 "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
739 0.2
740 )
741 ),
742 (
743 "x568ih9-bdddrq",
744 ("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.2)
745 ),
746 (
747 "x568ih9-kpd015",
748 (
749 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
750 0.2
751 )
752 )
753 ])
754 )
755 }
756
757 #[test]
758 fn converts_set_of_typed_vars_with_nested_at_rules_to_css() {
759 let export_id = "TestTheme.stylex.js//buttonTheme";
760 let class_name_prefix = 'x';
761
762 let types_fn = match get_types_fn().fn_ptr {
763 FunctionType::StylexFnsFactory(func) => func,
764 _ => unreachable!(),
765 };
766
767 let color_fn = types_fn("color".into());
768 let length_fn = types_fn("length".into());
769
770 let mut bg_color_map = IndexMap::new();
772
773 bg_color_map.insert(
774 "default".to_string(),
775 ValueWithDefault::String("blue".to_string()),
776 );
777
778 let mut bg_color_mq_map = IndexMap::new();
779
780 bg_color_mq_map.insert(
781 "default".to_string(),
782 ValueWithDefault::String("lightblue".to_string()),
783 );
784 bg_color_mq_map.insert(
785 "@supports (color: oklab(0 0 0))".to_string(),
786 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
787 );
788
789 bg_color_map.insert(
790 "@media (prefers-color-scheme: dark)".to_string(),
791 ValueWithDefault::Map(bg_color_mq_map),
792 );
793
794 bg_color_map.insert(
795 "@media print".to_string(),
796 ValueWithDefault::String("white".to_string()),
797 );
798 let mut bg_color_disabled_map = IndexMap::new();
802
803 let mut bg_color_disabled_default_map = IndexMap::new();
804
805 bg_color_disabled_default_map.insert(
806 "default".to_string(),
807 ValueWithDefault::String("grey".to_string()),
808 );
809
810 bg_color_disabled_default_map.insert(
811 "@supports (color: oklab(0 0 0))".to_string(),
812 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
813 );
814
815 bg_color_disabled_map.insert(
816 "default".to_string(),
817 ValueWithDefault::Map(bg_color_disabled_default_map),
818 );
819
820 let mut bg_color_disabled_mq_map = IndexMap::new();
821
822 bg_color_disabled_mq_map.insert(
823 "default".to_string(),
824 ValueWithDefault::String("rgba(0, 0, 0, 0.8)".to_string()),
825 );
826
827 bg_color_disabled_mq_map.insert(
828 "@supports (color: oklab(0 0 0))".to_string(),
829 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
830 );
831
832 bg_color_disabled_map.insert(
833 "@media (prefers-color-scheme: dark)".to_string(),
834 ValueWithDefault::Map(bg_color_disabled_mq_map),
835 );
836 let mut fg_color_map = IndexMap::new();
840
841 fg_color_map.insert(
842 "default".to_string(),
843 ValueWithDefault::String("pink".to_string()),
844 );
845
846 let bg_color = type_fabric(&color_fn, ValueWithDefault::Map(bg_color_map));
849 let bg_color_disabled = type_fabric(&color_fn, ValueWithDefault::Map(bg_color_disabled_map));
850
851 let corner_radius = type_fabric(&length_fn, ValueWithDefault::String("10px".to_string()));
852
853 let fg_color = type_fabric(&color_fn, ValueWithDefault::Map(fg_color_map));
854
855 let default_vars = default_vars_factory(&[
856 (
857 "bgColor",
858 DefaultVarsFactoryValue::Nested(&[]),
859 &[],
860 &[bg_color.into()],
861 ),
862 (
863 "bgColorDisabled",
864 DefaultVarsFactoryValue::Nested(&[]),
865 &[],
866 &[bg_color_disabled.into()],
867 ),
868 (
869 "cornerRadius",
870 DefaultVarsFactoryValue::Nested(&[]),
871 &[],
872 &[corner_radius.into()],
873 ),
874 (
875 "fgColor",
876 DefaultVarsFactoryValue::Nested(&[]),
877 &[],
878 &[fg_color.into()],
879 ),
880 ]);
881
882 let state = Box::<StateManager>::default();
883 let mut state = Box::new(StateManager {
884 export_id: Some(export_id.to_string()),
885 options: StyleXStateOptions {
886 class_name_prefix: class_name_prefix.to_string(),
887 ..state.options.clone()
888 },
889 ..*state
890 });
891
892 let (_, css_output) = stylex_define_vars(&default_vars, &mut state);
893
894 assert_eq!(
895 css_output,
896 expected_css_result_factory(&[
897 (
898 "x4y59db",
899 (
900 r#"@property --x4y59db { syntax: "<color>"; inherits: true; initial-value: pink }"#,
901 0.0
902 )
903 ),
904 (
905 "x568ih9",
906 (
907 ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
908 0.0
909 )
910 ),
911 (
912 "x568ih9-1e6ryz3",
913 (
914 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
915 0.3
916 )
917 ),
918 (
919 "x568ih9-1lveb7",
920 (
921 "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
922 0.0
923 )
924 ),
925 (
926 "x568ih9-bdddrq",
927 ("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.2)
928 ),
929 (
930 "x568ih9-kpd015",
931 (
932 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
933 0.0
934 )
935 ),
936 (
937 "xgck17p",
938 (
939 r#"@property --xgck17p { syntax: "<color>"; inherits: true; initial-value: blue }"#,
940 0.0
941 )
942 ),
943 (
944 "xpegid5",
945 (
946 r#"@property --xpegid5 { syntax: "<color>"; inherits: true; initial-value: grey }"#,
947 0.0
948 )
949 ),
950 (
951 "xrqfjmn",
952 (
953 r#"@property --xrqfjmn { syntax: "<length>"; inherits: true; initial-value: 10px }"#,
954 0.0
955 )
956 ),
957 (
958 "x4y59db",
959 (
960 r#"@property --x4y59db { syntax: "<color>"; inherits: true; initial-value: pink }"#,
961 0.0
962 )
963 ),
964 (
965 "x568ih9",
966 (
967 ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
968 0.1
969 )
970 ),
971 (
972 "x568ih9-1lveb7",
973 (
974 "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
975 0.2
976 )
977 ),
978 (
979 "x568ih9-1e6ryz3",
980 (
981 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
982 0.3
983 )
984 ),
985 (
986 "x568ih9-bdddrq",
987 ("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.2)
988 ),
989 (
990 "x568ih9-kpd015",
991 (
992 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
993 0.2
994 )
995 ),
996 ])
997 )
998 }
999
1000 #[test]
1001 fn preserves_names_of_literals_with_double_dash_prefix() {
1002 let export_id = "TestTheme.stylex.js//buttonTheme";
1003 let class_name_prefix = 'x';
1004
1005 let types_fn = match get_types_fn().fn_ptr {
1006 FunctionType::StylexFnsFactory(func) => func,
1007 _ => unreachable!(),
1008 };
1009
1010 let color_fn = types_fn("color".into());
1011 let length_fn = types_fn("length".into());
1012
1013 let mut bg_color_map = IndexMap::new();
1015
1016 bg_color_map.insert(
1017 "default".to_string(),
1018 ValueWithDefault::String("blue".to_string()),
1019 );
1020
1021 let mut bg_color_mq_map = IndexMap::new();
1022
1023 bg_color_mq_map.insert(
1024 "default".to_string(),
1025 ValueWithDefault::String("lightblue".to_string()),
1026 );
1027 bg_color_mq_map.insert(
1028 "@supports (color: oklab(0 0 0))".to_string(),
1029 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
1030 );
1031
1032 bg_color_map.insert(
1033 "@media (prefers-color-scheme: dark)".to_string(),
1034 ValueWithDefault::Map(bg_color_mq_map),
1035 );
1036
1037 bg_color_map.insert(
1038 "@media print".to_string(),
1039 ValueWithDefault::String("white".to_string()),
1040 );
1041 let mut bg_color_disabled_map = IndexMap::new();
1045
1046 let mut bg_color_disabled_default_map = IndexMap::new();
1047
1048 bg_color_disabled_default_map.insert(
1049 "default".to_string(),
1050 ValueWithDefault::String("grey".to_string()),
1051 );
1052
1053 bg_color_disabled_default_map.insert(
1054 "@supports (color: oklab(0 0 0))".to_string(),
1055 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
1056 );
1057
1058 bg_color_disabled_map.insert(
1059 "default".to_string(),
1060 ValueWithDefault::Map(bg_color_disabled_default_map),
1061 );
1062
1063 let mut bg_color_disabled_mq_map = IndexMap::new();
1064
1065 bg_color_disabled_mq_map.insert(
1066 "default".to_string(),
1067 ValueWithDefault::String("rgba(0, 0, 0, 0.8)".to_string()),
1068 );
1069
1070 bg_color_disabled_mq_map.insert(
1071 "@supports (color: oklab(0 0 0))".to_string(),
1072 ValueWithDefault::String("oklab(0.7 -0.3 -0.4)".to_string()),
1073 );
1074
1075 bg_color_disabled_map.insert(
1076 "@media (prefers-color-scheme: dark)".to_string(),
1077 ValueWithDefault::Map(bg_color_disabled_mq_map),
1078 );
1079 let mut fg_color_map = IndexMap::new();
1083
1084 fg_color_map.insert(
1085 "default".to_string(),
1086 ValueWithDefault::String("pink".to_string()),
1087 );
1088
1089 let bg_color = type_fabric(&color_fn, ValueWithDefault::Map(bg_color_map));
1092 let bg_color_disabled = type_fabric(&color_fn, ValueWithDefault::Map(bg_color_disabled_map));
1093
1094 let corner_radius = type_fabric(&length_fn, ValueWithDefault::String("10px".to_string()));
1095
1096 let fg_color = type_fabric(&color_fn, ValueWithDefault::Map(fg_color_map));
1097
1098 let default_vars = default_vars_factory(&[
1099 (
1100 "--bgColor",
1101 DefaultVarsFactoryValue::Nested(&[]),
1102 &[],
1103 &[bg_color.into()],
1104 ),
1105 (
1106 "--bgColorDisabled",
1107 DefaultVarsFactoryValue::Nested(&[]),
1108 &[],
1109 &[bg_color_disabled.into()],
1110 ),
1111 (
1112 "--cornerRadius",
1113 DefaultVarsFactoryValue::Nested(&[]),
1114 &[],
1115 &[corner_radius.into()],
1116 ),
1117 (
1118 "--fgColor",
1119 DefaultVarsFactoryValue::Nested(&[]),
1120 &[],
1121 &[fg_color.into()],
1122 ),
1123 ]);
1124
1125 let state = Box::<StateManager>::default();
1126 let mut state = Box::new(StateManager {
1127 export_id: Some(export_id.to_string()),
1128 options: StyleXStateOptions {
1129 class_name_prefix: class_name_prefix.to_string(),
1130 ..state.options.clone()
1131 },
1132 ..*state
1133 });
1134
1135 let (_, css_output) = stylex_define_vars(&default_vars, &mut state);
1136
1137 assert_eq!(
1138 css_output,
1139 expected_css_result_factory(&[
1140 (
1141 "bgColor",
1142 (
1143 r#"@property --bgColor { syntax: "<color>"; inherits: true; initial-value: blue }"#,
1144 0.0
1145 )
1146 ),
1147 (
1148 "bgColorDisabled",
1149 (
1150 r#"@property --bgColorDisabled { syntax: "<color>"; inherits: true; initial-value: grey }"#,
1151 0.0
1152 )
1153 ),
1154 (
1155 "cornerRadius",
1156 (
1157 r#"@property --cornerRadius { syntax: "<length>"; inherits: true; initial-value: 10px }"#,
1158 0.0
1159 )
1160 ),
1161 (
1162 "fgColor",
1163 (
1164 r#"@property --fgColor { syntax: "<color>"; inherits: true; initial-value: pink }"#,
1165 0.0
1166 )
1167 ),
1168 (
1169 "x568ih9",
1170 (
1171 ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
1172 0.1
1173 )
1174 ),
1175 (
1176 "x568ih9-1e6ryz3",
1177 (
1178 "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:oklab(0.7 -0.3 -0.4);--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}}",
1179 0.3
1180 )
1181 ),
1182 (
1183 "x568ih9-1lveb7",
1184 (
1185 "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
1186 0.2
1187 )
1188 ),
1189 (
1190 "x568ih9-bdddrq",
1191 ("@media print{:root, .x568ih9{--bgColor:white;}}", 0.2)
1192 ),
1193 (
1194 "x568ih9-kpd015",
1195 (
1196 "@supports (color: oklab(0 0 0)){:root, .x568ih9{--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}",
1197 0.2
1198 )
1199 ),
1200 ])
1201 )
1202 }
1203
1204 fn type_fabric(
1205 func: &Rc<dyn Fn(ValueWithDefault) -> Expr>,
1206 types: ValueWithDefault,
1207 ) -> BaseCSSType {
1208 let result = func(types);
1209 let result_object = result.as_object();
1210 let css_type: BaseCSSType = result_object.unwrap().clone().into();
1211
1212 css_type
1213 }
1214}