Merging styles in various formats won't respect the order

[rborn]

If we need to merge more styles with various formats, for some reason won't respect the order ( last in, last applied) - at least that's my understanding how it should work 😅

eg:

❌The backgroundColor will always be orange

<View style={tw.style({backgroundColor:'orange'},'bg-red-100 m-10','bg-blue-100')}>

❌The backgroundColor will always be green

const styles = StyleSheet.create({
  container: {
    backgroundColor:'green'
  }
});

<View style={tw.style(styles.container,'bg-red-100 m-10','bg-blue-100')}>

✅ However this works

<View style={tw.style({'bg-red-100 m-10','bg-blue-100')}>

✅ This too:

<View style={tw.style({backgroundColor:'orange'},{backgroundColor:'blue'})}>

✅ And this too:

<View style={tw.style(styles.container,{backgroundColor:'blue'})}>

Any idea if I'm doing something wrong? Thank you

[jaredh159]

i don't think you're doing anything wrong exactly, but i'm pretty sure i coded the implementation with an assumption that raw style objects would be passed last, and so, would always take precedence. i think i might have done that because usually you're only falling back to writing a style object when there is no utility class that does the job, so i didn't think there would be much issue about conflicting or overwriting other styles. there might be something as well related to the caching, but i can't remember.

so, i think basically you could consider this a bug. but i'm wondering if your use-case permits you to put the objects last to workaround it, or if for some reason that's not an option, because of some dynamic or runtime condition that might put them first.

[rborn]

Thanks for replying, the case would be a HOC where you'd want to force some styles to a component. Currently is more a theoretical case, but I'm exploring some ideas.

If I get to the point I need this I'll have a look and maybe propose a fix :)

A quick fix would be to map all string arguments to go again through tw.style (not ideal though)

<View style={tw.style(styles.container,{backgroundColor:'blue'},    tw.style('bg-red-100')   )}>