v3.2.0

This is a small minor release that introduces a couple of minor changes, but also a complete rewrite of our StyleSheet implementation. Not only is it smaller, but it also lowers the barrier to entry for new contributors (like yourself, dear reader, hopefully!) to read and understand it, and eventually contribute great new features!

Deprecations

Stream reconciliation function consolidateStreamedStyles

If you’ve recently migrated to streamed server-side-rendered styles, then you will be familiar with our consolidateStreamedStyles function, which was an “extended rehydration” that moved all streamed styled-components style tags when called.

Due to our refactor of our StyleSheet behaviour (see below), our new rehydration implementation now takes care of this for you automatically.

This function will now output a deprecation warning when it’s being used and effectively does nothing at all. (Take a look at its source for more information)

Refactors

Rewrite and refactor StyleSheet and ServerStyleSheet

We now handle the style rules around a “style tag” based approach, which also means that our BrowserStyleSheet is a thing of the past. Depending on the environment, we will now switch between server, browser, and insertRule style tags, which all abstract their internal behaviour.

The concept of “local” vs “global” styles has been removed, in anticipation of some upcoming, future APIs, and our rehydration has been rewritten as well. You will see only a single style tag after rehydration, and now splits between style tags when injecting global styles as well. This is not a breaking change, but produces the same behaviour and specificity as it did before. (Change)

You will also notice a couple of improved and more detailed error messages—if you ever run into them that is—which will help you to understand some things that might go wrong more easily. (Change)

Style tags will now also be injected consecutively in the DOM. This means that styled-components won’t append them to the target, but will append them to its last style tag, if a first one was already injected. This should help you to predict the order of injection, when dealing with external CSS. (Change)

Misc.

• Replace murmurhash implementation and avoid destructuring tag function arguments (see #1516)

Added

StyleSheetManager target prop

You can now pass an element to a StyleSheetManager and all the components in its context below in the tree will add their styles to new tags in the specified target.

While this is not guaranteed to work with SSR yet, it can help you to easily add runtime-styles to a different part of the DOM. For example the shadow DOM.

Multiple instance of styled-components warning

Starting from this version, style-components will log a warning when multiple instances of it are being bundled and run on the same page. Due to our rehydration this can lead to errors, where one instance of styled-components will interfere with the other. This is why we have decided to add a small warning notifying you of this, since we don’t see the practice of adding multiple styled-components instances to a single page as a best practice.

Please note that this warning won’t show up, when older version of styled-components are present, as they don’t contain the code necessary to be detected.

StyleSheet.remove API (Internal)

This is an internal API that allows us to remove rules and components from our StyleSheets, which will come in handy for some new APIs for global styles quite soon.

Misc.

• Add controlsList to validAttr list (see #1537)
• Add foreignObject svg element (see #1544)

Fixes

Enable semicolon autocompletion in styles

We accidentally disabled semicolon autocompletion in stylis, which accidentally introduced an unnoticed breaking change in a past version a while back.

Semicolon autocompletion is now enabled and back again. Thanks to @Blasz for reporting this mistake!

Nested media queries in insertRule aka production mode

Our version of stylis-rule-sheet was updated which fixes nested media queries which can now be used as is expected in production. (see #1529 and #1528)

Misc.

• Remove type="text/css"-attribute from style tag to remove warnings from w3c validator (see #1551)

Thanks

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!

• @mdugue
• @jdrouet
• @marhalpert
• @pziemkowski
• @gribnoysup
• @marionebl
• @bteng22
• @paul-veevers

(In no particular order)

v3.1.6

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

v3.1.5

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)

v3.1.4

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.

v3.1.1

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

v3.1.0

See the release blogpost for more details!

Added

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

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)

Added

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)

Deprecations

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

Fixes

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

Chores

• 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

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!

• @Andarist
• @lukebelliveau
• @BenLorantfy
• @tazsingh
• @gribnoysup
• @probablyup — Our new core contributor

(In no particular order)

v2.4.0

More stable class names

• babel-plugin-styled-components@1.4.0
• styled-components@2.4.0

These tandem releases introduce a stabler algorithm for determining the unique hash of each component, which should lead to more consistent class names across environments. (both across dev/test/prod and across client/server when using SSR)

Big thanks to @probablyup, ref #1381 and styled-components/babel-plugin-styled-components#112

v2.3.3

• Fix the attr filtering optimization removed in v2.3.2 which leads to bundle size improvement, thanks to @probablyup (see #1377)
• Move last bits of docs from the README to the website, thanks to @Carryon, @SaraVieira and @JamesJefferyUK

v2.3.2

Hotfix release, fixes an issue with v2.3.1 where attributes wouldn't be filtered correctly.