run display name pass after css prop

vercel · Jun 21, 2022 · e8bcfc4 · e8bcfc4
1 parent 17645e4
commit e8bcfc4
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 51 deletions.
diff --git a/packages/next-swc/crates/styled_components/src/lib.rs b/packages/next-swc/crates/styled_components/src/lib.rs
@@ -80,10 +80,10 @@ pub fn styled_components(
 
     chain!(
         analyzer(config.clone(), state.clone()),
-        display_name_and_id(file_name, src_file_hash, config.clone(), state),
         Optional {
             enabled: config.css_prop,
-            visitor: transpile_css_prop()
-        }
+            visitor: transpile_css_prop(state.clone())
+        },
+        display_name_and_id(file_name, src_file_hash, config.clone(), state)
     )
 }
diff --git a/packages/next-swc/crates/styled_components/src/utils/mod.rs b/packages/next-swc/crates/styled_components/src/utils/mod.rs
@@ -208,7 +208,7 @@ impl State {
         false
     }
 
-    fn import_local_name(&self, name: &str, cache_identifier: Option<&Ident>) -> Option<Id> {
+    pub(crate) fn import_local_name(&self, name: &str, cache_identifier: Option<&Ident>) -> Option<Id> {
         if name == "default" {
             if let Some(cached) = self.imported_local_name.clone() {
                 return Some(cached);
@@ -249,6 +249,10 @@ impl State {
         name
     }
 
+    pub(crate) fn set_import_name(&mut self, id: Id) {
+        self.imported_local_name = Some(id);
+    }
+
     fn is_helper(&self, e: &Expr) -> bool {
         self.is_create_global_style_helper(e)
             || self.is_css_helper(e)

diff --git a/packages/next-swc/crates/styled_components/src/visitors/display_name_and_id.rs b/packages/next-swc/crates/styled_components/src/visitors/display_name_and_id.rs
@@ -337,20 +337,10 @@ impl VisitMut for DisplayNameAndId {
             None
         };
 
-        let display_name = if self.config.display_name {
-            Some(self.get_display_name(expr))
-        } else {
-            None
-        };
-
+        let display_name = self.config.display_name.then(||self.get_display_name(expr));
         trace!("display_name: {:?}", display_name);
 
-        let component_id = if self.config.ssr {
-            Some(self.get_component_id().into())
-        } else {
-            None
-        };
-
+        let component_id = self.config.ssr.then(|| self.get_component_id().into());
         trace!("component_id: {:?}", display_name);
 
         self.add_config(

diff --git a/packages/next-swc/crates/styled_components/src/visitors/transpile_css_prop/transpile.rs b/packages/next-swc/crates/styled_components/src/visitors/transpile_css_prop/transpile.rs
@@ -1,7 +1,10 @@
 //! Port of https://github.com/styled-components/babel-plugin-styled-components/blob/a20c3033508677695953e7a434de4746168eeb4e/src/visitors/transpileCssProp.js
 
+use std::cell::RefCell;
+use std::rc::Rc;
 use std::{borrow::Cow, collections::HashMap};
 
+use crate::State;
 use inflector::Inflector;
 use once_cell::sync::Lazy;
 use regex::Regex;
@@ -24,12 +27,17 @@ use super::top_level_binding_collector::collect_top_level_decls;
 static TAG_NAME_REGEX: Lazy<Regex> =
     Lazy::new(|| Regex::new("^[a-z][a-z\\d]*(\\-[a-z][a-z\\d]*)?$").unwrap());
 
-pub fn transpile_css_prop() -> impl Fold + VisitMut {
-    as_folder(TranspileCssProp::default())
+pub fn transpile_css_prop(state: Rc<RefCell<State>>) -> impl Fold + VisitMut {
+    as_folder(TranspileCssProp {
+        state,
+        ..Default::default()
+    })
 }
 
 #[derive(Default)]
 struct TranspileCssProp {
+    state: Rc<RefCell<State>>,
+
     import_name: Option<Ident>,
     injected_nodes: Vec<Stmt>,
     interleaved_injections: AHashMap<Id, Vec<Stmt>>,
@@ -69,10 +77,18 @@ impl VisitMut for TranspileCssProp {
                         continue;
                     }
 
-                    let import_name = self
-                        .import_name
-                        .get_or_insert_with(|| private_ident!("_styled"))
-                        .clone();
+                    let import_name = if let Some(ident) = self
+                        .state
+                        .borrow()
+                        .import_local_name("default", None)
+                        .map(Ident::from)
+                    {
+                        ident
+                    } else {
+                        self.import_name
+                            .get_or_insert_with(|| private_ident!("_styled"))
+                            .clone()
+                    };
 
                     let name = get_name_ident(&elem.opening.name);
                     let id_sym = name.sym.to_class_case();
@@ -349,6 +365,7 @@ impl VisitMut for TranspileCssProp {
         self.top_level_decls = None;
 
         if let Some(import_name) = self.import_name.take() {
+            self.state.borrow_mut().set_import_name(import_name.to_id());
             let specifier = ImportSpecifier::Default(ImportDefaultSpecifier {
                 span: DUMMY_SP,
                 local: import_name,

diff --git a/...t-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js b/...t-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js
@@ -1,4 +1,3 @@
-import _styled from "styled-components";
 import styled from 'styled-components';
 import SomeComponent from '../SomeComponentPath';
 const { SomeOtherComponent  } = require('../SomeOtherComponentPath');
@@ -90,25 +89,40 @@ const Thing3 = styled.div.withConfig({
 })`
   color: blue;
 `;
-var _StyledThing6 = _styled(Thing3)((p)=>({
+var _StyledThing6 = styled(Thing3).withConfig({
+    displayName: "code___StyledThing6",
+    componentId: "sc-867225be-3"
+})((p)=>({
         [p.$_css19]: {
             color: 'red'
         }
     }));
-var _StyledThing5 = _styled(Thing3)((p)=>({
+var _StyledThing5 = styled(Thing3).withConfig({
+    displayName: "code___StyledThing5",
+    componentId: "sc-867225be-4"
+})((p)=>({
         [p.$_css18]: {
             color: 'red'
         }
     }));
-var _StyledThing4 = _styled(Thing3)((p)=>({
+var _StyledThing4 = styled(Thing3).withConfig({
+    displayName: "code___StyledThing4",
+    componentId: "sc-867225be-5"
+})((p)=>({
         [p.$_css17]: {
             color: 'red'
         }
     }));
-var _StyledThing3 = _styled(Thing3)((p)=>({
+var _StyledThing3 = styled(Thing3).withConfig({
+    displayName: "code___StyledThing3",
+    componentId: "sc-867225be-6"
+})((p)=>({
         color: p.$_css16
     }));
-var _StyledThing = _styled(Thing3)`color: red;`;
+var _StyledThing = styled(Thing3).withConfig({
+    displayName: "code___StyledThing",
+    componentId: "sc-867225be-7"
+})`color: red;`;
 const EarlyUsageComponent2 = (p)=><_StyledThing2 />;
 function Thing4(props1) {
     return <div {...props1}/>;
@@ -165,42 +179,102 @@ const ObjectPropWithSpread = ()=>{
         bottom: '-100px'
     } : {}}/>;
 };
-var _StyledSomeComponent = _styled(SomeComponent)`color: red;`;
-var _StyledSomeOtherComponent = _styled(SomeOtherComponent)`color: red;`;
-var _StyledThing2 = _styled(Thing4)`color: red;`;
-var _StyledP = _styled("p")`flex: 1;`;
-var _StyledP2 = _styled("p")`
+var _StyledSomeComponent = styled(SomeComponent).withConfig({
+    displayName: "code___StyledSomeComponent",
+    componentId: "sc-867225be-8"
+})`color: red;`;
+var _StyledSomeOtherComponent = styled(SomeOtherComponent).withConfig({
+    displayName: "code___StyledSomeOtherComponent",
+    componentId: "sc-867225be-9"
+})`color: red;`;
+var _StyledThing2 = styled(Thing4).withConfig({
+    displayName: "code___StyledThing2",
+    componentId: "sc-867225be-10"
+})`color: red;`;
+var _StyledP = styled("p").withConfig({
+    displayName: "code___StyledP",
+    componentId: "sc-867225be-11"
+})`flex: 1;`;
+var _StyledP2 = styled("p").withConfig({
+    displayName: "code___StyledP2",
+    componentId: "sc-867225be-12"
+})`
       flex: 1;
     `;
-var _StyledP3 = _styled("p")({
+var _StyledP3 = styled("p").withConfig({
+    displayName: "code___StyledP3",
+    componentId: "sc-867225be-13"
+})({
     color: 'blue'
 });
-var _StyledP4 = _styled("p")`flex: 1;`;
-var _StyledP5 = _styled("p")`
+var _StyledP4 = styled("p").withConfig({
+    displayName: "code___StyledP4",
+    componentId: "sc-867225be-14"
+})`flex: 1;`;
+var _StyledP5 = styled("p").withConfig({
+    displayName: "code___StyledP5",
+    componentId: "sc-867225be-15"
+})`
       color: blue;
     `;
-var _StyledParagraph = _styled(Paragraph)`flex: 1`;
-var _StyledP6 = _styled("p")`${(p)=>p.$_css}`;
-var _StyledP7 = _styled("p")`
+var _StyledParagraph = styled(Paragraph).withConfig({
+    displayName: "code___StyledParagraph",
+    componentId: "sc-867225be-16"
+})`flex: 1`;
+var _StyledP6 = styled("p").withConfig({
+    displayName: "code___StyledP6",
+    componentId: "sc-867225be-17"
+})`${(p)=>p.$_css}`;
+var _StyledP7 = styled("p").withConfig({
+    displayName: "code___StyledP7",
+    componentId: "sc-867225be-18"
+})`
       background: ${(p)=>p.$_css2};
     `;
-var _StyledP8 = _styled("p")`
+var _StyledP8 = styled("p").withConfig({
+    displayName: "code___StyledP8",
+    componentId: "sc-867225be-19"
+})`
       color: ${(props1)=>props1.theme.a};
     `;
-var _StyledP9 = _styled("p")`
+var _StyledP9 = styled("p").withConfig({
+    displayName: "code___StyledP9",
+    componentId: "sc-867225be-20"
+})`
       border-radius: ${radius}px;
     `;
-var _StyledP10 = _styled("p")`
+var _StyledP10 = styled("p").withConfig({
+    displayName: "code___StyledP10",
+    componentId: "sc-867225be-21"
+})`
       color: ${(p)=>p.$_css3};
     `;
-var _StyledP11 = _styled("p")`
+var _StyledP11 = styled("p").withConfig({
+    displayName: "code___StyledP11",
+    componentId: "sc-867225be-22"
+})`
       color: ${(props1)=>props1.theme.color};
     `;
-var _StyledButtonGhost = _styled(Button.Ghost)`flex: 1`;
-var _StyledButtonGhostNew = _styled(Button.Ghost.New)`flex: 1`;
-var _StyledButtonGhost2 = _styled(button.ghost)`flex: 1`;
-var _StyledButtonGhost3 = _styled("button-ghost")`flex: 1`;
-var _StyledP12 = _styled("p")((p)=>({
+var _StyledButtonGhost = styled(Button.Ghost).withConfig({
+    displayName: "code___StyledButtonGhost",
+    componentId: "sc-867225be-23"
+})`flex: 1`;
+var _StyledButtonGhostNew = styled(Button.Ghost.New).withConfig({
+    displayName: "code___StyledButtonGhostNew",
+    componentId: "sc-867225be-24"
+})`flex: 1`;
+var _StyledButtonGhost2 = styled(button.ghost).withConfig({
+    displayName: "code___StyledButtonGhost2",
+    componentId: "sc-867225be-25"
+})`flex: 1`;
+var _StyledButtonGhost3 = styled("button-ghost").withConfig({
+    displayName: "code___StyledButtonGhost3",
+    componentId: "sc-867225be-26"
+})`flex: 1`;
+var _StyledP12 = styled("p").withConfig({
+    displayName: "code___StyledP12",
+    componentId: "sc-867225be-27"
+})((p)=>({
         background: p.$_css4,
         color: p.$_css5,
         textAlign: 'left',
@@ -211,7 +285,10 @@ var _StyledP12 = _styled("p")((p)=>({
             content: p.$_css7
         }
     }));
-var _StyledP13 = _styled("p")((p)=>({
+var _StyledP13 = styled("p").withConfig({
+    displayName: "code___StyledP13",
+    componentId: "sc-867225be-28"
+})((p)=>({
         ...{
             '::before': {
                 content: p.$_css8
@@ -237,10 +314,16 @@ var _StyledP13 = _styled("p")((p)=>({
             content: p.$_css14
         }
     }));
-var _StyledP14 = _styled("p")((p)=>({
+var _StyledP14 = styled("p").withConfig({
+    displayName: "code___StyledP14",
+    componentId: "sc-867225be-29"
+})((p)=>({
         color: p.$_css15
     }));
-var _StyledDiv = _styled("div")((p)=>({
+var _StyledDiv = styled("div").withConfig({
+    displayName: "code___StyledDiv",
+    componentId: "sc-867225be-30"
+})((p)=>({
         ...p.$_css20,
         ...p.$_css21
     }));