Bump styled-components from 2.4.0 to 3.2.2 #134

dependabot-preview · 2018-03-14T05:18:55Z

Bumps styled-components from 2.4.0 to 3.2.2.

Release notes

v3.2.2

Fixes

SSR accumulating non-critical CSS

If you've noticed that v3.2 would cause your server-side rendered app to output all styles it knows of, you weren't alone!

The ServerTag was accidentally cloning itself incorrectly. This meant that the ServerStyleSheet would inherit the same server styles from the “master” StyleSheet.

We now clone the tag correctly and a test is in place to ensure this doesn't happen again, since this bug came up a couple of times in past v2 releases. Thanks to [DeividasK](https://github.com/DeividasK) for reporting this bug!

Fix at-rules nested inside style rules

Have some styles gone missing? In the newer >=3.1 versions that introduced speedy mode (i.e. insertRule support) some rules might not have been injected properly. This came down to insertRule being more strict with what we add. In development an incorrectly formatted CSS rule might not cause much trouble, but in production insertRule complains about it.

Stylis, more specifically stylis-rule-sheet, was generating invalid CSS when at-rules were nested inside style rules. For instance the following CSS would cause trouble:
/* input */
&:hover {
  [**media**](https://github.com/media) (min-width: 768px) { color: papayahwip; }
}

/* incorrect output */
[**media**](https://github.com/media) (min-width: 768px) {
  &:hover { color: papayahwip; }
}}
/* ^ note the extra closing curly brace */

/* v3.2.2 fixed output */
[**media**](https://github.com/media) (min-width: 768px) {
  &:hover { color: papayahwip; }
}
Fix imprecise IS_BROWSER detection

Before v3.2.2 we would check whether styled-components is running inside the browser using: typeof window !== 'undefined'. This proofed insufficient in a couple of special cases for some people, so we have now added 'HTMLElement' in window to this check.

Thanks to [danieldunderfelt](https://github.com/danieldunderfelt) for contributing this fix!

v3.2.1

Fixes

Incorrect SSR React Element output

We accidentally removed dangerouslySetInnerHtml in our SSR output with just some children string. This would cause some characters to be encoded.

We have corrected this mistake and more unit tests are now in place to prevent this from happening again. Thanks to [misund](https://github.com/misund) for reporting this mistake!

Support out-of-order injection for [**import**](https://github.com/import) at-rules

[**import**](https://github.com/import) rules must appear at the top of style sheets (i.e tags).

In older versions we used to shard our style tags into local and global ones. Because any CSS that is being passed to us is also reordered, so that [**import**](https://github.com/import) rules appear at the top, often this would mean that a lone injectGlobal would get away with [**import**](https://github.com/import) rules.

This wasn't sufficient as using [**import**](https://github.com/import) in a component (obviously unsupported and not recommended) or in another consecutive injectGlobal would cause this logic to break, since [**import**](https://github.com/import) wouldn't appear at the top of the stylesheet anymore.

This oversight was made worse by the fact that we stopped sharding local and global style tags. This would mean that [**import**](https://github.com/import) could now show up fairly late in a stylesheet, instead of at its top.

In this version we introduce a patch that creates an additional style tag at the top of all other ones that we create, when necessary, which is going to accept all [**import**](https://github.com/import) rules separately. So when you use injectGlobal and pass it an [**import**](https://github.com/import) rule, it will now be stripped out of the rest of your CSS, and put into a completely isolated style tag.

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](https://github.com/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](https://github.com/mdugue)

[jdrouet](https://github.com/jdrouet)

[marhalpert](https://github.com/marhalpert)

[pziemkowski](https://github.com/pziemkowski)

[gribnoysup](https://github.com/gribnoysup)

[marionebl](https://github.com/marionebl)

[bteng22](https://github.com/bteng22)

[paul-veevers](https://github.com/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:

Apply a workaround to re-enable "speedy" mode for IE/Edge (see #1468)

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](https://github.com/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](https://github.com/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](https://github.com/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](https://github.com/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](https://github.com/Andarist)

[lukebelliveau](https://github.com/lukebelliveau)

[BenLorantfy](https://github.com/BenLorantfy)

[tazsingh](https://github.com/tazsingh)

[gribnoysup](https://github.com/gribnoysup)

[probablyup — Our new core contributor](https://github.com/probablyup)

(In no particular order)

Changelog

Sourced from this file

Changelog

All notable changes to this project will be documented in this file. If a contribution does not have a mention next to it, [geelen](https://github.com/geelen) or [mxstbr](https://github.com/mxstbr) did it.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

Unreleased

Fix ServerTag.clone() not properly cloning its names and markers (see #1605)

Fix nested media at-rules by upgrading to stylis@^3.5.0 and stylis-rule-sheet@^0.0.10 (see #1595)

Fix the IS_BROWSER check to work more reliably in projects where window may be shimmed, by [danieldunderfelt](https://github.com/danieldunderfelt) (see #1599)

[v3.2.1] - 2018-03-07

Fix [**import**](https://github.com/import) rules not being enforced to appear at the beginning of stylesheets (see #1577)

Fix StyleTags toElement outputting inline CSS which would cause URL encoding (see #1580)

[v3.2.0] - 2018-03-05

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

Add foreignObject svg element (see #1544)

Add controlsList to validAttr list (see #1537)

Enable stylis' semicolon autocompletion which was accidentally disabled for a lot of prior releases (see #1532)

Fix insertRule injection (speedy mode in production) of nested media queries by upgrading stylis-rule-sheet (see #1529 and #1528)

Add StyleSheet.remove API method to be able to delete rules related to a component (see #1514)

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

Rewrite and refactor StyleSheet and ServerStyleSheet (no breaking change, see #1501)

Add warning if there are several instances of styled-components initialized on the page (see #1412)

Add target prop to StyleSheetManager component to enable specifying where style tags should render (see #1491)

[v3.1.6] - 2018-02-03

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)

[v3.1.5] - 2018-02-01

Apply a workaround to re-enable "speedy" mode for IE/Edge (see #1468)

Fix memory leak in the server-side streaming logic (see #1475)

[v3.1.4] - 2018-01-29

Disable "speedy" mode for IE and Edge. There seems to be some incompatibility with how the insertRule API functions in their rendering stack compared to the other vendors. (see #1465)

[v3.1.3] - 2018-01-29

Disable "speedy" mode for non-production environments, fixes jest-styled-components compatibility (see #1460)

[v3.1.1] - 2018-01-29

Hotfix for importing in ReactNative, thanks to [vvasilev-](https://github.com/vvasilev-) (see #1455)

[v3.1.0] - 2018-01-29

Compile out error messages for production builds (see #1445)

Use much faster CSS injection in the browser, by [schwers](https://github.com/schwers) and [philpl](https://github.com/philpl) (see #1208)

Add support for streaming server-side rendering, by [probablyup](https://github.com/probablyup) (see #1430)

[v3.0.2] - 2018-01-22

Add secret internals for jest-styled-components (do not use or you will be haunted by spooky ghosts 👻) (see #1438)

[v3.0.1] - 2018-01-22

Add support for SafeAreaView when using styled-components in a React Native project (see #1339)

Remove support for deprecated Navigator when using styled-components in a React Native project (see #1339)

Ship flat bundles for each possible entry, thanks to [Andarist](https://github.com/Andarist) (see #1362)

Add ESLint precommit hook, thanks to [lukebelliveau](https://github.com/lukebelliveau) (see #1393)

Fixed nested themes not being republished on outer theme changes, thanks to [Andarist](https://github.com/Andarist) (see #1382)

Add warning if you've accidently imported 'styled-components' on React Native instead of 'styled-components/native', thanks to [tazsingh](https://github.com/tazsingh) and [gribnoysup](https://github.com/gribnoysup) (see #1391 and #1394)

Fixed bug where innerRef could be passed as undefined to components when using withTheme. This could cause issues when using prop spread within the component (e.g. {...this.props}), because React will still warn you about using a non-dom prop even though it's undefined. (see #1414)

Expose isStyledComponent utility as a named export. This functionality is useful in some edge cases, such as knowing whether or not to use innerRef vs ref and detecting if a component class needs to be wrapped such that it can be used in a component selector. (see #1418)

Remove trailing commas on function arguments (not compatible with ES5 JS engines)

Ship source maps (see #1425)

Upgrade test suites to run against react v16 (see #1426)

Streaming rendering support (requires React 16, see #1430)

Commits

e0faa88 Add entry to CHANGELOG
c0d3251 Merge branch 'master' into minify-getStyleElement-output
2b58c8c bump threshold for now
e2ffaca Merge pull request #1224 from bbohen/minify-getStyleElement-output
725b9a8 compile out development error messages for production
75e3e4c Merge pull request #1445 from probablyup/compile-out-errors
345cd65 Replace rollup-plugin-hypothetical with custom ignore plugin
371e009 Merge pull request #1448 from styled-components/fix/windows-internals-build
edcc2e7 implement streaming support for SSR
05eb11a implement migrateStreamingStyles utility
Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

If you'd like to skip this version, you can just close this PR. If you have any feedback just mention @dependabot in the comments below.

Bumps [styled-components](https://github.com/styled-components/styled-components) from 2.4.0 to 3.2.2. - [Release notes](https://github.com/styled-components/styled-components/releases) - [Changelog](https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md) - [Commits](styled-components/styled-components@v2.4.0...v3.2.2) Signed-off-by: dependabot[bot] <support@dependabot.com>

dependabot-preview · 2018-03-15T05:22:14Z

Superseded by #136.

dependabot-preview bot added the dependencies label Mar 14, 2018

dependabot-preview bot mentioned this pull request Mar 14, 2018

Bump styled-components from 2.4.0 to 3.2.1 #126

Closed

dependabot-preview bot force-pushed the dependabot/npm_and_yarn/styled-components-3.2.2 branch from 499315c to e9c6238 Compare March 14, 2018 18:58

dependabot-preview bot closed this Mar 15, 2018

dependabot-preview bot deleted the dependabot/npm_and_yarn/styled-components-3.2.2 branch March 15, 2018 05:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump styled-components from 2.4.0 to 3.2.2 #134

Bump styled-components from 2.4.0 to 3.2.2 #134

dependabot-preview bot commented Mar 14, 2018 •

edited

Loading

dependabot-preview bot commented Mar 15, 2018

Bump styled-components from 2.4.0 to 3.2.2 #134

Bump styled-components from 2.4.0 to 3.2.2 #134

Conversation

dependabot-preview bot commented Mar 14, 2018 • edited Loading

v3.2.2

Fixes

SSR accumulating non-critical CSS

Fix at-rules nested inside style rules

Fix imprecise IS_BROWSER detection

v3.2.1

Fixes

Incorrect SSR React Element output

Support out-of-order injection for [**import**](https://github.com/import) at-rules

v3.2.0

Deprecations

Stream reconciliation function consolidateStreamedStyles

Refactors

Rewrite and refactor StyleSheet and ServerStyleSheet

Misc.

Added

StyleSheetManager target prop

Multiple instance of styled-components warning

StyleSheet.remove API (Internal)

Misc.

Fixes

Enable semicolon autocompletion in styles

Nested media queries in insertRule aka production mode

Misc.

Thanks

v3.1.6

v3.1.5

v3.1.4

v3.1.1

v3.1.0

See the release blogpost for more details!

Added

Streaming server-side rendering support

Much faster CSS injection in production

v3.0.0 / v3.0.1

Breaking Changes

Shipping only flat bundles

Added styled.SafeAreaView and removed styled.Navigator for React Native

Added

isStyledComponent utility

Improved React Native Importing

Deprecations

Fixes

Chores

Thanks

Changelog

Unreleased

[v3.2.1] - 2018-03-07

[v3.2.0] - 2018-03-05

[v3.1.6] - 2018-02-03

[v3.1.5] - 2018-02-01

[v3.1.4] - 2018-01-29

[v3.1.3] - 2018-01-29

[v3.1.1] - 2018-01-29

[v3.1.0] - 2018-01-29

[v3.0.2] - 2018-01-22

[v3.0.1] - 2018-01-22

dependabot-preview bot commented Mar 15, 2018

dependabot-preview bot commented Mar 14, 2018 •

edited

Loading

Fix imprecise `IS_BROWSER` detection

Support out-of-order injection for `[import](https://github.com/import)` at-rules

Stream reconciliation function `consolidateStreamedStyles`

Rewrite and refactor `StyleSheet` and `ServerStyleSheet`

`StyleSheet.remove` API (Internal)

Nested media queries in `insertRule` aka production mode

Added `styled.SafeAreaView` and removed `styled.Navigator` for React Native

`isStyledComponent` utility