Subclasses level and react native support

[JamesHemery]

Hi there,

Recently with @QwisTy, we wanted to use CVA for a React Native project, but we came across a use-case that caused us to use an internal utility with an API similar to CVA.

On React Native, the style only applies to the styled element, there is no notion of inheritance from parents (for the colour of a text for example).

👉 So what could be written like this on the web :

const button = cva('p-4 rounded', {
  variants: {
    color: {
      warning: 'bg-orange-300 text-black',
      error: 'bg-red-300 text-white',
    }
  },
  defaultVariants: {
    color: 'warning',
  },
});

const classes = button(); // p-4 rounded bg-orange-300 text-black

😫 must be written like this on react native :

const button = cva('p-4 rounded', {
  variants: {
    color: {
      warning: 'bg-orange-300',
      error: 'bg-red-300',
    }
  },
  defaultVariants: {
    color: 'warning',
  },
});

const buttonText = cva('text-sm', {
  variants: {
    color: {
      warning: 'text-black',
      error: 'text-white'
    }
  },
  defaultVariants: {
    color: 'warning',
  },
});

const buttonClasses = button(); // p-4 rounded bg-orange-300
const textClasses = buttonText(); // text-black

💆 This is the API we have implemented internally and which I suggest to implement:

const button = cva({
  root: 'p-4 rounded',
  text: 'text-sm'
}, {
  subclasses: true, // introduce config property to keep clsx compat
  variants: {
    color: {
      warning: {
        root: 'bg-orange-300',
        text: 'text-black',
      },
      error: {
        root: 'bg-red-300',
        text: 'text-white',
      }
    }
  },
  defaultVariants: {
    color: 'warning',
  },
});

const {root, text} = button(); // { root: 'p-4 rounded bg-orange-300', text: 'text-sm text-black' }

In our case we are using tailwind via twnrc on react native which allows us to use strings as output.

✨ But, in order to improve the React Native support, I also suggest to add an option to handle objects :

const button = cva({  padding: 12, fontSize: 12 }, {
  styleObject: true,
  variants: {
    color: {
      success: {
        background: 'orange',
        color: '#000'
      },
      error: {
        background: 'red',
        color: '#fff'
      },
    }
  },
  defaultVariants: {
    color: 'success',
  },
});

const style = button(); // { padding: 12, fontSize: 12, background: 'orange', color: '#000' }

Of course, both options can be enabled at the same time and apply to variant compounds.

If you're okay with this I can make a PR to support this case.

[joe-bell]

Thank you! My initial reaction is that a separate package makes more sense here but I’ll have a think about it and get back to you 🙏🏼

[JamesHemery]

@joe-bell What do you think about implementing this for V1 ?

[joe-bell]

It's not on the top of my todo list, but it will be explored

[jvzaniolo]

Currently, I am developing a design system for my organization with Tailwind. Most of our components are created using Radix UI.

It would be great to have a similar variants API that allows for the customization of those sub-components based on their props.

Here's an example from the Tailwind Variants package.

That is the only reason preventing me from using cva instead.

[JamesHemery]

@jvzaniolo I agree, subclasses or slots level should be a nice feature. React Native (ak. object style support) is a nice to have.

@joe-bell Can we expect the integration of subclasses/slots in 1.0? Otherwise, I'll export our solution in a small package to avoid it in all our codebases.

If you agree with my API proposal, I can make a PR.

[joe-bell]

After giving it some serious consideration, I won't be adopting subclasses in 1.0. I don't think it's the right strategy for the web and that's ultimately the target I aim to support. I appreciate this isn't probably the answer you want to hear, but wish you the best of luck on finding a solution that works for you!