nextui-org / tailwind-variants

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

Consume const tv = createTV(...) on external package #195

Open jpresagios opened 3 months ago

jpresagios commented 3 months ago

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

https://github.com/microsoft/TypeScript/issues/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 ?)

thefalked commented 2 months ago

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