The last token in a composition should have the highest priority

[CodingDive]

In a composition like the following

<p className={compose(
  tokens.color.BLUE_10,
  true && tokens.color.RED_90
)}>
  I believe this text should be red
</p>

I'd expect the red color to be applied instead of the blue one. I'm using version 11.0.7.

A reproduction can be found here but you may need to download it and try it locally as classy-ui doesn't work in a Codesandbox at the moment (tracked in #41).

[CodingDive]

A way to work around it is to add two compositions but since my styles tend to have a lot of conditional logic, I'd need to create another composition for every variable which could quickly go out of hand.

const defaultParagraph = compose(tokens.color.BLUE_10);
const errorParagraph = compose(defaultParagraph, true && tokens.color.RED_90);

Produces the correct result.