fix: forward as prop when wrapping another styled component

Say you have 2 components like this:

```js
const First = styled.a`color: blue;`;

const Second = styled(First)`font-size: 14px;`;

<Second as="button" />
```

Previously this would render a `button` with the style `font-size: 14px;`, because the `First` component is swapped for `button`.

This commit changes the behaviour so that if the wrapped tag is a styled component, it'll forward the `as` prop. Which means the resulting styles will now be `color: blue; font-size: 14px;`. It also matches the behaviour of the styled-components library.

Author: satya164

src/__tests__/__snapshots__/styled.test.js.snap

@@ -16,6 +16,14 @@ exports[`applies CSS variables in style prop 1`] = `
 </div>
 `;
 
+exports[`forwards as prop when wrapping another styled component 1`] = `
+<a
+  className="hijklmn abcdefg"
+>
+  This is a test
+</a>
+`;
+
 exports[`handles wrapping another styled component 1`] = `
 <div
   className="hijklmn abcdefg"
@@ -24,6 +32,20 @@ exports[`handles wrapping another styled component 1`] = `
 </div>
 `;
 
+exports[`merges CSS variables with custom style prop 1`] = `
+<div
+  className="abcdefg"
+  style={
+    Object {
+      "--foo": "tomato",
+      "bar": "baz",
+    }
+  }
+>
+  This is a test
+</div>
+`;
+
 exports[`renders component with display name and class name 1`] = `
 <div
   className="abcdefg"
@@ -40,6 +62,14 @@ exports[`renders tag with display name and class name 1`] = `
 </h1>
 `;
 
+exports[`replaces custom component with as prop 1`] = `
+<a
+  className="abcdefg"
+>
+  This is a test
+</a>
+`;
+
 exports[`replaces simple component with as prop 1`] = `
 <a
   className="abcdefg"

src/__tests__/styled.test.js

@@ -52,6 +52,22 @@ it('applies CSS variables in style prop', () => {
   expect(tree.toJSON()).toMatchSnapshot();
 });
 
+it('merges CSS variables with custom style prop', () => {
+  const Test = styled('div')({
+    name: 'TestComponent',
+    class: 'abcdefg',
+    vars: {
+      foo: ['tomato'],
+    },
+  });
+
+  const tree = renderer.create(
+    <Test style={{ bar: 'baz' }}>This is a test</Test>
+  );
+
+  expect(tree.toJSON()).toMatchSnapshot();
+});
+
 it('supports extra className prop', () => {
   const Test = styled('div')({
     name: 'TestComponent',
@@ -85,6 +101,19 @@ it('replaces simple component with as prop', () => {
   expect(tree.toJSON()).toMatchSnapshot();
 });
 
+it('replaces custom component with as prop', () => {
+  const Custom = props => <div {...props} style={{ fontSize: 12 }} />;
+
+  const Test = styled(Custom)({
+    name: 'TestComponent',
+    class: 'abcdefg',
+  });
+
+  const tree = renderer.create(<Test as="a">This is a test</Test>);
+
+  expect(tree.toJSON()).toMatchSnapshot();
+});
+
 it('handles wrapping another styled component', () => {
   const First = styled('div')({
     name: 'FirstComponent',
@@ -101,6 +130,22 @@ it('handles wrapping another styled component', () => {
   expect(tree.toJSON()).toMatchSnapshot();
 });
 
+it('forwards as prop when wrapping another styled component', () => {
+  const First = styled('div')({
+    name: 'FirstComponent',
+    class: 'abcdefg',
+  });
+
+  const Second = styled(First)({
+    name: 'SecondComponent',
+    class: 'hijklmn',
+  });
+
+  const tree = renderer.create(<Second as="a">This is a test</Second>);
+
+  expect(tree.toJSON()).toMatchSnapshot();
+});
+
 it('throws when using as tag for template literal', () => {
   expect(
     () =>

src/react/styled.js

@@ -44,6 +44,18 @@ function styled(tag /* : React.ComponentType<*> | string */) {
         rest.style = Object.assign(style, rest.style);
       }
 
+      /* $FlowFixMe */
+      if (typeof tag.className === 'string' && tag !== component) {
+        // If the underlying tag is a styled component, forward the `as` prop
+        // Otherwise the styles from the underlying component will be ignored
+        return React.createElement(
+          tag,
+          Object.assign(rest, {
+            as: component,
+          })
+        );
+      }
+
       return React.createElement(component, rest);
     });