Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

readme and doc consolidation updates #408

Merged
merged 19 commits into from
Oct 16, 2017
Merged
Prev Previous commit
Next Next commit
Don't duplicate babel install docs
greggb committed Oct 15, 2017
commit ce6c0958156eeb207db2ae896dbbd8ec78c45be3
13 changes: 1 addition & 12 deletions docs/babel.md
Original file line number Diff line number Diff line change
@@ -2,18 +2,7 @@

The Babel Plugin is highly recommended, but not required in version 8 and above.

## Install
```bash
npm install --save-dev babel-plugin-emotion
```
**.babelrc** _note: add emotion as the first plugin in the list_
```json
{
"plugins": [
"emotion"
]
}
```
See the [installation instructions](install.md).

### Features which are enabled with the babel plugin

42 changes: 30 additions & 12 deletions docs/install.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,53 @@
[github](https://github.com/tkh44/emotion)
[npm](https://npm.im/emotion)

## Install

```bash
npm install --save emotion react-emotion babel-plugin-emotion
```

**.babelrc**
All `emotion` APIs are available from the `react-emotion` package.

```javascript
import styled, { css, injectGlobal } from 'react-emotion';
```

### .babelrc

[More information on the babel plugin](babel.md)

_`"emotion"` must be the **first plugin** in your babel config `plugins` list._

Takes optional configs:
- [extractStatic](babel.md#Static-Extraction) _{boolean}_
- [sourceMap](babel.md#Static-Extraction) _{boolean}_
```json
{
"plugins": [
"emotion"
["emotion"]
]
}
```

**Notes:**
- Make sure `"emotion"` is the first plugin.
- If you are using Babel's env option in your `.babelrc` file, ensure that emotion is first in every environment's list of plugins.
If using Babel's env option emotion must also be first for each environment.
```json
{
"env": {
"production": {
"plugins": ["emotion", "some-other-plugin"]
"plugins": [
"emotion",
[...all other babel plugins...]
]
}
},
"plugins": ["emotion"]
}
```
### Preact

### Preact
Import `preact-emotion` instead of `react-emotion` and use it the same way you would with React.

If you're using [Preact](https://github.com/developit/preact) instead of [React](https://github.com/facebook/react), install [`preact-emotion`](./preact.md). The babel setup remains the same.
```jsx
import styled from 'preact-emotion'

const SomeComponent = styled.div`
display: flex;
`
```