Back

Introducing Fela 6.0

3min • 22 September 2017

Fela finally got an official logo! Thanks to Art (http://arturmuller.com)

While the public API of both the main package as well as most plugins and bindings has been pretty stable the last couple of releases, a lot has changed within the underlaying implementation.

On our mission(new tab) to provide the most powerful styling toolbelt, we are proud to announce a whole new major version of Fela(new tab)! Let’s dive into the changes and how it improves your application and experience:

Caching Mechanism

Up to this day, multiple string caches including pure CSS strings were used together with a key-className cache to skip rendered classNames directly. That enabled super fast string rendering for SSR and development mode, but was rather irrelevant for production mode anyways. The new implementation now uses a key-reference cache where the reference is an object containing everything we need to render styles.

With the new mechanism, we are now able to properly rehydrate server-side rendered markup on the client. This improves initial rendering times a lot!
Apart from that it was required to fully precompile rules during compilation using our brand new babel plugin.

babel-plugin-fela(new tab)

With this release, the very first version of Fela’s new babel plugin(new tab) has been published as well. It extracts static style declarations and pre-renders those during source code compilation in order to optimize bundle size and rendering performance. Right now, it is pretty limited and only works with the createComponent-HoC(new tab) provided by react-fela(new tab), preact-fela(new tab) and inferno-fela(new tab). However, further use cases will be shipped soon.

PubSub ThemeProvider

Theming with the built-in ThemeProvider(new tab) has been completely rewritten. The old implementation was purely based on React’s context(new tab). It was working great with static themes and provided every Fela component with an additional theme object by default. Dynamic changes to the theme, however, might have been missed due to the fact that React’s context is not updated for child components if any parent component implements shouldComponentUpdate validating to false(new tab). (e.g. if you’re using react-redux’s connect-HoC).

To support real dynamic theming, the ThemeProvider(new tab) has been refactored and is now built on the publish-subscribe design pattern(new tab).
Additionally, we now ship a withTheme-HoC(new tab) to safely inject the theme object into any React component.

@supports

Also for the first time, we now officially support the @supports CSS syntax(new tab). It can be used just like media queries. We even support nesting which will automatically be resolved to a single concatenated query.

Other Improvements

Apart from the above major changes, we are happy to add further improvements to Fela. We are even more happy to say, that most of those improvements have been PRs from the community:

Thanks for reading!

I’m Robin, Freelancer & Frontend Architect from Germany.
Any question regarding this article? Reach out to me on Twitter(new tab)! You can also find me on GitHub(new tab).