Update styles to always use arrays instead of sometimes object merging

[mmarcuccio]

Radium allows you to use (potentially nested) arrays of style objects that are later flattened and merged correctly. Currently, users of Snacks components can only specify a style object. We then sometimes combine this style with existing Snacks styles via the spread operator.

This can be problematic when the user needs to combine multiple style objects with the built in styles of the Snacks component. Also, if the user is passing in a nested object (e.g. a style object w/ a media query), only the top level object is merged while the nested object properties replace existing properties.

The property foo goes missing below:

const styleFromSnacks = { color: 'red', myMediaQuery: { foo: 1  } }
const styleFromUser = { myMediaQuery: { bar: 2 } }
const mergedStyles = {...styleFromSnacks, ...styleFromUser}
console.log(mergedStyles.myMediaQuery) // => {bar: 2}

Some places in the codebase use arrays, but others are merging objects directly.

To solve this issue, we could:

• Update all Snacks components' style prop to accept either an array or object.
• Stop using object spreading to combine styles. Instead, build an array of style objects.

[Deepak-cell311]

Hi,
I am looking this bug and thinking about the problem. I found that this problem specific with the use of Radium, if no longer wraps components with Radium then plain React (and the DOM) does not understand arrays of styles — you must pass a single object.
So in that case, { ...styles, ...style } is still required.

1. Using Radium ----> const mergedStyles = [styles, style]
2. Not using Radium ------> const mergedStyles = { ...styles, ...style }

is good only if you are fully using Radium (or another library that supports style arrays). Otherwise, it can definitely cause runtime problems.

import Radium from 'radium';

class Menu extends React.Component {
  // ...
}

export default Radium(Menu);

Or if you’re using the Radium decorator syntax:

@Radium
class Menu extends React.Component { ... }

const mergedStyles = [styles, style];

If your library is in transition or used by both Radium and non-Radium consumers, you can handle both cases safely with a small check:

const mergedStyles = Array.isArray(style) ? [styles, ...style] : [styles, style];

Then, before rendering, you can flatten manually if Radium isn’t being used:

const computedStyle = Array.isArray(mergedStyles) ? Object.assign({}, ...mergedStyles) : mergedStyles;

<div style={computedStyle} />