Should default styles include styles for default variants or not and why?

[vkostunica]

I am bit confused and divided between two options how to implement default styles (and variants). The main ambiguity is weather default styles should already include styles for default variants or omit them.

1. If I omit styles for default variants from main default block then the component will be INCOMPLETE if I dont pass any props (actually pass null for any of them as Typescript suggests). Upside is that variants dont override any styles. Default styles for default variants are applied via default props.

2. I define almost all styles for all default variants in main default block. Now component is complete even if I pass nulls for props. Styles for default variants are almost empty now. Other variants are applied through overriding styles.

If we take compundVariants into account situation gets even more complicated.

Which option from these two I should use and what are arguments to do it that way (upsides and downsides)? How is CVA library intended to be used in first place related to this?

Here is the quick example code for illustration, its Astro Tag component that I have currently by hand but the point is same in React or any other framework.

const tagVariants = cva('inline-block', {
  variants: {
    variant: {
      neutral: 'text-content bg-base-200 hover:bg-base-300',
      primary: 'text-primary-content bg-primary hover:bg-primary-dark',
    },
    size: { sm: 'text-sm px-2 pb-1 pt-0.5', md: 'text-base px-3 py-1', lg: 'text-lg px-4 py-2' },
  },
});

export interface Props extends HTMLAttributes<'a'>, VariantProps<typeof tagVariants> {}

// set default variants
const { variant = 'neutral', size = 'sm', class: className, ...props } = Astro.props;
---

<a {...props} class={tagVariants({ variant, size, className })}>
  <slot />
</a>