tailwind-variants icon indicating copy to clipboard operation
tailwind-variants copied to clipboard

Using compondVariants with slots and defaultVariants breaks

Open mehdibha opened this issue 9 months ago • 1 comments

Describe the bug

Using tailwind-variants with slots, compoundVariants, defaultVariants and explicitly passing the variants as undefined breaks.

To Reproduce

import { tv } from "tailwind-variants";

const variants = tv({
  slots: {
    root: "",
  },
  variants: {
    variant: {
      solid: {},
    },
    orientation: {
      horizontal: {
        root: "",
      },
    },
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      variant: "solid",
      className: {
        root: "border-b",
      },
    },
  ],
  defaultVariants: {
    orientation: "horizontal",
    variant: "solid",
  },
});

const { root } = variants();

console.log(root({})) // Output: "border-b" 
console.log(root({ orientation: undefined, variant: undefined })) // Output: "" 

Expected behavior It should use the defaultVariants

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Chrome 131
  • Version 0.31

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

mehdibha avatar Jan 23 '25 15:01 mehdibha