feat(withComponent) Allow changing of tag/component

- Add `withComponent` method to create new styled component
- Update react test
- Update snapshot

docs/styled.md

@@ -49,3 +49,18 @@ function Greeting ({ name }) {
 }
 
 ```
+
+### withComponent
+
+You can change a `styled` component's tag with the method `withComponent`. This API was inspired by[styled-components](https://github.com/styled-components/styled-components).
+
+```jsx
+import styled from 'emotion/react'
+
+const Title = styled.h1`
+  font-size: 24px;
+  color: red;
+`
+const Subtitle = Title.withComponent("h2")
+
+```

packages/react-emotion/src/index.js

@@ -26,7 +26,7 @@ const omitAssign = function(testFn, target) {
 
 let componentIdIndex = 0
 
-export default function(tag, options: { e: string, id: string }) {
+const createStyled = (tag, options: { e: string, id: string }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (tag === undefined) {
       throw new Error(
@@ -106,6 +106,10 @@ export default function(tag, options: { e: string, id: string }) {
     Styled.__emotion_class = componentId
     Styled.__emotion_classes = componentIdClassName
 
+    Styled.withComponent = nextTag => createStyled(nextTag, options)
+
     return Styled
   }
 }
+
+export default createStyled

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -165,7 +165,7 @@ exports[`styled component as selector 1`] = `
 <div
   className="glamor-2 glamor-3"
 >
-  hello 
+  hello
   <h1
     className="glamor-0 glamor-1"
   >
@@ -194,7 +194,7 @@ exports[`styled component as selector function interpolation 1`] = `
 <div
   className="glamor-2 glamor-3"
 >
-  hello 
+  hello
   <h1
     className="glamor-0 glamor-1"
   >
@@ -449,7 +449,7 @@ exports[`styled nested 1`] = `
 <div
   className="glamor-2 glamor-3"
 >
-  hello 
+  hello
   <h1
     className="glamor-0 glamor-1"
   >
@@ -677,3 +677,26 @@ exports[`styled throws if undefined is passed as the component 1`] = `
 "You are trying to create a styled element with an undefined component.
 You may have forgotten to import it."
 `;
+
+exports[`styled withComponent will replace tags but keep classes 1`] = `
+.glamor-1 {
+  color: green;
+}
+
+<article>
+  <styled(Component)>
+    <h1
+      className="glamor-0 glamor-1"
+    >
+      My Title
+    </h1>
+  </styled(Component)>
+  <styled(Component)>
+    <h2
+      className="glamor-0 glamor-1"
+    >
+      My Subtitle
+    </h2>
+  </styled(Component)>
+</article>
+`;

packages/react-emotion/test/index.test.js

@@ -644,4 +644,23 @@ describe('styled', () => {
       () => styled(undefined)`display: flex;`
     ).toThrowErrorMatchingSnapshot()
   })
-})
+  test('withComponent will replace tags but keep classes', () => {
+    const Title = styled.h1`color: green;`
+    const Subtitle = Title.withComponent('h2')
+
+    const wrapper = mount(
+      <article>
+        <Title>My Title</Title>
+        <Subtitle>My Subtitle</Subtitle>
+      </article>
+    )
+
+    const $title = wrapper.find('h1')
+    const $subtitle = wrapper.find('h2')
+
+    expect(enzymeToJson(wrapper)).toMatchSnapshot()
+    expect($title).toHaveLength(1)
+    expect($subtitle).toHaveLength(1)
+    expect($title.props().className).toEqual($subtitle.props().className)
+  })
+})