Merge pull request #227 from styled-components/fix-ssr-object-style

fix ssr with styled HOC + object styles

Author: Max Stoiber

src/visitors/displayNameAndId.js

@@ -137,9 +137,18 @@ export default t => (path, 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'
+      : /* styled()`` */ (isStyled(t)(path.node.callee, state) &&
+          path.node.callee.property &&
+          path.node.callee.property.name !== 'withConfig') ||
+        // styled(x)({})
+        (isStyled(t)(path.node.callee, state) &&
+          !t.isMemberExpression(path.node.callee.callee)) ||
+        // styled(x).attrs()({})
+        (isStyled(t)(path.node.callee, state) &&
+          t.isMemberExpression(path.node.callee.callee) &&
+          path.node.callee.callee.property &&
+          path.node.callee.callee.property.name &&
+          path.node.callee.callee.property.name !== 'withConfig')
   ) {
     const displayName =
       useDisplayName(state) &&

test/fixtures/add-identifier-and-display-name/code.js

@@ -1,6 +1,11 @@
-const Test = styled.div`width: 100%;`;
-const Test2 = true ? styled.div`` : styled.div``;
+const Test = styled.div`
+  width: 100%;
+`
+const Test2 = true ? styled.div`` : styled.div``
 const styles = { One: styled.div`` }
-let Component;
-Component = styled.div``;
-const WrappedComponent = styled(Inner)``;
+let Component
+Component = styled.div``
+const WrappedComponent = styled(Inner)``
+const WrappedComponent2 = styled.div({})
+const WrappedComponent3 = styled(Inner)({})
+const WrappedComponent4 = styled(Inner).attrs(() => ({ something: 'else' }))({})

test/fixtures/add-identifier-and-display-name/output.js

@@ -24,3 +24,17 @@ const WrappedComponent = styled(Inner).withConfig({
   displayName: "WrappedComponent",
   componentId: "sc-1cza72q-5"
 })``;
+const WrappedComponent2 = styled.div.withConfig({
+  displayName: "WrappedComponent2",
+  componentId: "sc-1cza72q-6"
+})({});
+const WrappedComponent3 = styled(Inner).withConfig({
+  displayName: "WrappedComponent3",
+  componentId: "sc-1cza72q-7"
+})({});
+const WrappedComponent4 = styled(Inner).attrs(() => ({
+  something: 'else'
+})).withConfig({
+  displayName: "WrappedComponent4",
+  componentId: "sc-1cza72q-8"
+})({});