Announcement of a new version of Styled Components v5: Animal Grin

We are very pleased to announce the new fifth version of styled-components ! The new version is fully backward compatible with the previous version, provided that React ^ 16.8 is used.

Beta of the fifth version can be tried right now:

npm install styled-components@beta

We need a version of React that supports React.hooks, i.e. react@^16.8 react-dom@^16.8 react-is@^16.8

And now about the changes!

Quickly. Even faster. Styled-Components.

When we released the second version more than 2 years ago, we promised to focus on performance. We have already greatly accelerated the work of the library over several releases. So, we got a tenfold increase in speed in version 3.1 and another 25% acceleration in version 4.

By the fifth version, the styled-components library is now even faster! Comparing with the 4 version, we got:

• to 19% smaller minifitsirovannogo code (16.2kB vs. 13.63kB min + gzip) ️
• to 18% faster initialization of the client-side
• to 17% faster update dynamic styles
• to 45% (!!!) faster server rendering

Styled-components was already one of the fastest CSS-in-JS libraries, but now it is even faster, but with the fifth version we have strengthened our position in the leaders:

Initialization of the component tree. Less is better.

A significant increase in speed was achieved thanks to our new core. It has not been changed for years, so we completely rewrote it with a focus on performance and accuracy (correctness).

Despite extensive internal testing, there may still be some bugs that we will definitely fix. We also ask the community for help in testing the beta so that the release is as stable as possible.

Try the library and tell us if something went wrong:

npm install styled-components@beta

If you are using jest-styled-components, make sure you upgrade this library to beta.

Clearly. Even more clearly. React DevTools

Now all your stylized components are fully working on React.hooks, so the tree structure is much more visual and simple.

For example, a stylized component TagLinelooks in React DevTools before changes (v4):

Hello world

And so - after the changes (v5)

Hello world

Clear enough? Here is an example from a real application: Component tree in React DevTools for styled-components.com. On the left is the fourth version, on the right is the fifth. Wow! (Clickable)

Many thanks to Jessica Franco and Alexander Nanberg for refactoring the code using React.Hooks.

New. Even newer. StyleSheetManager

received a significant update in the fifth version, allowing plugins to expand our CSS parser (stylis).

This can be used for various scenarios, for example, for full and automatic support Right-To-Left.

RTL support

With this plugin, you can easily replace the left-to-right direction with a right-to-left direction:

import { StyleSheetManager } from 'styled-components';
import stylisRTLPlugin from 'stylis-rtl';

That’s all there is to it! We are very pleased and surprised at the opportunities that open with plugins. Now you can give the stylized components a superpower!

Support us

styled-components are widely used by the community. Very wide. The library has been downloaded 39 million times and is a dependency for hundreds of thousands of public repositories, not including many private ones that are not shown in GitHub statistics.

Since the library is widely used by us, the core team, we take serious responsibility. Unfortunately, the maintenance and support of the library is almost completely voluntary. And we are very limited in resources, to pay someone, to organize or participate in conferences and summits.

If you use the library at work, please consider supporting us at OpenCollective. We would very much like to assemble our team in one room this year, and this support will help us implement our plan.

The whole team hopes you enjoy the fifth version. And, as always, stay stylish!