diff --git a/src/clean-ast.js b/src/clean-ast.js index 577bdde4..257079d8 100644 --- a/src/clean-ast.js +++ b/src/clean-ast.js @@ -163,7 +163,8 @@ function massageAST(ast) { (ast.tag.type === "Identifier" && (ast.tag.name === "gql" || ast.tag.name === "graphql" || - ast.tag.name === "css"))) + ast.tag.name === "css")) || + (ast.tag.type === "CallExpression" && ast.tag.callee.name === "styled")) ) { newObj.quasi.quasis.forEach(quasi => delete quasi.value); } diff --git a/src/multiparser.js b/src/multiparser.js index de16edbb..2e5af546 100644 --- a/src/multiparser.js +++ b/src/multiparser.js @@ -292,6 +292,7 @@ function isStyledJsx(path) { /** * Template literal in these contexts: * styled.button`color: red` + * styled(Component)`color: red` * Foo.extend`color: red` * css`color: red` * keyframes`0% { opacity: 0; }` @@ -306,6 +307,9 @@ function isStyledComponents(path) { (parent.tag.object.name === "styled" || (/^[A-Z]/.test(parent.tag.object.name) && parent.tag.property.name === "extend"))) || + (parent.tag.type === "CallExpression" && + parent.tag.callee.type === "Identifier" && + parent.tag.callee.name === "styled") || (parent.tag.type === "Identifier" && parent.tag.name === "css")) ); } diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap index 121bea88..ec447f68 100644 --- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap +++ b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap @@ -14,6 +14,9 @@ border-color : tomato ; \`; + +styled(ExistingComponent)\` + color : papayawhip ; background-color: firebrick\`; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ const Button = styled.button\` color: palevioletred; @@ -27,4 +30,9 @@ const TomatoButton = Button.extend\` border-color: tomato; \`; +styled(ExistingComponent)\` + color: papayawhip; + background-color: firebrick; +\`; + `; diff --git a/tests/multiparser_js_css/styled-components.js b/tests/multiparser_js_css/styled-components.js index f843e4df..ceeb7207 100644 --- a/tests/multiparser_js_css/styled-components.js +++ b/tests/multiparser_js_css/styled-components.js @@ -11,3 +11,6 @@ border-color : tomato ; `; + +styled(ExistingComponent)` + color : papayawhip ; background-color: firebrick`;