Support passing in styles as a single css prop

[lewisl9029]

trafficstars

• glamorous-native version: 1.1.1
• react-native version: 0.48.4
• react version: 16.0.0-rc.3

What you did: N/A

What happened: N/A

Reproduction: N/A

Problem description:

In glamorous, you can pass in any number of styles and/or functions into a styled element through a css prop, in addition to the glamorous factory function:

const styledComponent = (props) => (
  <glamorous.Div 
    css={[
      { fontSize: 12 },
      (props) => props.shouldHighlight ? { color: 'yellow' } : undefined
    ]}
    shouldHighlight={props.shouldHighlight}  
  >
    text
  </glamorous.Div>
)

In glamorous-native, you can pass in any number of styles and/or functions into a styled element through the component factory function (as mentioned here: https://github.com/robinpowered/glamorous-native/issues/33), but not through a prop.

As @ajwhite pointed out in https://github.com/robinpowered/glamorous-native/issues/9#issuecomment-328563776, React Native's built-in style prop can be used in a similar way as the css prop in glamorous, and can take any number of styles as an array, but AFAIK it can't take functions as a part of that array for computing dynamic styles based on the props of the component.

Suggested solution:

I'd like to see a css prop added to glamorous-native elements that behaves the same way as the css prop in glamorous, to make the interface more flexible and get closer to parity with glamorous.

I'd be happy to take a shot at making a PR for this if people feel this is a worthwhile addition. Any pointers would be greatly appreciated!

[atticoos]

Ahh, I didn't realize that it was a custom prop (I work primarily in React Native and mistook the css prop for the standard React style prop). I see via https://github.com/paypal/glamorous/commit/41119c814adae076880c87400b75b37418cb7b51 that it's a custom property.

I think we can certainly do something for glamorous-native. I feel a little uncertain about calling it css, since that's a concept specific for the web platform. I'm open to ideas!

And by all means, feel free to open a PR and we can figure out the final name in there.

[lewisl9029]

Great! To be honest I'm not a fan of the css prop name in glamorous either. If we don't mind diverging from the glamorous API I'd totally be in favor of using something less web-specific. I tend to alias it to styles (plural) in my own projects, but we can discuss further in the PR.