Describe the bug
I'm encountering an issue while using the cva@1.0.0-beta.1
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):
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too