Repository: styled-components/babel-plugin-styled-components
Pull request #22 (2017-01-11 19:09:18)

Allow chains of member calls
This change loosens checks to detect 
```
styled.div.attrs().anotherCall()`width: 100%;`
``` 
as styled component. I think it's a good change anyway, but besides that it allows syntax proposed in 
styled-components/styled-components#365.


Patch:
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
index 4f5fde2..c8fcf41 100644
--- a/src/utils/detectors.js
+++ b/src/utils/detectors.js
@@ -14,10 +14,15 @@ const importLocalName = (name, state) => {
 }
 
 export const isStyled = (tag, state) => {
-  return (
-    (t.isMemberExpression(tag) && tag.object.name === importLocalName('default', state)) ||
-    (t.isCallExpression(tag) && tag.callee.name === importLocalName('default', state))
-  )
+  if (t.isCallExpression(tag) && t.isMemberExpression(tag.callee)) {
+    // styled.something()
+    return isStyled(tag.callee.object, state)
+  } else {
+    return (
+      (t.isMemberExpression(tag) && tag.object.name === importLocalName('default', state)) ||
+      (t.isCallExpression(tag) && tag.callee.name === importLocalName('default', state))
+    )
+  }
 }
 
 export const isHelper = (tag, state) => {
@@ -26,12 +31,3 @@ export const isHelper = (tag, state) => {
     tag.name === importLocalName('keyframes', state)
   )
 }
-
-export const isConfiguredStyled = (tag, state) => {
-  return (
-    t.isCallExpression(tag) &&
-    t.isMemberExpression(tag.callee) &&
-    tag.callee.property.name === 'withConfig' &&
-    isStyled(tag.callee.object, state)
-  )
-}
diff --git a/src/visitors/transpileTemplateLiterals.js b/src/visitors/transpileTemplateLiterals.js
index 0093b95..8b60844 100644
--- a/src/visitors/transpileTemplateLiterals.js
+++ b/src/visitors/transpileTemplateLiterals.js
@@ -1,12 +1,11 @@
 import * as t from 'babel-types'
 import { useTranspileTemplateLiterals } from '../utils/options'
-import { isStyled, isHelper, isConfiguredStyled } from '../utils/detectors'
+import { isStyled, isHelper } from '../utils/detectors'
 
 export default (path, state) => {
   if (useTranspileTemplateLiterals(state) && (
     isStyled(path.node.tag, state) ||
-    isHelper(path.node.tag, state) ||
-    isConfiguredStyled(path.node.tag, state)
+    isHelper(path.node.tag, state)
   )) {
     const { tag: callee, quasi: { quasis, expressions }} = path.node
     const values = t.arrayExpression(quasis.map(quasi => t.stringLiteral(quasi.value.cooked)))


Test patch:
diff --git a/test/fixtures/13-allow-chains-of-member-calls/.babelrc b/test/fixtures/13-allow-chains-of-member-calls/.babelrc
new file mode 100644
index 0000000..1d038d8
--- /dev/null
+++ b/test/fixtures/13-allow-chains-of-member-calls/.babelrc
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["../../../src", {
+      "ssr": false,
+      "fileName": false,
+      "transpileTemplateLiterals": false
+    }]
+  ]
+}
diff --git a/test/fixtures/13-allow-chains-of-member-calls/after.js b/test/fixtures/13-allow-chains-of-member-calls/after.js
new file mode 100644
index 0000000..ddfc01a
--- /dev/null
+++ b/test/fixtures/13-allow-chains-of-member-calls/after.js
@@ -0,0 +1,6 @@
+const WithAttrs = styled.div.attrs({ some: 'value' }).withConfig({
+  displayName: 'WithAttrs'
+})``;
+const WithAttrsWrapped = styled(Inner).attrs({ some: 'value' }).withConfig({
+  displayName: 'WithAttrsWrapped'
+})``;
diff --git a/test/fixtures/13-allow-chains-of-member-calls/before.js b/test/fixtures/13-allow-chains-of-member-calls/before.js
new file mode 100644
index 0000000..9b76709
--- /dev/null
+++ b/test/fixtures/13-allow-chains-of-member-calls/before.js
@@ -0,0 +1,2 @@
+const WithAttrs = styled.div.attrs({ some: 'value'})``
+const WithAttrsWrapped = styled(Inner).attrs({ some: 'value'})``