Variants vs multiple components performance

[Nemmcy]

I started using Stitches recently and was wondering if there were any performance drawbacks when using variants.

I use variants to apply conditional styles (based on viewport, current location, theme mode, drawer mode etc...) as follows:

const Item = styled('a', {
  fontWeight: 400,
  color: '#111',
  // other common styles...
  variants: {
    type: {
      logo: {
        padding: '0px 10px 0px 10px'
      },
      account: {
        padding: ' 0px 20px 0px 20px',
        background: '#efefef'
      },
      menu: {
        padding: ' 0px 0px 0px 28px'
      },
    },
    path: {
      selected: {
        fontWeight: 600,
        color: '#000'
      }
    }
  }
});

<Item type='logo' href='/'><Logo /></Item>

<Item type='account' path={accountPath ? 'selected' : null} href='/account'>Account</Item>

<Item type='menu' path={homePath? 'selected' : null} href='/home'>Home</Item>

By doing this, I went from having 3-4 slightly different components to a single one which I assume can only improve performance. As I don't know how variants work under the hood, it might only help improve the DX and might be worse in terms of performance than using multiple similar components.

What's the truth?

[LucasUnplugged]

I haven't specifically done performance profiling on this, but I believe that under the hood, the first time an <Item> component is mounted, it will inject css classes into the <style id="stitches"> tag in your header — one for the main styles, plus one for each variant. From there, I believe Stitches uses those props to conditionally set those classes onto the component.

I don't believe there would be much of a performance difference VS separate components, if any — especially with so few variants. But I'd be curious if someone has tested this, especially with far more variants.