search

nextui-org / tailwind-variants

🦄 Tailwindcss first-class variant API
https://tailwind-variants.org
MIT License
2.42k stars 68 forks source link

Extending a file that does not contain slots fails #136

Closed HansHugli closed 10 months ago

HansHugli commented 11 months ago

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]
    ...
  }