Update styled-components to the latest version 🚀

[greenkeeper]

Version 3.0.0 of styled-components was just published.

Dependency	styled-components
Current Version	2.4.0
Type	dependency

The version 3.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of styled-components.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

---

Release Notes

v3.0.0

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

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.

React Native warning

From time to time, it’s easy to forget to import styled-components/native instead on React Native. We now log a warning when you import the web-version accidentally. (see #1391 and #1394)

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)

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)

Commits

The new version differs by 80 commits.

• b602445 v3.0.0
• 6849080 Add notes on pre-commit to husky migration to CONTRIBUTING.md
• 7b01f9c Update CHANGELOG
• d811350 Merge pull request #1427 from pelotom/allow-component-type
• b463a8c Use React.ComponentType type in test
• 06b5ec4 Disallow styling component with wrong typed theme
• e4f59b0 Merge pull request #1426 from probablyup/react-16
• ab2e25c upgrade tests to react 16
• cd9dac9 Add link to the TypeScript bug report
• 3f3929b Add issue trail in comments
• c6bf52c Allow passing a React.ComponentType to styled()
• 0ab1abb Add failing test
• 761fb10 Merge pull request #1425 from probablyup/es-sourcemaps
• 10aa07c Merge pull request #1242 from theshortcut/enzyme-3
• b4044b1 hack around react-native global typescript definitions clashing with node's

There are 80 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper bot 🌴

[greenkeeper]

Version 3.0.1 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.0.2 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.0-2 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.0-3 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.0 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.1 just got published.

Update to this version instead 🚀

Commits

The new version differs by 6 commits.

• 5651781 v3.1.1
• e5e2329 Update CHANGELOG
• f01bb08 Merge pull request #1453 from styled-components/3.1.0
• 89984f1 Merge pull request #1455 from vvasilev-/fix-react-native-dist-bundle
• a1e695a Fix name of dist bundle for React Native
• 5f6bc1a Update CHANGELOG

See the full diff

[greenkeeper]

Version 3.1.2 just got published.

Update to this version instead 🚀

Commits

The new version differs by 2 commits.

• d9cfb2f v3.1.2
• 97bf3b2 Fix package.json entry

See the full diff

[greenkeeper]

Version 3.1.3 just got published.

Update to this version instead 🚀

Commits

The new version differs by 9 commits.

• e5c4056 v3.1.3
• 36af87e UPdate CHANGELOG
• 0286ca2 Merge pull request #1457 from styled-components/3.1.1
• 07b4867 Merge branch 'master' into 3.1.1
• 03cbfef Merge pull request #1460 from evan-scott-zocdoc/disable-speedy-test
• d980a70 changelog entry
• c2dabda disable speedy for non-production
• 0edca9d Merge pull request #1452 from manpenaloza/better-sandbox-stylings
• 8744a14 refactor sandbox example buttons to especially improve mobile appearance

See the full diff

[greenkeeper]

Version 3.1.4 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.5 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.1.6 just got published.

Update to this version instead 🚀

[greenkeeper]

Version 3.2.0 just got published.

Update to this version instead 🚀

Release Notes

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)

[greenkeeper]

Version 3.2.1 just got published.

Update to this version instead 🚀

Release Notes

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 for reporting this mistake!

Support out-of-order injection for @import at-rules

@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 rules appear at the top, often this would mean that a lone injectGlobal would get away with @import rules.

This wasn't sufficient as using @import in a component (obviously unsupported and not recommended) or in another consecutive injectGlobal would cause this logic to break, since @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 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 rules separately. So when you use injectGlobal and pass it an @import rule, it will now be stripped out of the rest of your CSS, and put into a completely isolated style tag.

[greenkeeper]

Version 3.2.2 just got published.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.0.3.

Update to this version instead 🚀

Release Notes for v4.0.3

• Interpolating a styled component into a string now returns the static component selector (emotion cross-compat)

  import styled from 'styled-components';
  const Comp = styled.div</span></span> <span class="pl-s">  color: red;</span> <span class="pl-s"><span class="pl-pds">;
  </span><span class="pl-s1"><span class="pl-pse">${</span>Comp<span class="pl-pse">}</span></span><span class="pl-pds">; // .sc-hash

• Add suppressClassNameWarning prop to disable warning when wrapping a React component with styled() and the className isn't used, by @Fer0x (see #2156)

