handle styled.x(fn)

Author: quantizor

src/visitors/displayNameAndId.js

@@ -139,8 +139,7 @@ export default t => (path, state) => {
       ? isStyled(t)(path.node.tag, state)
       : isStyled(t)(path.node.callee, state) &&
         path.node.callee.property &&
-        path.node.callee.property.name !== 'withConfig' &&
-        t.isObjectExpression(path.node.arguments[0])
+        path.node.callee.property.name !== 'withConfig'
   ) {
     const displayName =
       useDisplayName(state) &&

test/__snapshots__/index.test.js.snap

@@ -170,10 +170,14 @@ styled.div.withConfig({
 })({
   color: red
 });
-const notStyled =
+const StyledFunctionForm =
 /*#__PURE__*/
-styled.div('')\`\`; // not transpiled by styled components but should add pure comment
-
+styled.div.withConfig({
+  displayName: \\"annotate-styled-calls-with-pure-comments__StyledFunctionForm\\",
+  componentId: \\"sc-6tnjs3-8\\"
+})(p => ({
+  color: p.color || 'red'
+}));
 const normalFunc = add(5, 3);"
 `;
 

test/fixtures/annotate-styled-calls-with-pure-comments/index.js

@@ -8,5 +8,5 @@ let Component
 Component = styled.div``
 const WrappedComponent = styled(Inner)``
 const StyledObjectForm = styled.div({ color: red })
-const notStyled = styled.div('')`` // not transpiled by styled components but should add pure comment
+const StyledFunctionForm = styled.div(p => ({ color: p.color || 'red' }))
 const normalFunc = add(5, 3)