Unexpected Type Definition for class and className
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
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too