Update to new syntax

[mxstbr]

As of styled-components/styled-components#227 the new syntax for the private API is .withConfig:

const Box = styled.div.withConfig({ displayName: 'Box', componentId: 'Button_asdf123' })`
  styles: here;
`

This avoids issues on ReactNative where target would before need to be View (no string) and we'd need to import it, which would've made everything much more compilcated.

I'm thinking about switching this to be .__config to make sure people don't accidentally use it, but that's a trivial change. We should get this changed asap!

[vdanchenkov]

How does it work with component wrapping? This way?

const StyledBox = styled(Box).withConfig({ displayName: 'StyledBox', componentId: 'Button_asdf123' })`
  styles: here;
`

[mxstbr]

To elaborate a bit on why this is a necessary change, on the web we can transpile our styled calls like so:

// before
const Box = styled.div``

// after
const Box = styled({ target: 'div' })``

Which is what we do right now! The issue is, that doesn't work on ReactNative. Imagine this:

// before
const Box = styled.View``

Transpiling it to this breaks, because in ReactNative there are no string primitives:

// after
const Box = styled({ target: 'View' })`` // 🚫 Breaks

Instead, we'd have to transpile it to this:

// after
import { View } from 'react-native'
const Box = styled({ target: View })``

Which would have been a pain to do!

So, with the new syntax we fully avoid this issue, because no matter what the user does this always works:

const Box = styled.div.withConfig({ })`` // That works perfectly fine
const Box = styled.View.withConfig({ })`` // That works too, no import needed!
const Box = styled(OtherComp).withConfig({ })`` // No problem
const Box = styled('div').withConfig({ })`` // No problem either

Does that explain better why we need to switch?

[vdanchenkov]

@mxstbr Thanks for the explanation. I'll update it in a nearest time.