Consume const tv = createTV(...) on external package
jpresagios opened this issue · 3 comments
Created new package X
(main goal is ship twMerge
/tailwind-merge and tv/tailwind-variants
with custom twMergeConfig) and allow to external packages consume these custom functions
import { twMerge } from 'X'
import { tv } from 'X'
When clients's package from X import twMerge everything works as expected (Return type from twMerge
is primitive type string that can be resolved by Typescript properly in client's package of X
)
import { twMerge } from 'X'
but when a package import tv import { tv } from 'X'
following issue appear
error TS2742: The inferred type of 'Y' cannot be named without a reference to '../../../X/node_modules/tailwind-variants/dist/config'. This is likely not portable. A type annotation is necessary.
I have been trying in package X
to add type annotation during the export of tv export const tv: <Type Annotation> = createTV(twMergeConfig);
but the return type from createTV use different generic types and wasn't possible because of it
export const tv = createTV(...);
Could you please provide additional information that I should take in consideration to enable X to export custom tailwind variant and consume it on external/client's package ?
As a side note I was wondering if from the point of view of merge next stament is valid and there is not difference from apply twMergeConfig object in X/twMerge over ship twMergeConfig on custom instance variant / createTV
X/twMerge(tv(variants()), classes) === X/twMerge(X/tv(variants()), classes))
(if twMergeConfig=Y is use on X/twMerge under default tv tailwind variant (left expression) result will be the same that ship custom/createTV with twMergeConfig=Y (right expression) or is any benefit from the point of view of merge resolution ?)
I don't know if it's still relevant but i'm doing exactly what you're trying to do and it's working fine.
import { createTV, VariantProps } from 'tailwind-variants';
export const twMergeConfig = {
extend: {
classGroups: {
'font-size': [{ text: ['xxs'] }],
},
},
};
export type { VariantProps };
export const tv = createTV({
twMergeConfig,
});