feat: support styled-components Foo.extend.attrs()`` (#4434)

* Support styled-components Foo.extend.attrs()``

* update snapshot

src/language-js/embed.js

@@ -371,7 +371,7 @@ function isStyledComponents(path) {
         // styled.foo``
         isStyledIdentifier(tag.object) ||
         // Component.extend``
-        (/^[A-Z]/.test(tag.object.name) && tag.property.name === "extend")
+        isStyledExtend(tag)
       );
 
     case "CallExpression":
@@ -379,9 +379,11 @@ function isStyledComponents(path) {
         // styled(Component)``
         isStyledIdentifier(tag.callee) ||
         (tag.callee.type === "MemberExpression" &&
-          // styled.foo.attr({})``
           ((tag.callee.object.type === "MemberExpression" &&
-            isStyledIdentifier(tag.callee.object.object)) ||
+            // styled.foo.attr({})``
+            (isStyledIdentifier(tag.callee.object.object) ||
+              // Component.extend.attr({)``
+              isStyledExtend(tag.callee.object))) ||
             // styled(Component).attr({})``
             (tag.callee.object.type === "CallExpression" &&
               isStyledIdentifier(tag.callee.object.callee))))
@@ -415,4 +417,8 @@ function isStyledIdentifier(node) {
   return node.type === "Identifier" && node.name === "styled";
 }
 
+function isStyledExtend(node) {
+  return /^[A-Z]/.test(node.object.name) && node.property.name === "extend";
+}
+
 module.exports = embed;

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

@@ -21,6 +21,10 @@ border-color : tomato
 
 \`;
 
+Button.extend.attr({})\`
+border-color : black;
+\`
+
 styled(ExistingComponent)\`
        color : papayawhip ; background-color: firebrick\`;
 
@@ -94,6 +98,10 @@ const TomatoButton = Button.extend\`
   border-color: tomato;
 \`;
 
+Button.extend.attr({})\`
+  border-color: black;
+\`;
+
 styled(ExistingComponent)\`
   color: papayawhip;
   background-color: firebrick;

tests/multiparser_js_css/styled-components.js

@@ -18,6 +18,10 @@ border-color : tomato
 
 `;
 
+Button.extend.attr({})`
+border-color : black;
+`
+
 styled(ExistingComponent)`
        color : papayawhip ; background-color: firebrick`;