fix(styled-components): fix displayName and ssr feature not working in some cases

packages/styled-components/transform/src/visitors/display_name_and_id.rs

@@ -266,63 +266,40 @@ impl VisitMut for DisplayNameAndId {
 
             Expr::Call(CallExpr {
                 callee: Callee::Expr(callee),
-                args,
                 ..
             }) => {
                 (
-                    // styled()
-                    self.state.borrow().is_styled(&*callee)
+                    // callee is styled.div
+                    self.state.borrow().is_styled(callee)
                         && get_property_as_ident(callee)
-                            .map(|v| v == "withConfig")
+                            .map(|v| v != "withConfig")
                             .unwrap_or(false)
                 ) || (
-                    // styled(x)({})
-                    self.state.borrow().is_styled(&*callee)
+                    // callee is styled(MyComponent)
+                    self.state.borrow().is_styled(callee)
                         && !get_callee(callee)
                             .map(|callee| callee.is_member())
                             .unwrap_or(false)
                 ) || (
-                    // styled(x).attrs()({})
+                    // callee is styled(MyComponent).attrs(...)
                     self.state.borrow().is_styled(callee)
                         && get_callee(callee)
-                            .map(|callee| {
-                                callee.is_member()
-                                    && get_property_as_ident(callee)
-                                        .map(|v| v == "withConfig")
-                                        .unwrap_or(false)
-                            })
+                            .and_then(get_property_as_ident)
+                            .map(|v| v != "withConfig")
                             .unwrap_or(false)
                 ) || (
-                    // styled(x).withConfig({})
-                    self.state.borrow().is_styled(&*callee)
+                    // callee is styled(MyComponent).withConfig({ ... }), and componentId or
+                    // displayName is not set
+                    self.state.borrow().is_styled(callee)
                         && get_callee(callee)
-                            .map(|callee| {
-                                callee.is_member()
-                                    && get_property_as_ident(callee)
-                                        .map(|v| v == "withConfig")
-                                        .unwrap_or(false)
-                                    && !args.is_empty()
-                                    && args[0].spread.is_none()
-                                    && match &*args[0].expr {
-                                        Expr::Object(first_arg) => {
-                                            !first_arg.props.iter().any(|prop| match prop {
-                                                PropOrSpread::Prop(prop) => {
-                                                    match get_prop_name(prop) {
-                                                        Some(PropName::Ident(prop_name)) => {
-                                                            matches!(
-                                                                &*prop_name.sym,
-                                                                "componentId" | "displayName"
-                                                            )
-                                                        }
-                                                        _ => false,
-                                                    }
-                                                }
-                                                _ => false,
-                                            })
-                                        }
-                                        _ => false,
-                                    }
-                            })
+                            .and_then(get_property_as_ident)
+                            .map(|v| v == "withConfig")
+                            .unwrap_or(false)
+                        && Expr::as_call(callee)
+                            .and_then(|with_config_call| with_config_call.args.get(0))
+                            .filter(|first_arg| first_arg.spread.is_none())
+                            .and_then(|first_arg| first_arg.expr.as_object())
+                            .map(|first_arg_obj| !already_has(first_arg_obj))
                             .unwrap_or(false)
                 )
             }

packages/styled-components/transform/src/visitors/mod.rs

@@ -1,4 +1,3 @@
-pub mod assign_style_required;
 pub mod display_name_and_id;
 pub mod minify;
 pub mod pure_annotation;

packages/styled-components/transform/tests/fixtures/add-identifier-and-display-name/output.js

@@ -35,23 +35,31 @@ const WrappedComponent3 = styled(Inner).withConfig({
 })({});
 const WrappedComponent4 = styled(Inner).attrs(()=>({
         something: 'else'
-    }))({});
+    })).withConfig({
+    displayName: "WrappedComponent4",
+    componentId: "sc-e0d5b7ad-8"
+})({});
 const WrappedComponent5 = styled.div.attrs(()=>({
         something: 'else'
-    }))({});
+    })).withConfig({
+    displayName: "WrappedComponent5",
+    componentId: "sc-e0d5b7ad-9"
+})({});
 const WrappedComponent6 = styled.div.attrs(()=>({
         something: 'else'
     })).withConfig({
     displayName: "WrappedComponent6",
-    componentId: "sc-e0d5b7ad-8"
+    componentId: "sc-e0d5b7ad-10"
 })``;
 const WrappedComponent7 = styled.div.withConfig({
     shouldForwardProp: ()=>{},
     displayName: "WrappedComponent7",
-    componentId: "sc-e0d5b7ad-9"
+    componentId: "sc-e0d5b7ad-11"
 })({});
 const WrappedComponent8 = styled.div.withConfig({
-    shouldForwardProp: ()=>{}
+    shouldForwardProp: ()=>{},
+    displayName: "WrappedComponent8",
+    componentId: "sc-e0d5b7ad-12"
 }).attrs(()=>({
         something: 'else'
     }))({});
