nextui-org/tailwind-variants

Extending a file that does not contain slots fails

HansHugli opened this issue · 0 comments

The bug
When extending a function using Tailwind Variants, we are seeing that it does not work. We are seeing that the function that is extended is being ignored. The theory is that since the schema of the "base" function is different than the "inheriting" function missing the "slots" section. Indeed, if we add a slots section in the "base" function with empty values it works.

To Reproduce
focusVisual.styles.ts:

import { tv } from "tailwind-variants";
export const focusVisualStyles = tv({
  base: [
    "after:content-['']",
    "after:absolute",
    ...
   ]
});

Some other file:

import { tv } from "tailwind-variants";
import { focusVisualStyles } from "./focusVisual.styles";

export const myComponentsStyles = tv(
  {
    extend: focusVisualStyles,
    base: [...]
    slots: {
      label: [ ... ],
      indicator: [ ... ]
    },
    variants: { ... }
  }
);

Expected behavior
For the focusVisualStyles to be applied.

Actual behavior
focusVisualStyles is not applied.

Current workaround

export const myComponentsStyles = tv(
  {
    base: [..., ...focusVisualStyles.base]
    ...
  }
  • OS: [na]
  • Browser [Edge, Chrome]
  • Version [Edge (latest) Chrome(85)]