nextui-org/tailwind-variants

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

microsoft/TypeScript#42873

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,
});