How to use different variants on different breakpoints?

[ishaqibrahimbot]

I've been using cva for the past couple of months and have really liked the convenience it brings to applying variant-based styling to components.

However, I've recently run into a small issue. Let's say I've defined some typography variants for headline text:

export const headline = cva('', {
  variants: {
    size: {
      xl: ['text-2xl font-bold'],
      l: ['text-xl font-bold'],
      m: ['text-lg font-bold'],
      s: ['text-base font-semibold'],
    },
  },
});

Now let's say I have a Product Label component that uses headline({ size: 'm' }) for desktop screen sizes and headline({ size: 's' }) for tablet/mobile screen sizes. Is there a way cva can handle this out-of-the-box? Cause at the moment the only way I can think of is to have two <h3> tags and hide one on one of the breakpoints, so something like:

export const SignUpHeading = ({ heading }: { heading?: string }) => {
  return (
    <>
      <h3
        className={cn(
          headline({
            size: 'l',
            className: 'text-white mb-space-400 hidden md:block',
          })
        )}
      >
        {heading}
      </h3>
      <h3
        className={cn(
          headline({
            size: 'm',
            className: 'text-white mb-space-400 md:hidden',
          })
        )}
      >
        {heading}
      </h3>
    </>
  );
};

Grateful for any help anyone could offer 😄

[joe-bell]

At the moment I don't have any plans to add responsive variants (as it's a ton of complexity to build and maintain) so sadly you'll have to stick to showing/hiding like you're currently doing:
https://cva.style/docs/faqs#how-can-i-create-responsive-variants-like-stitchesjs

That being said, I do recommend checking out some breakpoint-free strategies for typography:
https://twitter.com/BHolmesDev/status/1751983540957577231

[ishaqibrahimbot]

Thanks @joe-bell! I understand that this is quite a complex feature to build into a library, so I'm good with showing/hiding elements for different breakpoints. Will also check out the breakpoint-free strategy you've shared.