v2.0.1

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.

• @thysultan
• @k15a
• @brunolemos
• @btmills
• @patrick91
• @igorbek
• @hallettj

(In no particular order)

v2.0.0

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. 😢

• @vdanchenkov
• @k15a
• @brunolemos
• @MatthieuLemoine
• @jacobp100
• @evan-scott-zocdoc
• @griffinmichl

(In no particular order)

v1.4.0

Added

• TypeScript support, thanks to @patrick91. (see #152)

v1.3.1

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

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

Changed

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

v1.2.0

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

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

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

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

• Converted Object.assign to spread operator, thanks to @thisguychris. (see #201)
• Switched to using inline-style-prefixer for our autoprefixing needs.
• Fixed IE10 compatibility, thanks to @thisguychris. (see #217)