Latest release


@probablyup probablyup released this Feb 3, 2018 · 117 commits to master since this release

  • 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.


@probablyup probablyup released this Feb 1, 2018 · 129 commits to master since this release

A quick bugfix release:

  1. Apply a workaround to re-enable "speedy" mode for IE/Edge (see #1468)
  2. Fix a memory leak in the server-side streaming logic (see #1475)


@probablyup probablyup released this Jan 30, 2018 · 140 commits to master since this release

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.


@mxstbr mxstbr released this Jan 29, 2018 · 156 commits to master since this release

Hotfix ReactNative support, which was broken in v3.1.0.


@mxstbr mxstbr released this Jan 29, 2018 · 162 commits to master since this release

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!

v3.0.0 / v3.0.1

@kitten kitten released this Jan 22, 2018 · 234 commits to master since this release

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. 🔥

Breaking Changes

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.

Added 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)


isStyledComponent utility

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 innerRef or ref for instance in some cases, and should allow you to avoid accessing some of our internals or to check whether a component has styledComponentId set.

More information on this utility can be found on our website’s API reference section.

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.

We also now log a warning when the web-version of styled-components is accidentally imported in React Native, so you can be sure that the right bundle is always being used. (see #1391 and #1394)


  • As stated above, importing from styled-components/native is deprecated. Please switch to just styled-components.


  • innerRef could be undefined when using 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)