@@ -60,5 +68,5 @@ const WrappedComponent9 = styled.div.attrs(()=>({
     })).withConfig({
     shouldForwardProp: ()=>{},
     displayName: "WrappedComponent9",
-    componentId: "sc-e0d5b7ad-10"
+    componentId: "sc-e0d5b7ad-13"
 })({});

packages/styled-components/transform/tests/fixtures/allow-chains-of-member-calls/config.json

@@ -0,0 +1,5 @@
+{
+  "ssr": false,
+  "fileName": false,
+  "transpileTemplateLiterals": false
+}

packages/styled-components/transform/tests/fixtures/css-declared-after-component/config.json

@@ -0,0 +1 @@
+{}

packages/styled-components/transform/tests/fixtures/.css-declared-after-component/output.js → packages/styled-components/transform/tests/fixtures/css-declared-after-component/output.js

@@ -2,11 +2,15 @@ import _styled from "styled-components";
 import React from "react";
 import { css } from "styled-components";
 export default function Example() {
-  return <_StyledDiv>oops</_StyledDiv>;
+    return <_StyledDiv>oops</_StyledDiv>;
 }
-const someCss = css(["color:red;"]);
-
+const someCss = css([
+    "color:red;"
+]);
 var _StyledDiv = _styled("div").withConfig({
-  displayName: "code___StyledDiv",
-  componentId: "sc-7mydya-0"
-})(["", ""], someCss);
+    displayName: "code___StyledDiv",
+    componentId: "sc-216c6228-0"
+})([
+    "",
+    ""
+], someCss);

packages/styled-components/transform/tests/fixtures/transpile-template-literals-without-config/config.json

@@ -0,0 +1,5 @@
+{
+  "ssr": false,
+  "displayName": false,
+  "minify": false
+}

packages/styled-components/transform/tests/fixtures/transpile-template-literals-without-config/output.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const Named = styled.div([
+    "\n  width: 100%;\n"
+]);
+const NamedWithInterpolation = styled.div([
+    "\n  color: ",
+    ";\n"
+], (color)=>props.color);
+const Wrapped = styled(Inner)([
+    "color: red;"
+]);

packages/styled-components/transform/tests/fixtures/use-directory-name/code.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+const Test = styled.div`color: red;`;
+const before = styled.div`color: blue;`;
+styled.div``;
+export default styled.button``;

packages/styled-components/transform/tests/fixtures/use-directory-name/config.json

@@ -0,0 +1,4 @@
+{
+  "meaninglessFileNames": ["code"],
+  "transpileTemplateLiterals": false
+}

packages/styled-components/transform/tests/fixtures/use-directory-name/output.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const Test = styled.div.withConfig({
+    displayName: "use-directory-name__Test",
+    componentId: "sc-a2611da4-0"
+})`color:red;`;
+const before = styled.div.withConfig({
+    displayName: "use-directory-name__before",
+    componentId: "sc-a2611da4-1"
+})`color:blue;`;
+styled.div.withConfig({
+    displayName: "use-directory-name",
+    componentId: "sc-a2611da4-2"
+})``;
+export default styled.button.withConfig({
+    displayName: "use-directory-name",
+    componentId: "sc-a2611da4-3"
+})``;