Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

Commit

Permalink
docs: add note about withProps to emotion migration guide (#423)
Browse files Browse the repository at this point in the history
* update emotion migration guide to mention withProps

* add contributor
  • Loading branch information
RoystonS authored and Kent C. Dodds committed May 24, 2018
1 parent 0bbda79 commit a273b11
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 3 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -633,6 +633,15 @@
"code",
"doc"
]
},
{
"login": "roystons",
"name": "Royston Shufflebotham",
"avatar_url": "https://avatars0.githubusercontent.com/u/19773?s=460&v=4",
"profile": "https://github.com/roystons",
"contributions": [
"doc"
]
}
]
}
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-66-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-67-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]
Expand Down Expand Up @@ -178,7 +178,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub><b>WillowHQ</b></sub>](https://github.com/WillowHQ)<br />[πŸ“–](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub><b>Mohammad Rajabifard</b></sub>](https://tarino.ir)<br />[πŸ›](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [πŸ“–](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub><b>Omar Albacha</b></sub>](https://github.com/Oalbacha)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [πŸ“–](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub><b>tdeschryver</b></sub>](https://github.com/tdeschryver)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub><b>Dylan Mozlowski</b></sub>](https://github.com/DylanMoz)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/3275424?v=4" width="100px;"/><br /><sub><b>andretshurotshka</b></sub>](https://github.com/goodmind)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=goodmind "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=goodmind "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=O4epegb "Tests") |
| [<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub>](http://ailrun.github.io/)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=Ailrun "Tests") | [<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>BjΓΆrn Ricks</b></sub>](https://twitter.com/bjoernricks)<br />[πŸ›](https://github.com/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [πŸ’»](https://github.com/paypal/glamorous/commits?author=bjoernricks "Code") [πŸ“–](https://github.com/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=bjoernricks "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub>](http://tylerdeitz.com)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=tvler "Code") | [<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub>](https://twitter.com/shovan_ch)<br />[πŸ“–](https://github.com/paypal/glamorous/commits?author=shovanch "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub>](https://github.com/johnjesse)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=johnjesse "Code") | [<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub>](https://www.danielberndt.net)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=danielberndt "Tests") | [<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub>](https://knpw.rs)<br />[πŸ€”](#ideas-knpwrs "Ideas, Planning, & Feedback") [πŸ’‘](#example-knpwrs "Examples") |
| [<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub>](http://johngrish.in)<br />[πŸ›](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [πŸ’»](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") | [<img src="https://avatars3.githubusercontent.com/u/200528?v=4" width="100px;"/><br /><sub><b>Mordy Tikotzky</b></sub>](https://github.com/tikotzky)<br />[πŸ›](https://github.com/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [πŸ’»](https://github.com/paypal/glamorous/commits?author=tikotzky "Code") | [<img src="https://avatars3.githubusercontent.com/u/1027024?v=4" width="100px;"/><br /><sub><b>Alasdair McLeay</b></sub>](https://github.com/penx)<br />[πŸ’‘](#example-penx "Examples") | [<img src="https://avatars1.githubusercontent.com/u/4171528?v=4" width="100px;"/><br /><sub><b>Ardamis Yeshak</b></sub>](https://github.com/zabute)<br />[πŸ”§](#tool-zabute "Tools") | [<img src="https://avatars2.githubusercontent.com/u/3729628?v=4" width="100px;"/><br /><sub><b>Matthew Armstrong</b></sub>](https://github.com/raingerber)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=raingerber "Tests") | [<img src="https://avatars3.githubusercontent.com/u/876694?v=4" width="100px;"/><br /><sub><b>Wu Haotian</b></sub>](https://github.com/whtsky)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=whtsky "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=whtsky "Tests") | [<img src="https://avatars1.githubusercontent.com/u/7829175?v=4" width="100px;"/><br /><sub><b>Viktor Ivarsson</b></sub>](https://github.com/viktorivarsson)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=viktorivarsson "Code") |
| [<img src="https://avatars1.githubusercontent.com/u/11481355?v=4" width="100px;"/><br /><sub><b>Mitchell Hamilton</b></sub>](https://hamil.town)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=mitchellhamilton "Code") | [<img src="https://avatars3.githubusercontent.com/u/8588?v=4" width="100px;"/><br /><sub><b>Aaron Jensen</b></sub>](https://twitter.com/aaronjensen)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=aaronjensen "Code") | [<img src="https://avatars2.githubusercontent.com/u/2104197?v=4" width="100px;"/><br /><sub><b>Colin Howeth</b></sub>](http://colinhoweth.com)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=cbhoweth "Code") [πŸ“–](https://github.com/paypal/glamorous/commits?author=cbhoweth "Documentation") |
| [<img src="https://avatars1.githubusercontent.com/u/11481355?v=4" width="100px;"/><br /><sub><b>Mitchell Hamilton</b></sub>](https://hamil.town)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=mitchellhamilton "Code") | [<img src="https://avatars3.githubusercontent.com/u/8588?v=4" width="100px;"/><br /><sub><b>Aaron Jensen</b></sub>](https://twitter.com/aaronjensen)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=aaronjensen "Code") | [<img src="https://avatars2.githubusercontent.com/u/2104197?v=4" width="100px;"/><br /><sub><b>Colin Howeth</b></sub>](http://colinhoweth.com)<br />[πŸ’»](https://github.com/paypal/glamorous/commits?author=cbhoweth "Code") [πŸ“–](https://github.com/paypal/glamorous/commits?author=cbhoweth "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/19773?s=460&v=4" width="100px;"/><br /><sub><b>Royston Shufflebotham</b></sub>](https://github.com/roystons)<br />[πŸ“–](https://github.com/paypal/glamorous/commits?author=roystons "Documentation") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
6 changes: 5 additions & 1 deletion other/EMOTION_MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ If your using css.keyframes(glamor) you can adjust them to use `import { keyfram

This list is not comprehensive please feel free to make adjustments or additions.

##### Object Syntax
### Object Syntax

If moving to emotion you will need their [babel-plugin-emotion](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion). Otherwise you will need to use template strings(that's a lot of work don't do that) and most likely change your syntax a lot of places.

Expand All @@ -71,6 +71,10 @@ If you use `css={{ backgroundColor: "purple" }}` you should be good.. but you wi

One thing to watch out for `` content: `""` ``(backticks) should become `content: '""'` (replace with single ticks) or you will be missing some pseudo elements that are most likely important ;).

### `withProps`

The emotion library doesn't support `withProps` directly itself, but you can use [`withProps` from `recompose`](https://github.com/emotion-js/emotion/blob/master/docs/with-props.md) instead.

## Thanks!

Glamorous is great, emotion is great.. Happy migrating!

0 comments on commit a273b11

Please sign in to comment.