feat(style.props): allow to pass spread expressions

crates/stylex-shared/src/shared/utils/core/stylex_merge.rs

@@ -30,22 +30,16 @@ pub(crate) fn stylex_merge(
   let args = call
     .args
     .iter()
-    .flat_map(|arg| {
-      assert!(arg.spread.is_none(), "Spread not implemented yet");
-
-      match arg.expr.as_ref() {
-        Expr::Array(arr) => arr.elems.clone(),
-        _ => vec![Some(arg.clone())],
-      }
+    .flat_map(|arg| match arg.expr.as_ref() {
+      Expr::Array(arr) => arr.elems.clone(),
+      _ => vec![Some(arg.clone())],
     })
     .flatten()
     .collect::<Vec<ExprOrSpread>>();
 
   for arg in args.iter() {
     current_index += 1;
 
-    assert!(arg.spread.is_none(), "Spread not implemented yet");
-
     let arg = arg.expr.as_ref();
 
     match &arg {
@@ -179,8 +173,6 @@ pub(crate) fn stylex_merge(
     for arg_path in call.args.iter_mut() {
       index += 1;
 
-      assert!(arg_path.spread.is_none(), "Spread not implemented yet");
-
       let mut member_transform = MemberTransform {
         index,
         bail_out_index,

crates/stylex-shared/tests/__swc_snapshots__/tests/stylex_transform_stylex_props_test/stylex_props_call.rs/stylex_call_with_spread_operator.js

@@ -0,0 +1,28 @@
+//__stylex_metadata_start__[{"class_name":"x1e2nbdu","style":{"rtl":null,"ltr":".x1e2nbdu{color:red}"},"priority":3000},{"class_name":"x1t391ir","style":{"rtl":null,"ltr":".x1t391ir{background-color:blue}"},"priority":3000},{"class_name":"x1prwzq3","style":{"rtl":null,"ltr":".x1prwzq3{color:green}"},"priority":3000}]__stylex_metadata_end__
+import _inject from "@stylexjs/stylex/lib/stylex-inject";
+var _inject2 = _inject;
+import stylex from 'stylex';
+_inject2(".x1e2nbdu{color:red}", 3000);
+_inject2(".x1t391ir{background-color:blue}", 3000);
+_inject2(".x1prwzq3{color:green}", 3000);
+const styles = {
+    red: {
+        color: "x1e2nbdu",
+        $$css: true
+    },
+    blue: {
+        backgroundColor: "x1t391ir",
+        $$css: true
+    },
+    green: {
+        color: "x1prwzq3",
+        $$css: true
+    }
+};
+stylex.props(...[
+    styles.red,
+    styles.blue,
+    ...[
+        styles.green
+    ]
+]);

crates/stylex-shared/tests/__swc_snapshots__/tests/stylex_transform_stylex_props_test/stylex_props_call.rs/stylex_call_with_spread_operator_of_variable.js

@@ -0,0 +1,29 @@
+//__stylex_metadata_start__[{"class_name":"x1e2nbdu","style":{"rtl":null,"ltr":".x1e2nbdu{color:red}"},"priority":3000},{"class_name":"x1t391ir","style":{"rtl":null,"ltr":".x1t391ir{background-color:blue}"},"priority":3000},{"class_name":"x1prwzq3","style":{"rtl":null,"ltr":".x1prwzq3{color:green}"},"priority":3000}]__stylex_metadata_end__
+import _inject from "@stylexjs/stylex/lib/stylex-inject";
+var _inject2 = _inject;
+import stylex from 'stylex';
+_inject2(".x1e2nbdu{color:red}", 3000);
+_inject2(".x1t391ir{background-color:blue}", 3000);
+_inject2(".x1prwzq3{color:green}", 3000);
+const styles = {
+    red: {
+        color: "x1e2nbdu",
+        $$css: true
+    },
+    blue: {
+        backgroundColor: "x1t391ir",
+        $$css: true
+    },
+    green: {
+        color: "x1prwzq3",
+        $$css: true
+    }
+};
+const stylesArr = [
+    styles.red,
+    styles.blue,
+    ...[
+        styles.green
+    ]
+];
+stylex.props(...stylesArr);

crates/stylex-shared/tests/stylex_transform_stylex_props_test/stylex_props_call.rs

@@ -416,3 +416,62 @@ test!(
         stylex.props(styles.default);
     "#
 );
+
+test!(
+  Syntax::Typescript(TsSyntax {
+    tsx: true,
+    ..Default::default()
+  }),
+  |tr| StyleXTransform::new_test_force_runtime_injection(
+    tr.comments.clone(),
+    &PluginPass::default(),
+    None
+  ),
+  stylex_call_with_spread_operator,
+  r#"
+        import stylex from 'stylex';
+        const styles = stylex.create({
+            red: {
+                color: 'red',
+            },
+            blue: {
+                backgroundColor: 'blue',
+            },
+            green: {
+                color: 'green',
+            }
+        });
+        stylex.props(...[styles.red, styles.blue,...[styles.green]]);
+    "#
+);
+
+test!(
+  Syntax::Typescript(TsSyntax {
+    tsx: true,
+    ..Default::default()
+  }),
+  |tr| StyleXTransform::new_test_force_runtime_injection(
+    tr.comments.clone(),
+    &PluginPass::default(),
+    None
+  ),
+  stylex_call_with_spread_operator_of_variable,
+  r#"
+        import stylex from 'stylex';
+        const styles = stylex.create({
+            red: {
+                color: 'red',
+            },
+            blue: {
+                backgroundColor: 'blue',
+            },
+            green: {
+                color: 'green',
+            }
+        });
+
+        const stylesArr = [styles.red, styles.blue,...[styles.green]]
+
+        stylex.props(...stylesArr);
+    "#
+);