Update to new syntax about babel-plugin-styled-components

[vdanchenkov]

How does it work with component wrapping? This way?

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

[vdanchenkov]

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

[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?