Extending a file that does not contain slots fails
HansHugli opened this issue · 0 comments
HansHugli commented
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)]