annotate object-form styled component usage with displayName

Author: quantizor

src/index.js

@@ -7,6 +7,9 @@ import assignStyledRequired from './visitors/assignStyledRequired'
 export default function({ types: t }) {
   return {
     visitor: {
+      CallExpression(path, state) {
+        displayNameAndId(t)(path, state)
+      },
       TaggedTemplateExpression(path, state) {
         minify(t)(path, state)
         displayNameAndId(t)(path, state)

src/visitors/displayNameAndId.js

@@ -29,11 +29,23 @@ const addConfig = t => (path, displayName, componentId) => {
     )
   }
 
-  // Replace x`...` with x.withConfig({ })`...`
-  path.node.tag = t.callExpression(
-    t.memberExpression(path.node.tag, t.identifier('withConfig')),
-    [t.objectExpression(withConfigProps)]
-  )
+  if (path.node.tag) {
+    // Replace x`...` with x.withConfig({ })`...`
+    path.node.tag = t.callExpression(
+      t.memberExpression(path.node.tag, t.identifier('withConfig')),
+      [t.objectExpression(withConfigProps)]
+    )
+  } else {
+    path.replaceWith(
+      t.callExpression(
+        t.callExpression(
+          t.memberExpression(path.node.callee, t.identifier('withConfig')),
+          [t.objectExpression(withConfigProps)]
+        ),
+        path.node.arguments
+      )
+    )
+  }
 }
 
 const getBlockName = file => {
@@ -122,7 +134,14 @@ const getComponentId = state => {
 }
 
 export default t => (path, state) => {
-  if (isStyled(t)(path.node.tag, state)) {
+  if (
+    path.node.tag
+      ? 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])
+  ) {
     const displayName =
       useDisplayName(state) &&
       getDisplayName(t)(path, useFileName(state) && state)

test/__snapshots__/index.test.js.snap

@@ -389,7 +389,13 @@ var NamedWithInterpolation = _styledComponents.default.div.withConfig({
 
 var Wrapped = (0, _styledComponents.default)(Inner).withConfig({
   displayName: \\"transpile-template-literals-with-config__Wrapped\\"
-})([\\"\\\\n  color: red;\\\\n\\"]);"
+})([\\"\\\\n  color: red;\\\\n\\"]);
+
+var Foo = _styledComponents.default.div.withConfig({
+  displayName: \\"transpile-template-literals-with-config__Foo\\"
+})({
+  color: 'green'
+});"
 `;
 
 exports[`fixtures should transpile template literals without config 1`] = `