From 77133ae8c29f1726d606448ce4863f3b8fd4930a Mon Sep 17 00:00:00 2001
From: egdbear <egdfer@gmail.com>
Date: Sun, 7 Oct 2018 07:53:40 +0200
Subject: [PATCH 1/3] Add warning for non styled components

---
 src/utils/flatten.js           | 15 +++++++++++++++
 src/utils/test/flatten.test.js | 21 +++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/utils/flatten.js b/src/utils/flatten.js
index 0f379e082..8d75723b9 100644
--- a/src/utils/flatten.js
+++ b/src/utils/flatten.js
@@ -1,4 +1,7 @@
 // @flow
+
+import * as ReactIs from 'react-is';
+import getComponentName from './getComponentName';
 import isFunction from './isFunction';
 import isPlainObject from './isPlainObject';
 import isStyledComponent from './isStyledComponent';
@@ -55,6 +58,18 @@ export default function flatten(chunk: any, executionContext: ?Object, styleShee
   /* Either execute or defer the function */
   if (isFunction(chunk)) {
     if (executionContext) {
+      if (process.env.NODE_ENV !== 'production') {
+        /* Warn if not referring styled component */
+        // eslint-disable-next-line new-cap
+        if (ReactIs.isElement(new chunk(executionContext))) {
+          console.warn(
+            `${getComponentName(
+              chunk
+            )} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`
+          );
+        }
+      }
+
       return flatten(chunk(executionContext), executionContext, styleSheet);
     } else return chunk;
   }
diff --git a/src/utils/test/flatten.test.js b/src/utils/test/flatten.test.js
index 88f9d9d88..e57d4b6fb 100644
--- a/src/utils/test/flatten.test.js
+++ b/src/utils/test/flatten.test.js
@@ -1,5 +1,8 @@
 // @flow
+import React from 'react';
 import flatten from '../flatten';
+import styled from '../../constructors/styled';
+import TestRenderer from 'react-test-renderer';
 
 describe('flatten', () => {
   it('doesnt merge strings', () => {
@@ -99,4 +102,22 @@ describe('flatten', () => {
     expect(flatten(['foo', func], { bool: true })).toEqual(['foo', 'static', 'bar']);
     expect(flatten(['foo', func], { bool: false })).toEqual(['foo', 'static', 'baz']);
   });
+  it('warns to refer styled-components', () => {
+    const Foo = ({ className }) => <div className={className}>hello there!</div>
+
+    const Bar = styled.div`
+      ${Foo}: {
+        background-color: red;
+      };
+    `;
+
+    console.warn = jest.fn();
+    global.console = { warn: jest.fn() };
+
+    expect(() => {
+      flatten(TestRenderer.create(<Bar />));
+    }).toThrowError();
+
+    expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Foo is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.'));
+  });
 });

From 843bb6a8d4c6c5f2eb20479095ec26fccc846b07 Mon Sep 17 00:00:00 2001
From: egdbear <egdfer@gmail.com>
Date: Mon, 8 Oct 2018 07:35:24 +0200
Subject: [PATCH 2/3] Rename test

---
 src/utils/test/flatten.test.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/utils/test/flatten.test.js b/src/utils/test/flatten.test.js
index e57d4b6fb..75854d64e 100644
--- a/src/utils/test/flatten.test.js
+++ b/src/utils/test/flatten.test.js
@@ -102,14 +102,13 @@ describe('flatten', () => {
     expect(flatten(['foo', func], { bool: true })).toEqual(['foo', 'static', 'bar']);
     expect(flatten(['foo', func], { bool: false })).toEqual(['foo', 'static', 'baz']);
   });
-  it('warns to refer styled-components', () => {
-    const Foo = ({ className }) => <div className={className}>hello there!</div>
+  it('warns if trying to interpolate a normal React component', () => {
+    const Foo = ({ className }) => <div className={className}>hello there!</div>;
 
     const Bar = styled.div`
       ${Foo}: {
         background-color: red;
-      };
-    `;
+      };`;
 
     console.warn = jest.fn();
     global.console = { warn: jest.fn() };

From b3a1e320174eb8d4f269f419bcae3b969b3cd039 Mon Sep 17 00:00:00 2001
From: egdbear <egdfer@gmail.com>
Date: Mon, 8 Oct 2018 18:13:58 +0200
Subject: [PATCH 3/3] Add CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf21a8daf..b8440290d 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+- Add warning when component is not a styled component and cannot be referred via component selector, by [@egdbear](https://github.com/egdbear) (see [#2070](https://github.com/styled-components/styled-components/pull/2070))
+
 ## [v4.0.0-beta.10] - 2018-10-04
 
 - Add support for `as` to be used with `attrs` for better polymorphism, by [@imbhargav5](https://github.com/imbhargav5) (see [#2055](https://github.com/styled-components/styled-components/pull/2055))