Bugfix for the last style tag sometimes being emitted multiple times during streaming (see #1479)
Bugfix for speedy mode rehydration and added handling for out-of-order style injection (see #1482)
NOTE: When calling
consolidateStreamedStyles() after streaming, make sure it is called as early in the bundle as possible.
styled-components injects new CSS upon construction of new components not prerender, so consolidation must happen before any new CSS is injected on the page.
Hotfix: disable speedy mode for microsoft browsers to mitigate an issue with our usage of the
insertRule() API. We are investigating to get it enabled again in the near future.
See the release blogpost for more details!
Streaming server-side rendering support
React 16 introduced
ReactDOMServer.renderToNodeStream, thanks to @probablyup styled-components now has full streaming server-side rendering support so you can take advantage of the faster Time-To-First-Byte!
See the documentation on the website for more information.
Much faster CSS injection in production
Thanks to @schwers we now use
insertRule in production, which makes for much faster CSS injection. In benchmarks this change makes styled-components mount ~10x faster and re-render ~20x faster!
Note: Your app will probably not mount 10x faster, but we've seen Time-To-First-Interactive drop by a couple hundred milliseconds in production apps with this change!
This major release prepares some great features that are yet to come, so be ready for some new and exciting features soon! But for now please read on for what’s in the current (majorly awesome) release.
Shipping only flat bundles
Thanks to @Andarist we're now shipping flat bundles for each of our entries only. This means that the entire
lib/ folder won’t be inside our npm package.
While this might break a couple of third party libraries, it stands to reason that our internals should not have been exposed in this way before.
This new way of bundling not only makes it easier for us to perform some refactors quite soon, it also makes it easier for us to optimise our releases even more. Please check your codebases and libraries for usages of our internals and make sure not to rely on them. Open an issue please if you need help to migrate to v3.
There are bundles for Web, React Native, and React Primitives. The former two come with both ES Modules and CommonJS bundles. The Web bundle also comes with a minified bundle. We’re also now shipping source maps for each of these bundles.
styled.SafeAreaView and removed
styled.Navigator for React Native
We’ve added the missing
SafeAreaView shortcut to the native bundle, and removed the deprecated
Navigator. Finally! The typings for TypeScript have been updated as well to reflect this breaking change. (see #1339)
Because we’re now shipping flat bundles we also wanted to provide a frequently requested utility function that determines whether a given component is a StyledComponent. This utility returns a boolean telling you just that. (see #1418)
It should make it easier to determine whether to pass on
ref for instance in some cases, and should allow you to avoid accessing some of our internals or to check whether a component has
Improved React Native Importing
From time to time, it’s easy to forget to import
styled-components/native instead on React Native. So now it’s possible to import just
styled-components on React Native as well and Metro Bundler will automatically switch to the native bundle. This release also deprecates the old
styled-components/native import, so make sure to migrate.
- As stated above, importing from
styled-components/nativeis deprecated. Please switch to just
withTheme, which can lead to unexpected behaviour when spreading props or passing it on. (see #1414)
- Nested themes were not being republished correctly when the outer theme changes (see #1382)
- Add ESLint precommit hook, thanks to @lukebelliveau (see #1393)
- Remove trailing commas on function arguments (not compatible with ES5 JS engines)
- Upgrade test suites to run against react v16 (see #1426)
- Ship source maps for all bundles to make debugging easier (see #1425)
Thanks to the numerous contributors and maintainers who have worked towards this release. We're sorry if some names are missing, so thanks additionally goes out to everyone who’s worked hard to get v3 out!
(In no particular order)