I can confirm this issue. I'm noticing many incorrect colors in various places. Here are one example:

actually it should have these colors:

Have found changing the fill of the transitions from both to backwards seems to solve the color issue, at least for me. Still need to do more testing.

see componentDidUpdate() of SmoothPre:
https://codehike.org/docs/code/token-transitions

I think it's a problem with React reusing the elements for different tokens (and keeping the transition state). For example, forcing React to re-create all elements should fix it:

export const tokenTransitions: AnnotationHandler = {
  name: "token-transitions",
  PreWithRef,
  Token: (props) => (
    <InnerToken
      merge={props}
      style={{ display: "inline-block" }}
      key={Math.random()} // HACK 
    />
  ),
}

I'll try to find a good solution, ideally making React reset any token transition before calculating the new colors.

This issue has been fixed but not yet released.

Try it in your project before the release with:

npm i https://pkg.pr.new/codehike@463

Or wait for the next release.

🚀 Released in [email protected] 🚀

If this was helpful, consider sponsoring Code Hike. Your contribution helps sustain open-source work.

Thanks for using Code Hike!