fix: exports

[Barbapapazes]

Description

Hello 👋,

I'm building a guide on how to build a Vue.js component library (https://x.com/soubiran_/status/1860643319308583164) and I'm using Tailwind Variants to show how to organize a component.

Everything was fine until I exported the component.

Here the Button component:

<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'

const button = tv({
  base: 'border-2 px-2.5 py-1.5 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
  variants: {
    variant:  {
      solid: 'border-transparent bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700',
      outline: 'border-blue-500 text-blue-500 hover:bg-blue-50 active:bg-blue-100',
    }
  }
})

type ButtonVariantProps = VariantProps<typeof button>

export interface ButtonProps {
  label?: string
  variant?: ButtonVariantProps['variant']
}
</script>

<script lang="ts" setup>
withDefaults(defineProps<ButtonProps>(), {
  variant: 'solid',
})
</script>

<template>
  <button :class="button({ variant })">
    <slot>
      {{ label }}
    </slot>
  </button>
</template>

In a Vue file, everything works fine. Then, I transpile the component with Vite. Everything works fine too.

Here the types transpiled component (Button.vue.d.ts):

import { VariantProps } from 'tailwind-variants';
declare const button: import('tailwind-variants').TVReturnType<{
    variant: {
        solid: string;
        outline: string;
    };
}, undefined, "border-2 px-2.5 py-1.5 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", import('tailwind-variants/dist/config').TVConfig<{
    variant: {
        solid: string;
        outline: string;
    };
}, {
    variant: {
        solid: string;
        outline: string;
    };
}>, {
    variant: {
        solid: string;
        outline: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    variant: {
        solid: string;
        outline: string;
    };
}, undefined, "border-2 px-2.5 py-1.5 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", import('tailwind-variants/dist/config').TVConfig<{
    variant: {
        solid: string;
        outline: string;
    };
}, {
    variant: {
        solid: string;
        outline: string;
    };
}>, unknown, unknown, undefined>>;
export type ButtonVariantProps = VariantProps<typeof button>;
export interface ButtonProps {
    label?: string;
    variant?: ButtonVariantProps['variant'];
}
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
    variant: "solid" | "outline";
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
    default?(_: {}): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

But there is an issue here with import('tailwind-variants/dist/config').TVConfig. TypeScript is unable to know what is TVConfig, even tailwind-variants/dist/config is completely unknown.

The result is an untyped ButtonVariantProps:

type ButtonVariantProps = {
    variant?: any
}

Which is not what I want.

To fix this, the dist/ folder need to explicitly export its types. I also change the exports order since the types must always be the first exports and the default export, CJS in this case, must be the last export.

Reference: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#package.json-exports-imports-and-self-referencing:~:text=Note%20that%20the%20%22types%22%20condition%20should%20always%20come%20first%20in%20%22exports%22.

I try the fix with the following patch:

diff --git a/package.json b/package.json
index 8e5003604ceca304e738cc77296637df68a4542a..db25e1ebab926ae8b928123da267ce552ab1a11d 100644
--- a/package.json
+++ b/package.json
@@ -91,14 +91,18 @@
   "module": "dist/index.js",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     },
-    "./dist/*": "./dist/*",
     "./transformer": {
-      "require": "./dist/transformer.cjs",
       "types": "./dist/transformer.d.ts",
+      "require": "./dist/transformer.cjs",
       "default": "./dist/transformer.js"
     },
     "./package.json": "./package.json"

And everything works fine. 🙌

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Follow the Style Guide.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).