Introducing Fela 6.0
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 to provide the most powerful styling toolbelt, we are proud to announce a whole new major version of Fela! 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 compliation using our brand new babel plugin.
babel-plugin-fela
With this release, the very first version of Fela’s new babel plugin 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 provided by react-fela, preact-fela and inferno-fela. However, further use cases will be shipped soon.
PubSub ThemeProvider
Theming with the built-in ThemeProvider has been completely rewritten. The old implementation was purely based on React’s context. 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. (e.g. if you’re using react-redux’s connect-HoC).
To support real dynamic theming, the ThemeProvider has been refactored and is now built on the publish-subscribe design pattern.
Additionally, we now ship a withTheme-HoC to safely inject the theme object into any React component.
@supports
Also for the first time, we now officially support the @supports CSS syntax. 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:
- hoisting static component methods
- right-to-left convertion using fela-plugin-rtl or fela-plugin-bidi
- blocking ad-sensitive classNames by default
- using styles-debugger for layout debugging
- overall TypeScript definition improvements
As always, this is just the start. We are not done yet.
If you like the improvements and/or Fela itself, consider supporting us on OpenCollective. With your help, we can make the best styling toolbelt a reality. You may also follow Fela on Twitter.
