Add support for proper styles as objects

[mxstbr]

For making polished a cross-library thing we need to have support for media queries, pseudo selectors etc in interpolated style objects. (this is literally a 9 line change 👍)

const Box = styled.div`${{
  backgroundColor: 'red',
  '@media screen and (min-width: 800px)': {
    backgroundColor: 'blue',
  },
}}`

Also adds tests to verify the new feature.

/cc @bhough @steida @gaearon

Please review @geelen, I might've missed some edge case

[mxstbr]

This doesn't support anything like arrays or functions in objects though, this doesn't work:

const Box = styled.div`${{
  backgroundColor: (props) => props.bg, // ⚠ Doesn't work
}}`

I don't know if we need to add support for that?

[bhough]

I don't know if we need to add support for that?

I don't think we need to. Feels like that is a step too far as far as not encouraging people to primarily use objects with styled components.

[k15a]

Hey, I am just wondering why you choose this syntax. I would favour this syntax:

styled.div((props) => ({
  backgroundColor: props.bg, // Does work
}))

or this:

styled.div({
  backgroundColor: props.bg, // Does work
})

over the current one. You could even support both.

The downside would be that you can't mix normal styled-components with the style objects like:

const Box = styled.div`
color: blue;
${{
  backgroundColor: 'red'
}}`

Could you please explain why you choose to go with the current syntax?

[mxstbr]

Could you please explain why you choose to go with the current syntax?

It's necessary to support this syntax for ReactNative. You wouldn't use this syntax manually, you'd just interpolate existing ReactNative styles in a legacy project:

const oldStyles = {
  color: 'red',
  background: 'blue',
}

const NewStyledComponentsComponent = styled.View`
  ${oldStyles}
  flex: 1;
`

That's why we need to support this. This might not be the main interface for styles as objects, and we might add one similar to your ideas! Haven't thought too much about that yet, as this PR is solely to add support for pseudos and media queries for pre-existing projects.

[mxstbr]

Going to ship this in an effort to release a new version!

[geelen]

Sorry I missed this. This is 👍