Announcing styled-components v5: Beast Mode ๐Ÿ’ช๐Ÿ”ฅ

50% faster server-side rendering, 22% faster client-side rendering, 31% smaller bundle size, RTL support and no breaking changes! ๐Ÿ˜๐Ÿ’ฏ๐ŸŽ‰๐Ÿ’…

Evan Jacobs
Jun 14, 2019 ยท 4 min read

We are very excited to announce that the styled-components v5 is here! There are no breaking changes*, as long as your app is running the latest version of React, styled-components v5 should. โœจ(*however we did remove the deprecated โ€œsubfunctions on attrsโ€ API)

Please try the release in your apps and let us know if you encounter any issues:

npm install styled-components@^5.0.0

Letโ€™s talk about the changes!

Fast, faster, styled-components ๐ŸŽ๐Ÿ’จ

Back when we released v2 more than two years ago we promised to focus on performance. We have since delivered with massive speedups in various releases, including a massive 10x performance boost in v3.1 and another 25% boost in v4.

styled-components v5 smashes it out of the park once again! Compared to v4, it comes with:

  • 26% smaller bundle size (16.2kB vs. 12.42kB min+gzip) โšก๏ธ
  • 22% faster client-side mounting ๐Ÿ˜ฑ
  • 26% faster updating of dynamic styles ๐Ÿ’ฏ
  • 45% (!!!) faster server-side rendering ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

styled-components was already one of the fastest CSS-in-JS libraries out there, but with this v5 update we solidified our position ahead of the pack:

Mounting a deep component tree benchmark. Lower is better.

These massive speed gains were mainly enabled by our new core stylesheet engine. It had not been touched in years, so we completely rebuilt it with a focus on performance and correctness.

If youโ€™d like to learn more, have a look at our CHANGELOG for a detailed breakdown! Or read on to have a quicker overviewโ€ฆ

Clean, cleaner, React DevTools โœจ

All of your styled components are now fully hooks-powered, so there is significantly less component nesting and much cleaner React DevTools when using styled-components!

Here is what our styled TagLine component looks like in the React DevTools when using v4:

<StyledComponent forwardedRef={null}>
<h2 className=โ€H2-sc-1izft7s-7โ€>Hello world</h2>

Here is what looks like in the React DevTools when using v5:

<h2 className=โ€H2-sc-1izft7s-7โ€>Hello world</h2>

How clean is that?!?! ๐Ÿ˜ Letโ€™s look at a real-world example:

React DevTools component tree output for Left: styled-components v4, Right: styled-components v5

Wow. ๐Ÿ˜๐Ÿ˜๐Ÿ˜

New, newer, StyleSheetManager ๐Ÿงฉ

While our <StyleSheetManager /> has existed for a while, it got a huge upgrade in v5 with the ability to extend our CSS parser (stylis) with plugins.

This is useful for a wide variety of scenarios, one common feature request that is now finally possible is fully automatic RTL support for your styles!

RTL support ๐ŸŒ

Here is how you can turn your styles from left-to-right to right-to-left:

import { StyleSheetManager } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
<App />

That is all you need to do! ๐Ÿ”ฅ We are very excited by the possibilities that this opens up and all the plugins you all are going to come up with to give styled-components .

Support us ๐Ÿ™

styled-components is used by a lot of people. Like, . The library has been downloaded over 39 million times and is depended upon by hundreds of thousands of public repositories, not including the many private ones that do not show up on GitHub! ๐Ÿ˜ฑ

styled-components is used widely, and we, the core team, take this responsibility very serious. Unfortunately, maintenance is almost entirely volunteer-based and we have very limited resources to pay anybody, attend conferences or organize summits.

If you use styled-components at your company, please consider contributing to our OpenCollective. We would love to get the entire core team into the same room this year, and that would help make it possible. ๐Ÿ™‡โ€โ™‚๏ธ

From the entire styled-components core team, we hope you enjoy v5. As always, stay stylish ๐Ÿ’…

๐Ÿ’… styled-components

Visual primitives for the component age.