diff --git a/src/multiparser.js b/src/multiparser.js index 3541d111..8c24a1ef 100644 --- a/src/multiparser.js +++ b/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": diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap index d5cbad9a..33079547 100644 --- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap +++ b/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; +\`; + `; diff --git a/tests/multiparser_js_css/styled-components.js b/tests/multiparser_js_css/styled-components.js index dae51edb..08372911 100644 --- a/tests/multiparser_js_css/styled-components.js +++ b/tests/multiparser_js_css/styled-components.js @@ -24,3 +24,6 @@ styled(ExistingComponent)` styled.button.attr({})` border : rebeccapurple`; + +styled(ExistingComponent).attr({})` +border : rebeccapurple`;