Formatting

README.md

@@ -25,21 +25,22 @@ npm install --save emotion
 
 ```javascript
 import { css } from 'emotion';
+
+const app = document.getElementById('root');
 const myStyle = css`
   color: rebeccapurple;
 `
-
-const app = document.getElementById('root');
 app.classList.add(myStyle);
 ```
-### React with [optional Babel plugin](docs/babel.md)
+### React with [Optional Babel Plugin](docs/babel.md)
 ```bash
 npm install --save emotion react-emotion babel-plugin-emotion
 ```
-_note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_
+_Note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_
 
 ```javascript
 import styled, { css } from 'react-emotion';
+
 const Container = styled('div')`
   background: #333;
 `

docs/README.md

@@ -10,7 +10,6 @@
 - [Pseudo Selectors ](https://github.com/emotion-js/emotion/tree/master/docs/pseudo.md)
 - [Media Queries](https://github.com/emotion-js/emotion/tree/master/docs/media.md)
 - [Composition](https://github.com/emotion-js/emotion/tree/master/docs/composition.md)
-- [Styling Any Component](https://github.com/emotion-js/emotion/tree/master/docs/styling-any-component.md)
 - [`styled.withComponent`](https://github.com/emotion-js/emotion/tree/master/docs/styled-with-component.md)
 - [Dynamic Props For `styled` Components](https://github.com/emotion-js/emotion/tree/master/docs/props.md)
 - [Using Javascript Objects for Styles](https://github.com/emotion-js/emotion/tree/master/docs/objects.md)

docs/babel.md

@@ -6,13 +6,13 @@ See the [installation instructions](install.md).
 
 ### Features which are enabled with the babel plugin
 
-### `styled.div` Syntax
+### styled.element Syntax
 `styled('div')` will work without the plugin
 
 ### Minification
 Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.
 
-### Dead code Elimination
+### Dead Code Elimination
 Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination.
 
 ### Static Extraction
@@ -21,10 +21,10 @@ Generated CSS that is eligible for extraction can be moved to an external css fi
 ### Source Maps
 When enabled, navigate directly to the style declaration in your javascript file.
 
-### `css` prop
+### css as Prop
 Convenient helper for calling `css` and appending the generated className during compile time.
 
-## babel-macros
+## Babel Macros
 
 Instead of using emotion's babel plugin, you can use emotion with [`babel-macros`](https://github.com/kentcdodds/babel-macros). Add `babel-macros` to your babel config and import whatever you want from emotion but add `/macro` to the end. The macro is currently the same as inline mode. Currently every API except for the css prop is supported by the macro.
 

docs/getting-started.md

@@ -0,0 +1,11 @@
+## Getting started with emotion
+
+### Writing Styles
+
+### Helpers
+
+### Testing
+
+### Shipping
+
+### FAQs

docs/styled.md

@@ -1,21 +1,23 @@
 ## Styled
 
+`styled` accepts styles as a template literal, object, or function that returns an object.
+
+### Styling elements and components
 ```jsx
 import styled from 'react-emotion'
-
+// simple element
 const H1 = styled('h1')`
   color: blue;
   font-size: 48px;
   transform: scale(${props => props.scale});
 `
 
 function Greeting ({ name }) {
-  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
+  // blue, 48px, and scaled 2x text
+  return <H1 scale={2}>Hello {name}</H1> 
 }
 
-
-// You can also pass components in
-
+// Component
 const H2 = styled(H1)`
   font-size: ${fontSize * 2/3}px;
   color: red;
@@ -25,8 +27,24 @@ function Greeting ({ name }) {
   return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
 }
 
+```
+### Change the rendered tag using `withComponent`
+
+This API was inspired by [styled-components' `withComponent`](https://www.styled-components.com/docs/api#withcomponent).
+
+```jsx
+// Creates a section element
+const Content = styled('section')`
+  background: #333;
+`
+// creates an aside element with the same styles as Content
+const Sidebar = Content.withComponent('aside')
 
-// You can also pass refs down using innerRef
+```
+
+### pass refs down using innerRef
+
+```jsx
 const H1 = styled('h1')`
   color: red;
 `
@@ -51,6 +69,22 @@ const H3 = styled.h3`
 function Greeting ({ name }) {
   return <H3>Hello {name}</H3>
 }
+```
+
+### Object styles
+```jsx harmony
+import styled from 'react-emotion'
+
+const H1 = styled.h1(
+  {
+    fontSize: 20
+  },
+  (props) => ({ color: props.color })
+)
 
+const H2 = styled(H1)(
+  { fontSize: '40px' }
+)
 
 ```
+This API was inspired by [glamorous](https://github.com/paypal/glamorous).