Merge pull request #167 from styled-components/displayname-function-variant

add handling for styled.div(styleObject) syntax

Author: quantizor

src/index.js

@@ -7,6 +7,10 @@ import assignStyledRequired from './visitors/assignStyledRequired'
 export default function({ types: t }) {
   return {
     visitor: {
+      CallExpression(path, state) {
+        displayNameAndId(t)(path, state)
+        pureAnnotation(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,13 @@ 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'
+  ) {
     const displayName =
       useDisplayName(state) &&
       getDisplayName(t)(path, useFileName(state) && state)

src/visitors/pure.js

@@ -6,13 +6,13 @@ import { isStyled, isPureHelper } from '../utils/detectors'
 export default t => (path, state) => {
   if (usePureAnnotation(state)) {
     if (
-      isStyled(path.node, state) ||
-      isStyled(path.node.callee, state) ||
-      isPureHelper(path.node.callee, state)
+      isStyled(t)(path.node, state) ||
+      isStyled(t)(path.node.callee, state) ||
+      isPureHelper(t)(path.node.tag || path.node.callee, state)
     ) {
       if (
-        path.parent.type == 'VariableDeclarator' ||
-        path.parent.type == 'TaggedTemplateExpression'
+        path.parent.type === 'VariableDeclarator' ||
+        path.parent.type === 'TaggedTemplateExpression'
       ) {
         annotateAsPure(path)
       }

test/__snapshots__/index.test.js.snap

@@ -162,10 +162,22 @@ styled(Inner).withConfig({
   displayName: \\"annotate-styled-calls-with-pure-comments__WrappedComponent\\",
   componentId: \\"sc-6tnjs3-6\\"
 })([\\"\\"]);
-const notStyled =
+const StyledObjectForm =
 /*#__PURE__*/
-styled.div('')\`\`; // not transpiled by styled components but should add pure comment
-
+styled.div.withConfig({
+  displayName: \\"annotate-styled-calls-with-pure-comments__StyledObjectForm\\",
+  componentId: \\"sc-6tnjs3-7\\"
+})({
+  color: red
+});
+const StyledFunctionForm =
+/*#__PURE__*/
+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);"
 `;
 
@@ -389,7 +401,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`] = `

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

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

test/fixtures/transpile-template-literals-with-config/index.js

@@ -11,3 +11,7 @@ const NamedWithInterpolation = styled.div`
 const Wrapped = styled(Inner)`
   color: red;
 `
+
+const Foo = styled.div({
+  color: 'green',
+})