Benefit of running inline through css?

[merlinstardust]

In the readme, you have this example

<div {...css(styles.container, { padding })}>

What benefit is providing by running the plain object through the css function?

From looking at the code, it just passes these objects into the style prop. But why not do this directly? Wouldn't that be more performant?

[ljharb]

The interface might return a style prop; but if it's aphrodite, it'll return a className prop.

[merlinstardust]

I see that. But I'm wondering why pass the plain object in at all. Why not pass it directly to the style prop?

<div {...css(styles.container)} style={{ padding }}>

From looking at the internals, this would do the same thing, but it would save you from looping over extra arguments.

[ljharb]

The whole point of react-with-styles is to write components that are interface-agnostic.

An interface, even with { padding } passed in, might choose not to create an inline style at all - our native CSS interface does that, for example. In that case, no style prop would ever exist.