@probablyup probablyup released this Jun 20, 2018 · 59 commits to master since this release

  • Fixed a regression when extending a styled(StyledComponent) introduced in 3.3.0, by @probablyup (see #1819)

  • Adjust how displayName is generated when not using Babel to properly preserve a displayName passed via withConfig, by @probablyup (see #1755)

  • [TS] Fix props being removed when indexed types are passed to WithOptionalTheme, by @devrelm (see #1806)

  • [TS] Allow TypeScript 2.9.1 to accept tagged template type argument, by @Igorbek (see #1798)

  • Add ref documentation for React.createRef(), by @julmot (see #1792)


@probablyup probablyup released this Jun 4, 2018 · 80 commits to master since this release

Lots of 🔥fixes in this release! As always, thank you contributors for your hard work 🙇

Note: v3.3.1 was skipped due to a bad deploy.


@probablyup probablyup released this Jun 2, 2018

db30d2c [v2] Make TypeScript definition compatible with TS 2.9.1 - ported from #1773


@probablyup probablyup released this May 25, 2018 · 136 commits to master since this release

The team is very excited to release v3.3.0, containing a number of important bugfixes and quality of life improvements to the library! This will probably be the last feature release before v4.0 (roadmap) this summer.

Thank you so much to all the people who contributed. styled-components is nothing without its community ❤️

  • Fix off-by-one error in insertRuleHelpers.js, by @migueloller (see #1749)

  • Add first-class support for objects, by @mxstbr (see #1732)

    const Component = styled.div({
      color: 'blue'
  • Fix typo in console warning about multiple instances, by @LucianBuzzo (see #1730)

  • Make the multiple instance warning criteria a little more strict to avoid badgering people running unit tests, by @probablyup (see #1693)

  • Fix React.createRef() values for innerRef being ignored in React Native, by @simonbuchan (see #1718)

  • Hoist non-react static properties on wrapped classes, by @probablyup (see #1750)

  • Support attributes prefixed by x-, by @mlecoq (see #1753)


@probablyup probablyup released this Apr 17, 2018 · 178 commits to master since this release

The primary fix in this patch release was related to a misconfiguration in the stylis rule splitter which could cause some rules to be discarded when there was no whitespace around selector operands.

  • Fix cascade: false being erroneously set on the Stylis rule splitter (see #1677)
  • Fix typo in ComponentStyle.js comments (see #1678)
  • Accept ref forwarding components in styled constructor (see #1658)
  • Fix onInvalid check in validAttrs, by @SlootSantos (see #1668)
  • Fix makeSpeedyTag's css method (see #1663)
  • Fix ComponentStyle caching strategy to take StyleSheet cache into account, by @darthtrevino (see #1634)
  • Add new test-utils to simplify finding styled-components in the DOM in unit testing scenarios, by @jamiebuilds (see #1652)
  • Add minified commonjs and esm builds for bundle size tracking (see #1681)

v3.2.4 / v3.2.5

@kitten kitten released this Mar 30, 2018 · 225 commits to master since this release

Make sure that you're installing v3.2.5 as v3.2.4 was missing some postinstall scripts for our OpenCollective message 😅


Preprocessing option in our babel plugin

The preprocess option was never here to stay and its experiment has essentially proven to be insufficient for our future goals. Check out Sweetsour/ISTF for our current effort of making styled-components more performant and adding a CSS pipeline to it: https://github.com/kitten/sweetsour

Thanks to @Samatar26 for his PR!


Add process.env.SC_ATTR to override our style tag's marker attribute

While we're figuring out how to improve our context-drive StyleSheetManager in a stable way that works with SSR and sharded stylesheets, we would still like to provide a way for you to use styled-components that enables widgets and other use-cases where it might be necessary to prevent us from destroying your stylesheet on pages.

Specifically this affects people who are building non-SSR code that runs on pages where styled-components is already in place. In these cases our SSR rehydration would go along and happily remove another module's style tags. We haven't considered this closely as it is not a good practice in our eyes to run duplicated styled-components modules in a single app. But when you're not dealing with a single app only it might make sense.

You can now change the the style tag's styled-components attribute by bundling with the SC_ATTR environment variable. Given a setup where you can set this variable, we will now inject style tags with a different attribute, so that they're not affected by the standard SSR rehydration.

Documentation will follow soon; Thanks to @Fer0x for this change!


@kitten kitten released this Mar 14, 2018 · 249 commits to master since this release


SSR memory leaks? No more!

This release simply frees up some memory by removing cloned StyleSheets when they're not needed anymore.


@kitten kitten released this Mar 13, 2018 · 256 commits to master since this release


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 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 (min-width: 768px) { color: papayahwip; }

/* incorrect output */
@media (min-width: 768px) {
  &:hover { color: papayahwip; }
/* ^ note the extra closing curly brace */

/* v3.2.2 fixed output */
@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 for contributing this fix!