Fix styled transform in next-swc/emotion

Fix: #35525
vercel · Mar 22, 2022 · 7dbe62f · 7dbe62f
1 parent 860c97c
commit 7dbe62f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 26 deletions.
diff --git a/examples/with-emotion-swc/pages/index.js b/examples/with-emotion-swc/pages/index.js
@@ -1,5 +1,13 @@
 import { css } from '@emotion/react'
-import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
+import {
+  Animated,
+  Basic,
+  bounce,
+  Combined,
+  Pink,
+  BasicExtended,
+  ComponentSelectorsExtended,
+} from '../shared/styles'
 
 const Home = () => (
   <div
@@ -14,6 +22,10 @@ const Home = () => (
       With <code>:hover</code>.
     </Combined>
     <Animated animation={bounce}>Let's bounce.</Animated>
+
+    <ComponentSelectorsExtended>
+      <BasicExtended>Nested</BasicExtended>
+    </ComponentSelectorsExtended>
   </div>
 )
 

diff --git a/examples/with-emotion-swc/shared/styles.js b/examples/with-emotion-swc/shared/styles.js
@@ -58,10 +58,18 @@ export const Combined = styled.div`
   }
 `
 
-export const Pink = styled.div(basicStyles, {
+export const Pink = styled(Basic)({
   color: 'hotpink',
 })
 
+export const BasicExtended = styled(Basic)``
+
+export const ComponentSelectorsExtended = styled.div`
+  ${BasicExtended} {
+    color: green;
+  }
+`
+
 export const Animated = styled.div`
   ${basicStyles};
   ${hoverStyles};

diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs
@@ -427,7 +427,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                 self.import_packages.get(&i.to_id())
                             {
                                 if !c.args.is_empty() {
-                                    let mut args_props = Vec::with_capacity(2);
+                                    let mut args_props = Vec::with_capacity(3);
                                     args_props.push(self.create_label_prop_node("target"));
                                     self.comments.add_pure_comment(expr.span.lo());
                                     if self.options.auto_label.unwrap_or(false) {
@@ -442,7 +442,15 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         )));
                                     }
                                     if let Some(cm) = self.create_sourcemap(expr.span.lo()) {
-                                        c.args.push(cm.as_arg());
+                                        args_props.push(PropOrSpread::Prop(Box::new(
+                                            Prop::KeyValue(KeyValueProp {
+                                                key: PropName::Ident(Ident::new(
+                                                    "map".into(),
+                                                    DUMMY_SP,
+                                                )),
+                                                value: cm.into(),
+                                            }),
+                                        )));
                                     }
                                     c.args.push(
                                         Expr::Object(ObjectLit {
@@ -464,7 +472,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                             if let PackageMeta::Named(kind) = package {
                                 if matches!(kind, ExprKind::Styled) {
                                     if let MemberProp::Ident(prop) = &m.prop {
-                                        let mut args_props = Vec::with_capacity(2);
+                                        let mut args_props = Vec::with_capacity(3);
                                         args_props.push(self.create_label_prop_node("target"));
                                         let mut args = vec![prop.sym.as_ref().as_arg()];
                                         if !self.in_jsx_element {
@@ -480,17 +488,25 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                                     }),
                                                 )));
                                             }
+                                            if let Some(cm) = self.create_sourcemap(expr.span.lo())
+                                            {
+                                                args_props.push(PropOrSpread::Prop(Box::new(
+                                                    Prop::KeyValue(KeyValueProp {
+                                                        key: PropName::Ident(Ident::new(
+                                                            "map".into(),
+                                                            DUMMY_SP,
+                                                        )),
+                                                        value: cm.into(),
+                                                    }),
+                                                )));
+                                            }
                                             args.push(
                                                 Expr::Object(ObjectLit {
                                                     span: DUMMY_SP,
                                                     props: args_props,
                                                 })
                                                 .as_arg(),
                                             );
-                                            if let Some(cm) = self.create_sourcemap(expr.span.lo())
-                                            {
-                                                args.push(cm.as_arg());
-                                            }
                                         }
                                         return CallExpr {
                                             span: expr.span,
@@ -542,7 +558,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                 self.import_packages.get(&i.to_id())
                             {
                                 let mut callee = call.take();
-                                let mut object_props = Vec::with_capacity(2);
+                                let mut object_props = Vec::with_capacity(3);
                                 object_props.push(self.create_label_prop_node("target"));
                                 self.comments.add_pure_comment(callee.span.lo());
                                 if self.options.auto_label.unwrap_or(false) {
@@ -557,7 +573,15 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                     )));
                                 }
                                 if let Some(cm) = self.create_sourcemap(call.span.lo()) {
-                                    callee.args.push(cm.as_arg());
+                                    object_props.push(PropOrSpread::Prop(Box::new(
+                                        Prop::KeyValue(KeyValueProp {
+                                            key: PropName::Ident(Ident::new(
+                                                "map".into(),
+                                                DUMMY_SP,
+                                            )),
+                                            value: cm.into(),
+                                        }),
+                                    )));
                                 }
                                 callee.args.push(
                                     Expr::Object(ObjectLit {

diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx
@@ -32,6 +32,10 @@ const SpanContainer = styled('span')({
   background: 'yellow',
 })
 
+const ExtendedContainer = styled(SpanContainer)`
+  display: flex;
+`
+
 const Container = styled('button')`
   background: red;
   ${stylesInCallback}