Fix styled transform in next-swc/emotion

Fix: #35525
vercel · Mar 23, 2022 · 8186d9d · 8186d9d
1 parent 72478c5
commit 8186d9d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 28 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,9 @@ 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,19 @@ 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;
+  }
+  box-shadow: -5px -5px 0 0 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
@@ -442,7 +442,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         )));
                                     }
                                     if let Some(cm) = self.create_sourcemap(expr.span.lo()) {
-                                        c.args.push(cm.as_arg());
+                                        expr.args.push(cm.as_arg());
                                     }
                                     c.args.push(
                                         Expr::Object(ObjectLit {
@@ -489,7 +489,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                             );
                                             if let Some(cm) = self.create_sourcemap(expr.span.lo())
                                             {
-                                                args.push(cm.as_arg());
+                                                expr.args.push(cm.as_arg());
                                             }
                                         }
                                         return CallExpr {
@@ -556,9 +556,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         }),
                                     )));
                                 }
-                                if let Some(cm) = self.create_sourcemap(call.span.lo()) {
-                                    callee.args.push(cm.as_arg());
-                                }
+
                                 callee.args.push(
                                     Expr::Object(ObjectLit {
                                         span: DUMMY_SP,
@@ -569,11 +567,19 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                 return Expr::Call(CallExpr {
                                     span: DUMMY_SP,
                                     callee: callee.as_callee(),
-                                    args: self
-                                        .create_args_from_tagged_tpl(&mut tagged_tpl.tpl)
-                                        .into_iter()
-                                        .map(|exp| exp.fold_children_with(self))
-                                        .collect(),
+                                    args: {
+                                        let mut args: Vec<ExprOrSpread> = self
+                                            .create_args_from_tagged_tpl(&mut tagged_tpl.tpl)
+                                            .into_iter()
+                                            .map(|exp| exp.fold_children_with(self))
+                                            .collect();
+                                        if let Some(cm) =
+                                            self.create_sourcemap(tagged_tpl.span.lo())
+                                        {
+                                            args.push(cm.as_arg());
+                                        }
+                                        args
+                                    },
                                     type_args: None,
                                 });
                             }
@@ -626,11 +632,13 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         }
                                         let mut args =
                                             self.create_args_from_tagged_tpl(&mut tagged_tpl.tpl);
+
                                         if let Some(cm) =
-                                            self.create_sourcemap(member_expr.span.lo())
+                                            self.create_sourcemap(tagged_tpl.span.lo())
                                         {
                                             args.push(cm.as_arg());
                                         }
+
                                         self.comments.add_pure_comment(member_expr.span.lo());
                                         return Expr::Call(CallExpr {
                                             span: DUMMY_SP,

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,9 @@ const SpanContainer = styled('span')({
   background: 'yellow',
 })
 
+export const DivContainerExtended = styled(DivContainer)``
+export const DivContainerExtended2 = styled(DivContainer)({})
+
 const Container = styled('button')`
   background: red;
   ${stylesInCallback}