Merging of transitions styles

[flugg]

If you have a Foo component that sets transitions, e.g:

export const Foo = styled.div(() => ({
  transition: 'background 0.2s, border 0.2s',
  // ...
}));

And a Bar component that encapsulates Foo. How can Bar define additional CSS for Foo that adds a new transition without overriding all the already set transitions on Foo? I want to do something along these lines:

export const Bar = () => (
  <Foo css={{
    transition: 'box-shadow 0.2s',
    // ...
  }} />
);

And end up with a merged transition on Foo:

transition: 'background 0.2s, border 0.2s, box-shadow 0.2s',

Is this even possible? If not, any other ideas on how to achieve something similar?

Thanks!

[Andarist]

Its not possible - i would pass the required info outside of css prop and only dump the whole thing to css at the very bottom