From 51b3b20f9da3d4b3495f7a61e2b10d95a1ed602b Mon Sep 17 00:00:00 2001
From: Andre Loker <140714+aloker@users.noreply.github.com>
Date: Tue, 15 May 2018 19:11:36 +0200
Subject: [PATCH] fix: nested composition causes base element to be rendered
 incorrectly (#67)

---
 src/styled.js                               |  6 ++++++
 src/tests/__snapshots__/index.spec.jsx.snap |  8 ++++++++
 src/tests/index.spec.jsx                    | 11 +++++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/styled.js b/src/styled.js
index 379174b..f8e29eb 100644
--- a/src/styled.js
+++ b/src/styled.js
@@ -66,6 +66,12 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
   class StyledElement extends Component<StyledElementPropsType, StateType> {
     static tagName: string = tagName
     static style: ComponentStyleType[] = elementStyle
+
+    // If the base component is a React component (and thus neither an intrinsic tag or a
+    // styled element), make sure to keep a reference to the component around. Otherwise deeply
+    // nested styled elements won't render the base component correctly.
+    static reactComponent = reactComponent
+
     static contextTypes = {
       [channel]: object
     }
diff --git a/src/tests/__snapshots__/index.spec.jsx.snap b/src/tests/__snapshots__/index.spec.jsx.snap
index beb05fc..1240ed2 100644
--- a/src/tests/__snapshots__/index.spec.jsx.snap
+++ b/src/tests/__snapshots__/index.spec.jsx.snap
@@ -111,3 +111,11 @@ exports[`base rendering tests renders correctly App with injectStyled 1`] = `
   </div>
 </div>
 `;
+
+exports[`base rendering tests renders nested compositions correctly 1`] = `
+<div
+  className="C1-23-0-1-25"
+>
+  Test
+</div>
+`;
diff --git a/src/tests/index.spec.jsx b/src/tests/index.spec.jsx
index b673828..13153e5 100644
--- a/src/tests/index.spec.jsx
+++ b/src/tests/index.spec.jsx
@@ -45,4 +45,15 @@ describe('base rendering tests', () => {
 
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders nested compositions correctly', () => {
+    const C1 = ({children, className}: { children: any, className?: string }) => (
+      <div className={className}>{children}</div>
+    )
+    const C2 = styled(C1)({color: '#333'})
+    const C3 = styled(C2)({padding: 3})
+    const tree = renderer.create(<C3>Test</C3>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })