What is the equivalent of mixin?

[HeartSquared]

@namliw and I have been experimenting and we can't seem to figure out what the equivalent of a mixin would be.

The use case we have is something like this, where we have shared styles between different selectors (composeStyles doesn't look suitable since they're not on the same level - not sure if it even works beyond the base either):

export const navItem = style({
  selectors: {
    '&:hover::after': {
      backgroundColor: tokens.colour.bulbasaur,
      top: '50%',
      bottom: `calc(${HIGHLIGHT_OVERFLOW} * -1)`,
    },
  },
});

export const navItemActive = style({
  '::after': {
    backgroundColor: tokens.colour.pikachu,
    top: '50%',
    bottom: `calc(${HIGHLIGHT_OVERFLOW} * -1)`,
  },
  },
});

How would we achieve something equivalent to this pattern?

@mixin highlight($bg-color) {
      backgroundColor: $bg-color,
      top: 50%,
      bottom: `calc(${HIGHLIGHT_OVERFLOW} * -1)`,
}

.navItem {
    &:hover::after {
      @extend highlight(tokens.colour.bulbasaur);
    }
  };

.navItemActive {
  &::after {
      @extend highlight(tokens.colour.pikachu);
  }
}

[daryawood]

I'd suggest using functions :)

const HIGHLIGHT_OVERFLOW = '';

const highlight = (bgColor) => {
  return {
      backgroundColor: bgColor,
      top: '50%',
      bottom: `calc(${HIGHLIGHT_OVERFLOW} * -1)`,
  }
}

const navItem = style({
  selectors: {
    '&:hover::after': {
      ...highlight(tokens.colour.bulbasaur),
     // other rules
    },
  },
});

[HeartSquared]

🤦🏻‍♀️ Why didn't I think of that? Forgot it was TS this whole time and that it's just an object. Been using CSS modules for too long. Thanks!