Fix formatting styled(Foo).attrs(...)`` (#3073)

src/multiparser.js

@@ -430,10 +430,13 @@ function isStyledComponents(path) {
       return (
         // styled(Component)``
         isStyledIdentifier(tag.callee) ||
-        // styled.foo.attr({})``
         (tag.callee.type === "MemberExpression" &&
-          tag.callee.object.type === "MemberExpression" &&
-          isStyledIdentifier(tag.callee.object.object))
+          // styled.foo.attr({})``
+          ((tag.callee.object.type === "MemberExpression" &&
+            isStyledIdentifier(tag.callee.object.object)) ||
+            // styled(Component).attr({})``
+            (tag.callee.object.type === "CallExpression" &&
+              isStyledIdentifier(tag.callee.object.callee))))
       );
 
     case "Identifier":

tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap

@@ -27,6 +27,9 @@ styled(ExistingComponent)\`
 
 styled.button.attr({})\`
 border : rebeccapurple\`;
+
+styled(ExistingComponent).attr({})\`
+border : rebeccapurple\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const ListItem = styled.li\`\`;
 
@@ -57,4 +60,8 @@ styled.button.attr({})\`
   border: rebeccapurple;
 \`;
 
+styled(ExistingComponent).attr({})\`
+  border: rebeccapurple;
+\`;
+
 `;

tests/multiparser_js_css/styled-components.js

@@ -24,3 +24,6 @@ styled(ExistingComponent)`
 
 styled.button.attr({})`
 border : rebeccapurple`;
+
+styled(ExistingComponent).attr({})`
+border : rebeccapurple`;