[
  {
    "path": "README.md",
    "content": "# styled-components-vs-emotion\n_Last updated by @JuanmaMenendez on October 25th, 2019_\nA short doc comparing the popular CSS-in-JS libraries `styled-components` and `emotion`. For a more detailed comparison, see:\n* [this Spectrum thread](https://spectrum.chat/styled-components/general/styled-components-vs-emotion~47206c1b-a688-424e-9e96-6f265993587e) (Aug 2018 - Mar 2019)\n* [this shorter Frontity discussion](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27)\n\n## Brief Description\n\n### [`styled-components`](https://www.styled-components.com/)\n>Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!\n\n### [`emotion`](https://emotion.sh/)\n>Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.\n\n### Functionality\nThe APIs of the two libraries have [converged over time](https://css-tricks.com/the-fragmented-but-evolving-state-of-css-in-js/). Both let you create a component with styling specified via CSS, or via object notation. (Styled Components added the latter capability [in May 2018](https://twitter.com/mxstbr/status/999918627997470724).)\n\n#### `styled-components`\n\n```javascript\n// CSS syntax in tagged template literal\nconst Title = styled.h1`\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n`\nrender(<Title>Hiya!</Title>)\n\n// Object syntax\nconst button = styled.button({\n  fontSize: '1.5em',\n  textAlign: 'center',\n  color: 'palevioletred'\n});\n```\n\n#### `emotion`\n\n```javascript\n\n// CSS syntax in tagged template literal\n\nconst Button = styled.button`\n  padding: 32px;\n  background-color: hotpink;\n  font-size: 24px;\n  border-radius: 4px;\n  color: black;\n  font-weight: bold;\n  &:hover {\n    color: white;\n  }\n`\n\nrender(<Button>Hey! It works.</Button>)\n\n---\n\nrender(\n  <h1\n    className={css`\n      font-size: 1.5em;\n      text-align: center;\n      color: palevioletred;\n    `}\n  >\n    Hiya!\n  </h1>\n)\n\n// Object syntax\nconst titleStyles = css({\n  fontSize: '1.5em',\n  textAlign: 'center',\n  color: 'palevioletred'\n})\n\nrender(<h1 className={titleStyles}>Hiya!</h1>)\n\n```\n\n\n## Comparison\nHere's how the two libraries compare based on features and stats:\n\n### Features - at parity\nThis information was taken from the documentation websites.\n\nLibrary | Attaching Props? | Media Queries? | Global Styles? | Nested Selectors? | Server Side Rendering? | Theming Support? | Composition?\n--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n`styled-components` | Yes | Yes| Yes | Yes | Yes | Yes| Yes   \n`emotion` | Yes | Yes | Yes | Yes | Yes | Yes | Yes \n\n### Stats\nThese numbers were pulled on October 18th, 2019.\n\nLibrary | Creation Date | Last Updated (GitHub) | Size | Repo Stars | # of Contributors | Community Size (Spectrum)\n--- | --- | --- | --- | --- | --- | --- |\n[`styled-components`](https://github.com/styled-components/styled-components) | August 16th, 2016 | 8 days ago | ? 14.6kb ? | 26,197 | 252 | [10,113](https://spectrum.chat/styled-components)\n[`emotion`](https://github.com/emotion-js/emotion) | May 27th, 2017 | 6 days ago | ? 8.9kb ? | 9,118 | 184 | [479](https://spectrum.chat/emotion)\n\n### Worthy Notes\n\n* `emotion` is [ready](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27/8) for [React Concurrent mode](https://dev.to/pomber/about-react-suspense-and-concurrent-mode-21aj) and it has a smaller bundle size\n- `emotion` [performed faster](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md) than `styled-components` back in March 12th when a comparison was done over all CSS-in-JS libraries. **However, maintainers of `styled-components` are actively improving performance and say [they are within 0.5-2x emotion's times](https://twitter.com/_philpl/status/1017312352641933317).**\n- Kent C. Dodds recommended `emotion` over `styled-components` in [this tweet](https://twitter.com/kentcdodds/status/994230853189320705) saying that it's smaller and faster. \n\n### Contributions\nIf you see a typo or something that is out-of-date or incorrect, please submit a PR and I will happily update this doc.\n\n"
  }
]