• Expose ThemeContext to enable static contextType support for React 16.6, by @imbhargav5 (see #2152)

• Filter out invalid HTML attributes from attrs, by @Fer0x (see #2133)

• Add warning if an attrs prop is a function that returns an element, by @timswalling (see #2162)

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.1.0.

Update to this version instead 🚀

Release Notes for v4.1.0

• Performance optimization for fully static (no function interpolation) styled-components by avoiding using ThemeConsumer since it isn't necessary, by @mxstbr (see #2166)

• Allow disabling "speedy" mode via global SC_DISABLE_SPEEDY variable, by @devrelm (see #2185)

  To make use of this, you can either set SC_DISABLE_SPEEDY in your app's entry file or use something like webpack.DefinePlugin to do it at build time:

  webpack.DefinePlugin({
    SC_DISABLE_SPEEDY: true,
  });

• Attrs can now be passed a function (see #2200); thanks @oliverlaz for providing an early PoC PR for this!

  e.g.:

  styled.div.attrs(props => ({ 'aria-title': props.title }))``;

• Fix the warnTooManyClasses dev helper not being totally dead code eliminated in production (see #2200)

• Deprecate functions as object keys for object-form attrs (see #2200)

  e.g.:

  styled.div.attrs({ 'aria-title': props => props.title })``; // bad
  styled.div.attrs(props => ({ 'aria-title': props.title }))``; // good

  Support for this will be removed in styled-components v5. The primary impetus behind this change is to eliminate confusion around basic functions vs styled-components vs React components provided as values in the object-form attrs constructor, each of which has different handling behaviors. The single outer function to receive the props and then return a props object is conceptually simpler.

• The standalone CDN build is now UMD-compliant and can be used with RequireJS, etc.

• Add pixels to unitless numbers when object interpolation is used, by @Fer0x (see #2173)

• Trying to interpolate a non-styled component into CSS is now a hard error, rather than a warning (see #2173)

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.1.1.

Update to this version instead 🚀

Release Notes for v4.1.1

• Put back the try/catch guard around a part of the flattener that sometimes receives undetectable SFCs (fixes an errant hard error in an edge case)

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.1.2.

Update to this version instead 🚀

Release Notes for v4.1.2

• Fix function-form attrs to receive the full execution context (including theme) (see #2210)

• Adjust innerRef deprecation warning to not be fired if wrapping a custom component, since that underlying component may not be on forwardRef yet and actually using the prop (see #2211)

• Expose the ThemeConsumer and ThemeContext exports for the native and primitives entries (see #2217)

• Remove createGlobalStyle multimount warning; Concurrent and Strict modes intentionally render the same component multiple times, which causes this warning to be triggered always even when usage is correct in the application (see #2216)

• Folded components are now targettable via component selector as in v3 if you used the old .extend API (see #2239)

• Don't treat uppercased strings as tag-like components and don't filter out props from them (see #2225)

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.1.3.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.2.0.

Update to this version instead 🚀

Commits

The new version differs by 31 commits ahead by 31, behind by 3.

• df2c947 Publish
• ad5185c v4.2.0
• 80ca302 try to handle React's streaming renderer yielding at inopportune times (#2413)
• cc0f5d2 expose StyleSheetContext and StyleSheetConsumer (#2456)
• e6f1b85 #2080 forgot to replace \n to '' in className (#2333) (#2338)
• 822d9c9 Filter suppressClassNameWarning to not to pass down to wrapped components (#2365)
• c22b95f Reduce GC pressure by avoiding to create new object types (#2428)
• 563941e #2080 forgot to replace \n to '' in className (#2333)
• 0ed5eb6 Add svg marker tag to domElements.js (#2389)
• 78e412d Some small linting fixes (#2395)
• ab57327 Secure code of conduct links (#2445)
• fd50880 Merge pull request #2443 from styled-components/revert-2430-refactor/clean-up
• a1bda36 Revert "Delete unused src folder. (#2430)"
• 9d06594 Delete unused src folder. (#2430)
• c1cd458 Merge pull request #2437 from hiroppy/feature/fix-typo

There are 31 commits in total.

See the full diff

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.2.1.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.3.0.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.3.1.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.3.2.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.4.0.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 4.4.1.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 5.0.1.

Update to this version instead 🚀

[greenkeeper]

• The dependency styled-components was updated from 2.4.1 to 5.1.0.

Update to this version instead 🚀

[greenkeeper]

---

🚨 Reminder! Less than one month left to migrate your repositories over to Snyk before Greenkeeper says goodbye on June 3rd! 💜 🚚💨 💚

Find out how to migrate to Snyk at greenkeeper.io

---

• The dependency styled-components was updated from 2.4.1 to 5.1.1.

Update to this version instead 🚀