Unexpected Type Definition for class and className

[carlosyan1807]

Describe the bug

I'm encountering an issue while using the [email protected] library in a monorepo setup with shared style variants for both Next.js and Nuxt.js projects. After using Vite to bundle the shared project, the generated TypeScript declaration file contains confusing type definitions for the class and className properties.

It's my learning project, so it includes both next and nuxt.

To Reproduce

// src/variants/ripple.ts
import type { VariantProps } from 'cva'

import { cva } from 'cva'

const rippleVariants = cva({
  base: ['pointer-events-none absolute origin-center animate-ripple rounded-full opacity-0'],
  variants: {
    color: {
      default: 'bg-current',
      neutral: 'bg-neutral',
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      info: 'bg-info',
      success: 'bg-success',
      warning: 'bg-warning',
      danger: 'bg-danger',
    },
  },
})

export type RippleVariantProps = VariantProps<typeof rippleVariants>

export { rippleVariants }

// dist/variants/ripple.d.ts
import type { VariantProps } from '../../node_modules/cva';
declare const rippleVariants: (props?: ({
    color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "default" | undefined;
} & ({
    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined;
    className?: undefined;
} | {
    class?: undefined;
    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined)[] | {
        [x: string]: any;
    } | null | undefined;
})) | undefined) => string;
export type RippleVariantProps = VariantProps<typeof rippleVariants>;
export { rippleVariants };

my vite.config.ts

import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    lib: {
      entry: entries,
      formats: ['es'],
    },
    rollupOptions: {
      external: ['cva']
    }
  },
  plugins: [dts()],
})

Expected behavior
I'm not sure if this is a problem with cva or if I'm doing something wrong, I want it to generate the right type.

Desktop (please complete the following information):

• OS: Windows 11 WSL2
• Browser chrome
• Version 120

[joe-bell]

Hmm, please can you private a working reproduction? (not code snippets, but a sandbox of some sorts)

[carlosyan1807]

https://codesandbox.io/p/sandbox/amazing-galois-2d6j7p

cat dist/variants/ripple.d.ts