Fix emotion shouldForwardProp options breaks component selectors (#39390

)

fixes #38291



## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/with-emotion-swc/shared/styles.tsx

@@ -62,7 +62,9 @@ export const Pink = styled(Basic)({
   color: 'hotpink',
 })
 
-export const BasicExtended = styled(Basic)``
+export const BasicExtended = styled(Basic, {
+  shouldForwardProp: (propertyName: string) => !propertyName.startsWith('$'),
+})``
 
 export const ComponentSelectorsExtended = styled.div`
   ${BasicExtended} {

packages/next-swc/crates/emotion/src/lib.rs

@@ -480,13 +480,28 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                     if let Some(cm) = self.create_sourcemap(expr.span.lo()) {
                                         expr.args.push(cm.as_arg());
                                     }
-                                    c.args.push(
-                                        Expr::Object(ObjectLit {
-                                            span: DUMMY_SP,
-                                            props: args_props,
-                                        })
-                                        .as_arg(),
-                                    );
+                                    if let Some(ExprOrSpread { expr, .. }) = c.args.get_mut(1) {
+                                        if let Expr::Object(ObjectLit { props, .. }) = expr.as_mut()
+                                        {
+                                            props.extend(args_props);
+                                        } else {
+                                            c.args.push(
+                                                Expr::Object(ObjectLit {
+                                                    span: DUMMY_SP,
+                                                    props: args_props,
+                                                })
+                                                .as_arg(),
+                                            );
+                                        }
+                                    } else {
+                                        c.args.push(
+                                            Expr::Object(ObjectLit {
+                                                span: DUMMY_SP,
+                                                props: args_props,
+                                            })
+                                            .as_arg(),
+                                        );
+                                    }
                                 }
                             }
                         }
@@ -592,14 +607,27 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         }),
                                     )));
                                 }
-
-                                callee.args.push(
-                                    Expr::Object(ObjectLit {
-                                        span: DUMMY_SP,
-                                        props: object_props,
-                                    })
-                                    .as_arg(),
-                                );
+                                if let Some(ExprOrSpread { expr, .. }) = callee.args.get_mut(1) {
+                                    if let Expr::Object(ObjectLit { props, .. }) = expr.as_mut() {
+                                        props.extend(object_props);
+                                    } else {
+                                        callee.args.push(
+                                            Expr::Object(ObjectLit {
+                                                span: DUMMY_SP,
+                                                props: object_props,
+                                            })
+                                            .as_arg(),
+                                        );
+                                    }
+                                } else {
+                                    callee.args.push(
+                                        Expr::Object(ObjectLit {
+                                            span: DUMMY_SP,
+                                            props: object_props,
+                                        })
+                                        .as_arg(),
+                                    );
+                                }
                                 return Expr::Call(CallExpr {
                                     span: DUMMY_SP,
                                     callee: callee.as_callee(),

packages/next-swc/crates/emotion/tests/fixture/css-in-callback/input.tsx

@@ -28,6 +28,12 @@ const DivContainer2 = styled.div`
   background: red;
 `
 
+const ContainerWithOptions = styled('div', {
+  shouldForwardProp: (propertyName: string) => !propertyName.startsWith('$'),
+})`
+  color: hotpink;
+`
+
 const SpanContainer = styled('span')({
   background: 'yellow',
 })