Releases

Updating styled components is usually just an npm install, only major version might have breaking changes that will be noted in the CHANGELOG

v2.4.0 22/12/2017

More stable class names

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 styled-components/styled-components#1381 and styled-components/babel-plugin-styled-components#112

v2.3.3 20/12/2017

v2.3.2 19/12/2017

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

v2.3.1 19/12/2017

Badge

There's now an official styled-components badge, thanks to @iRoachie (see #1363)! Throw that on all the projects you have that use styled-components:

style: styled-components

[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

Changes

Smaller bundle size

@probablyup spent some time removing our warning messages in production mode, reducing the library size by about half a kB min+gzip! (see #1365)

Fix unminified UMD bundle

It turns out our unminified UMD build contained some process.env declarations, which broke when used via a <script> tag in your HTML. This is now fixed, thanks to @maciej-ka! (see #1355)

Prettier

Our entire repo is now using Prettier, making it easy to stay consistent with our code style, thanks to @existentialism! (see #593)

Update contribution and community guidelines

We spent some time updating our contribution and community guidelines to encourage shallow contributions to ensure the longevity of this project and to remove the core team as bottlenecks from development. The TL;DR is this:

Note

If your Pull Request is merged, regardless of content, you're eligible for push access to the organization on GitHub. This is checked for on pull request merges and an invite is sent automatically.

See our contributing.md for more information on Why and How we do this, and expect a blogpost about it in the near future too. Thanks to @orta, @alloy and @ashfurrow for encouraging and helping us to explore this way of managing open source.

v2.3.0 15/12/2017

Big changes

Easier contributing

Thanks to @gribnoysup we now have a sandbox for quickly testing changes in the library in a real app! (see #1257) To start contributing locally, run these commands locally and you're all set up:

# Clone the repo locally
git clone [email protected]:styled-components/styled-components.git
# Install the dependencies in the root folder
yarn install # or npm install
# Build the library
yarn run build # or npm run build
# Install the Sandbox app dependencies
cd sandbox
yarn install # or npm install
# Start the sandbox app!
yarn run start # or npm run start

Better support for innerRef when wrapping function components

Function components cannot have refs so our innerRef prop would break when used with withTheme:

Thanks to @MatthieuLemoine, rather than attaching a ref to stateless function components (which results in a warning) we now pass the innerRef prop to it directly for it to handle. (see #1205)

Smaller changes

  • Consistently escape displayNames when creating componentId, thanks to @evan-scott-zocdoc (see #1313)
  • Add basic support for style objects in the Typescript definitions, thanks to @nbostrom (see #1123)
  • Better issue template (see #1342)

v2.2.4 29/11/2017

In this release we're fixing a little problem that'd occur when using styled-components using static styling in development together with react-hot-loader.

As hot loading updates the styles, the styled components wouldn't update as they initially judged their styles as being static. This behaviour is now being disabled in development.

v2.2.3 29/10/2017

We found a significant bug in styled-components for React Native, where components wouldn't update their styles even if they are being passed new props. 😿

If you're using React Native with styled-components v2.2.2, you probably already noticed this bug. Please update to v2.2.3.

  • Fix incorrect StyledNativeComponent#componentWillReceiveProps implementation (see #1276)

v2.2.2 24/10/2017

Another quick release with lots of bug fixes! :tada:

  • Prevent withTheme HOC from breaking when passing a theme from defaultProps, thanks to @kutyel (see #1130)
  • Refactor out theme logic in StyledComponent's componentWillMount & componentWillReceiveProps (see #1130)
  • Add onReset to valid react props list, thanks to @4urbanoff (see #1234)
  • Add support for ServerStyleSheet PropType in both StyleSheetManager and StyledComponent, thanks to @digital-flowers (see #1245)
  • Prevent component styles from being static if attrs are dynamic, thanks to @schwers (see #1219)
  • Changed 'too many classes' error to recommend attrs for frequently changed styles, thanks to @lukebelliveau (see #1213)

v2.2.1 04/10/2017

A new day, a new release. Some more performance improvements for browser-usage, some bug fixes and an all-new awesome-styled-components repo with all of the ecosystem goodness!

Changes

v2.2.0 27/09/2017

Another awesome release, mainly some performance improvements! :tada:

Changed

  • Improve mount and unmount performance for real-world use cases, thanks to @schwers
  • Fixed minification issue so you should now see slightly smaller bundles, thanks to @bkazi
  • Fixed the nonce attribute on global styles, thanks to @mzmiric5
  • Add styled.marquee, thanks to @reznord

v2.1.2 04/08/2017

This is a big patch release with a bunch of fixes! We're preparing for some big performance improvements in our next minor release, and are working towards stabilising more code to be able to refactor it for v3!

All our documentation is available on our website, as always: https://www.styled-components.com

Changed

Added support for webpack nonces

Albeit not the final work on this, we added some initial support webpack nonces. https://github.com/styled-components/styled-components/pull/1022

Added an alias for React Native's ImageBackground component

We added the missing alias for the new ImageBackground component in React Native. Go try it out! https://github.com/styled-components/styled-components/pull/1028

Snapshot testing

We switched more of our tests over to snapshot testing! We hope that this will greatly improve our development speed when implementing new features that only slightly affect our CSS fixtures in our tests.

Be tuned for more!

Fixed

Deterministic ID generation

We previously had no plans for fixing the deterministic ID generation for our new v2 APIs until the new v3 code changes. But since the babel-plugin and SSR have become more important for a huge amount of our users, we now have a fix ready that should support these two methods.

.extend and .withComponent now create new component IDs during the runtime, which are still deterministic. While they're not created during compile time, this is a step towards our good SSR support, which is very important to us.

Misc.

  • Refactor variable in generateAlphabeticName.js
  • Fix .extend not working after chaining it repeatedly (3 or more inheritances)
  • Fix Flow type signatures for compatibility with Flow v0.47.0

Thanks

Thanks to the numerous contributors and maintainers who have contributed to this release.

(In no particular order)

The deterministic ID change is arguably the biggest reason for this patch, and the issue behind it was specifically created as a "Good first task" for contributors with either or both little experience in OSS development, or the styled-components project. Watch out for this tag in the future, if you'd like to contribute to styled-components and make a difference! :tada:

v2.1.1 03/07/2017

This contains an important patch that restores compatibility with styled-jsx and thus next.js.

Before stylis would share middleware and options for everyone who's using it. In v3.2 it was fixed so that an instance of stylis can be created that is isolated from the global singleton and other instances. This previously wasn't possible and broke compatbility with styled-jsx, since it's also using stylis.

Fixed

  • Remove dependencies from ES bundle. Now all dependencies are imported, not bundled, when using the ES-style import bundle.
  • Upgrade to stylis v3.2 and use constructor

Thanks

Thanks to the numerous contributors and maintainers who have contributed to this release, including:

v2.1.0 15/06/2017

A patch-sized release with a minor version bump because of adding the new (experimental) styled-components/primitives entry point.

Changed

React Primitives

As presented in this excellent talk from React Europe react-primitives is a project that attempts to generalise the React Native API to be platform-agnostic. Adding a styled-components/primitives entry point allows us to start experimenting with what styled-components can add in that equation, in particular, react-sketchapp.

Fixed

  • Couple of small typescript updates, documentation changes, etc

Thanks

Thanks to the numerous contributors and maintainers who have contributed to this release, including:

(In no particular order)

v2.0.1 07/06/2017

This is the first patch release after v2 and shouldn't hold any surprises. But it does fix and improve some rough edges...

Don't forget! All our documentation is now hosted on a nice website: https://www.styled-components.com

Changed

Updated TypeScript typings for v2

It's not secret that v2 was released without updated typings, so we're sure that unfortunately some of you had to wait a little longer.

This release updates the typings with all new APIs and features:

  • ServerStyleSheet API
  • extend method
  • withComponent
  • attrs
  • function themes
  • styled components as interpolations

We hope that everything is now working as expected with TypeScript.

Upgrade to Stylis v3

Apart from fixing a couple of missing prefixes here and there, Stylis now tries to add missing semicolons. We've gotten some reports and issues in the past of some components breaking an app, when a semicolon was missing, so this should be a nice addition!

The CSS output should also be slightly more minified.

Fixed

  • Remove dead code used previously for auto-prefixing (& inline-style-prefixer)
  • Fix .extend not working after chaining it repeatedly (3 or more inheritances)
  • Fix Flow type signatures for compatibility with Flow v0.47.0

Thanks

Thanks to the numerous contributors and maintainers who have contributed to this release.

(In no particular order)

v2.0.0 25/05/2017

A smaller, faster drop-in upgrade with even more features

Read the full changelog in prose over here on Medium: https://medium.com/styled-components/announcing-v2-f01ef3766ac2

It's been a long time (ehem, forever) that we've written release notes, so let's start with a detailed one for v2.

All our documentation is now hosted on a nice website, so if you're having trouble with v2, or learning styled-components in general, check our website: https://www.styled-components.com

Breaking Changes

PostCSS was replaced with Stylis

Instead of PostCSS we're now using Stylis for our CSS processing needs. By doing so we managed to cut our bundle size (min+gzip) from ~24kB down to ~12kB, meaning you’ll now ship a lot less code to your users!

Server Side Rendering

We added an API for concurrent server side rendering including rehydration on the client. The API is lean and simple:

import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
const html = renderToString(sheet.collectStyles(<YourApp />))
const css = sheet.getStyleTags()

Learn more in our docs: https://www.styled-components.com/docs/advanced#server-side-rendering

Upgrade css-to-react-native (React Native)

You'll now need to add units to your React Native shorthand styles, but on the up-side: We now support percentage-units!

A codemod is available: https://github.com/styled-components/styled-components-native-code-mod

Added

.attrs

You can now attach some props directly to a Styled Component. When you use functions as attributes, we'll pass in the component's props, so you can write some more complex logic, without resorting to wrapping an entire component.

const ExternalLink = styled.a.attrs({
  target: '_blank',
  rel: 'nofollow',
  style: props => ({
    background: `${props.hue}, 
                 ${50 + props.luminosity / 2},
                 ${props.luminosity}`
  })
}) // ...

.extend and .withComponent helpers

The .extend method allows you to create a new Styled Component based on another one, combining the rules into a single new class.

const Heading = styled.h1`
  font-size: 2.5rem;
  font-weight: bold;
  margin: 2rem;
  text-align: center;
`
const MarketingHeading = Heading.extend`
  background: midnightblue;
  color: white;
  &:hover { text-shadow: 0 0 4px white; }
`

The .withComponent method can be used to create a new Styled Component based on another one, but with a different tag or wrapped component.

Chain both methods for unlimited POWER!...

Contextual Overrides

You can now use Styled Components as interpolations and we'll swap them out for their classnames:

const Link = styled.a`
  color: inherit;
  text-decoration: none;
  &:hover, &:active {
    text-decoration: underline;
  }
`
const P = styled.p`
  ${ Link } {
    text-decoration: underline;
  }
`

Changed

  • Fix defaultProps used instead of ThemeProvider on first render
  • Prevent leakage of the innerRef prop to wrapped child; under the hood it is converted into a normal React ref
  • Add hoisting static (non-React) properties for withTheme HOC
  • Add innerRef support to withTheme HOC
  • Fix Theme context for StyledComponent for IE <10
  • Fix setNativeProps in StyledNativeComponent
  • Fix ref being passed to Stateless Functional Components in StyledNativeComponent

Thanks

Thanks to the numerous contributors and maintainers who have worked towards this release. This list comes from the changelog, and we're sorry if some names are missing, but we had a lot more people involved whose names weren't recorded. 😢

(In no particular order)

v1.4.0 25/01/2017

Added

v1.3.1 18/01/2017

Changed

  • Fix <Styled(undefined)> in React Developer Tools, thanks to @iamssen. (see #383)
  • Fix themes support in IE <= 10, thanks to @saschagehlich. (see #379)
  • Fixed Touchable not recognising styled components as ReactNative components, thanks to @michalkvasnicak. (see #372)

v1.3.0 12/01/2017

Added

  • Added styled.Button alias for ReactNative, thanks to @Ginhing. (see #322)

Changed

  • Fix regression from previous release and only delete innerRef if it is being passed down to native elements, thanks to @IljaDaderko. (see #368)
  • Fixed defaultProps theme overriding ThemeProvider theme, thanks to @diegohaz. (see #345)
  • Removed custom flowtype supressor in favour of default $FlowFixMe @relekang. (see #335)
  • Updated all dependencies to latest semver, thanks to @amilajack. (see #324)
  • Updated all demos to link to latest version, thanks to @relekang. (see #350)
  • Converted to DangerJS, thanks to @orta. (see #169)

v1.2.1 18/12/2016

Changed

  • Fixed flowtype errors and added flow check to CI, thanks to @relekang. (see #319)

v1.2.0 17/12/2016

Added

  • Added withTheme higher order component; thanks @brunolemos. (see #312)
  • Added support for media queries, pseudo selectors and nesting in styles-as-objects. (see #280)

Changed

  • Do not pass innerRef to the component, thanks @mkhazov. (see #310)
  • Fixed prop changes not updating style on react native; thanks @brunolemos. (see #311)
  • Extract DOM shorthands, thanks @philpl. (see #172)

v1.1.3 09/12/2016

Changed

  • Fixed theme changes in ThemeProviders not re-rendering correctly, thanks @k15a. (see #264)
  • Fixed overriding theme through props, thanks @k15a. (see #295)
  • Removed lodash dependency in favor of small utility packages to knock down bundle size by ~0.5kB

v1.1.2 26/11/2016

Added

  • Add // @flow to files missing them and fix ThemeProvider types, thanks to @relekang. (see #225)

Changed

  • Fixed setting the default theme via defaultProps and theme changes not re-rendering components with new styles, thanks to @michalkvasnicak. (see #253)
  • Improve ReactNative style generation performance, thanks to @sheepsteak. (see #171)

v1.1.0 21/11/2016

We now have amazing Flow docs, so getting started with using Flow with styled-components is as easy as reading this doc: https://github.com/styled-components/styled-components/blob/master/docs/flow-support.md (thanks to @ryyppy!)

Added

  • Added support for deeply nested styles in ReactNative (e.g. transform), thanks @jacobp100. (see #139)
  • Added support for camelized style properties in ReactNative (e.g. fontWeight), thanks @jacobp100. (see #145)
  • Properly expose flow typings by adding a flow:build step and flow support docs, thanks to @ryyppy. (see #219)

Changed

v1.0.11 14/11/2016

Added

  • Pass props to interpolated functions in React Native, thanks to @haikyuu. (see #190)

Changed

v1.0.10 28/10/2016

Changed

  • Huge performance improvement by injecting styles outside of render, thanks to [@JamieDixon][https://github.com/JamieDixon]. (see #137)

v1.0.9 26/10/2016

Added

  • Added ability to get ref to the inner (DOM) node of the styled component via innerRef prop, thanks to [@freiksenet][https://github.com/freiksenet]. (see #122)
  • Section in docs about the new stylelint support with stylelint-processor-styled-components

Changed

  • Fixed theme prop in styledComponent and styledNativeComponent so that it will properly inherit values for theme when defaultProps are set, thanks to @bhough. (see #136)

v1.0.8 18/10/2016

Added

Changed

  • Fixed <ThemeProvider> component hot reloading

v1.0.7 18/10/2016

Added

  • Documentation about integrating with an existing CSS codebase
  • Support for CSS custom variables

Changed

  • Move react from dependencies to peer– & devDependencies, thanks to @sheepsteak! (see #93)
  • Fix cyclical dependency deadlock in .es.js bundle that forced us to revert v1.0.6, thanks to @Rich-Harris! (see #100)
  • Refactored and added to e2e test suite

v1.0.6 16/10/2016

Added

  • CHANGELOG.md for tracking changes between versions (will be kept in sync with the releases page)
  • Support for Internet Explorer by removing Symbol from the transpiled output
  • .es.js bundle for Webpack v2 or Rollup users to take advantage of tree shaking, thanks to @Rich-Harris! (see #96)

Changed

  • Fixed inheritance of statics (like defaultProps) with styled(StyledComponent), thanks to @diegohaz! (see #90)
  • UMD bundle is now built with Rollup, which means a 22% reduction in size and a 60% reducing in parse time, thanks to @Rich-Harris! (see #96)

v1.0.5 15/10/2016

  • Forgot updating the new theming stuff on ReactNative, fixed now, sorry!