Skip to content

Feature request: infer variants from compoundVariants #319

@zumm

Description

@zumm

At this moment dealing with compoundVariants is tedious. You need to declare all variants beforehand even if all of them are empty.
It becomes even worse when you need multiple cva calls in your component, like this:

const wrapperVariants = cva({
  base: `
    bg-bg-1 flex items-center justify-center gap-2 border border-border-1 px-3
    py-1.5 outline-2 outline-offset-2 outline-info rounded-2
    focus-within:outline
  `,
  variants: {
    state: {
      error: [],
      default: [],
    },
    disabled: {
      true: 'pointer-events-none opacity-50',
      false: [],
    },
  },
  compoundVariants: [{
    disabled: false,
    state: 'error',
    class: 'border-error',
  }],
})

const wrapperClasses = computed(() => wrapperVariants(props))

const detailsVariants = cva({
  base: 'text-content-3 text-p-sm',
  variants: {
    state: {
      error: [],
      default: [],
    },
    disabled: {
      true: 'opacity-50',
      false: [],
    },
  },
  compoundVariants: [{
    disabled: false,
    state: 'error',
    class: 'text-error',
  }],
})

const detailsClasses = computed(() => detailsVariants(props))

It would be very nice if compoundVariants evolved from just consumer of variants to provider of variants. Like that:

const detailsVariants = cva({
  base: 'text-content-3 text-p-sm',
  variants: {
    disabled: {
      true: 'opacity-50',
    },
  },
  compoundVariants: [{
    disabled: false,
    state: 'error',
    class: 'text-error',
  }],
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions