Extending variants doesn't work when passing classes as an array

[ApplePieGiraffe]

Describe the bug I'm using an array to pass class names into tailwind-variants

const styles = tv({
  base: [],
  variants: {
    type: {
      primary: ["bg-red-500"],
    },
  },
});

If I extend those styles and use an array to pass class names into the extended styles

const extendedStyles = tv({
  extend: styles,
  variants: {
    type: {
      primary: ["bg-green-500"],
    },
  },
});

Neither the original or extended styles get applied to the element. Instead the dev tools show

<button class="[object Object]">Count: 0</button>

To Reproduce See this Codesandbox

Expected behavior The extended styles should override the original styles and be applied to the element

[ian-os]

extend takes string not a tv() object

[tianenpang]

Hi @ApplePieGiraffe @ian-os for now, the temporary fix is to change the array to a string, and will look into this issue 🤔

[I-am-tk]

@tianenpang Changing main value from "main": "dist/index.cjs" to "main": "dist/index.js" in package.json seems to resolve this issue. :thinking: .

[thefalked]

Hello everyone, sorry for the delay, this is really an issue. I already had a PR merged to fix this but for some reason @mskelton didn't release it. It was merged 20 of March, i tried to remove the join('') on the array i'm using to temporary fix and decided to check here since it's bugging yet. I'll try to check with the discord group to see if someone can do the release with the new stuff.