The announcement of the new version of Styled Components v5: Fangs

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

Beta fifth version, you can try now:

npm install styled-components@beta 

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. Faster. Styled-Components.

When we released the second version more than 2 years ago, we promised to focus on performance. We have 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 became even faster! Comparing with version 4, we got:

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

Styled-components was already one of the fastest CSS-in-JS libraries, but now it is even faster, but since 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 version so that the release is as stable as possible.

Try the library and tell if something has gone wrong:

 npm install styled-components@beta 

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

Clearly. More clearly. React DevTools

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

For example, the stylized TagLine component looks in React DevTools before the changes (v4):

 <TagLine> <StyledComponent forwardedRef={null}> <Context.Consumer> <Context.Consumer> <h2 className=”H2-sc-1izft7s-7”>Hello world</h2> </Context.Consumer> </Context.Consumer> </StyledComponent> </TagLine> 

And so - after the changes (v5)

 <TagLine> <h2 className=”H2-sc-1izft7s-7”>Hello world</h2> </TagLine> 

Clear enough? Here is an example from a real application:

Component tree in React DevTools for site styled-components.com. The fourth version is on the left, the fifth is on the right. Wow! (Clickable)

Huge hello to Jessica Franco and Alexander Nunberg for refactoring the code using React.Hooks.

New. Even newer. StyleSheetManager

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

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

RTL support

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

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

This is all you need to do! We are very happy and surprised by the opportunities that open with plugins. Now you can give stylized components superpower!

Support us

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

Since the library is used extensively, we, the kernel team, take a serious responsibility for ourselves. 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 on OpenCollective. We would very much like to gather our team in the same room this year, and this support will help us implement our plans.

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