How to reuse component variants in other components

[dannytce]

Hello!

I am wondering is the best way how to reuse variants from one component in another one. Let's say I have a Text component and I would love to reuse some specific variant in a Badge component.

export const Text = styled('span', {
  variants: {
     type: {
        title: {
           // title css
        },
        label: {
           // label css
        },
     }
  }
})

export const Badge = styled('span', {
   // badge css
   // label css
})

I came with two possible solutions:

1. <Badge><Text type="label">Badge</Text></Badge> - I don't like this one, because it produces extra unnecessary element.
2. Extract label variant CSS into a standalone object. And spread it in both Text and Badge components.

Both work well, but feel wrong.

Is there any other way, how to achieve this behavior?

Thank you.

[sandgraham]

Might not be exactly what you're looking for, but the css function accepts variants too. I've used it to create more flexible/shareable styling patterns (can compose class names or share declaration objects):

const linkCSS = css({
  variants: {
    isExternal: { /* ... */ }
  }
})

() => <Button className={linkCSS({ isExternal: true })} />

[dannytce]

@sandgraham wow, I didn't know about this one :) It's not exactly what I am looking for, but looks promising and better than my approaches :) Thank you for sharing!

[peduarte]

Please don't do this. the css and styled functions were not designed to be used together like this. You'll soon encountour specificity issues. From a UI architecture point of view, relying on markup composition is cleaner, more scalable and maintainable. Thanks!

[sandgraham]

That makes sense in regards to mixing all of them. Is there a good way to compose the functions returned by css? I've enjoyed using css for more flexibly sharing common styles.

[peduarte]

Hey! This restriction is by design. We've done that so compositions can happen at the markup layer.

The solution you came up is exactly what I'd do. In fact, it's exactly what we do at Modulz! 🎉

[LucasUnplugged]

@peduarte might correct me, but I feel like this is a great use case for styled component composition:

export const Text = styled('span', {
  variants: {
     type: {
        title: {
           // title css
        },
        label: {
           // label css
        },
     }
  }
})

export const Badge = styled(Text, {
   // Inherits variants from `Text`
})

You can see a more complex (but still real-world) example in issue #675, which is very much related.

[peduarte]

Maybe I misunderstood the original question, but this is how it currently works.

When you compose another Stitches Component, you inherit its styles and variants (inc default and compound variants)

But you do not get access to the variants style object.

[LucasUnplugged]

Right, I'm also saying this is available today.

I missed the part of @dannytce's post about only inheriting some variants, but again, I think you could do that with composition, by breaking up the variants into whatever "primitives" you want.