Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending a file that does not contain slots fails #136

Closed
HansHugli opened this issue Dec 15, 2023 · 0 comments · Fixed by #137
Closed

Extending a file that does not contain slots fails #136

HansHugli opened this issue Dec 15, 2023 · 0 comments · Fixed by #137
Labels
bug Something isn't working

Comments

@HansHugli
Copy link

HansHugli commented Dec 15, 2023

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)]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant