Add warning for non styled components

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;
   }

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.'));
+  });
 });