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.
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!
(In no particular order)