cva icon indicating copy to clipboard operation
cva copied to clipboard

Bad type lookup when generating svelte components

Open GiantRobots opened this issue 1 year ago • 7 comments

Describe the bug When using export type ButtonStyles = VariantProps<typeof buttonStyles>; in a svelte component the import to class-variance-authority in the output cannot resolve correctly breaking types for the component in consuming libs. Sadly no type errors happen from this behaviour either.

It fails with the output import('class-variance-authority/dist/types').ClassProp

To Reproduce Create a component and export the variants with VariantProps in svelte5 (maybe other environs)

<script context="module" lang="ts">
	import { cva, type VariantProps } from 'class-variance-authority';

	const buttonStyles = cva({
		variants: {
			variant: {
				primary: '',
				secondary: '',
				destructive: '',
				ghost: '',
				'table-header': ''
			}
		},
		defaultVariants: {
			variant: 'primary',
			size: 'md'
		}
	});

	export type ButtonStyles = VariantProps<typeof buttonStyles>;
</script>

Whaddup I'm a button

Expected behavior Access to the variant types without breaking types.

Actual behavior

declare const buttonStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

The import here fails because of the package.json not allowing to access the files through the dist/ path

Image

Proposed Solution Add the following to the package.json to exports key to allow this kind of import (otherwise we'll have to try and solve it upstream/in compiler land)

"./*":{"types":"./*.d.ts"}

I've attached a minimal repro, I've already ran the package command and you can see the output in the dist folder is clearly broken. (re-running the package is done by pnpm prepack)

Thanks for looking into this.

broken-lib.zip

GiantRobots avatar Mar 25 '25 22:03 GiantRobots

@GiantRobots please can you try beta.cva.style and let me know how you get on? I have a feeling this will be fixed

joe-bell avatar Mar 26 '25 05:03 joe-bell

Still an issue with 1.0.0-beta.3

I did a pnpm patch to resolve this for my project and just added this "./*":{"types":"./*.d.ts"} and it solves the issue without widening what you can import beyond types.

Happy to add another repro case if you like.

GiantRobots avatar Mar 26 '25 16:03 GiantRobots

Hmm something feels off to me here, any chance you could provide a working repro? Something like StackBlitz or CodeSandbox please?

joe-bell avatar Mar 27 '25 12:03 joe-bell

I attached a zip file with a reproduction, to my knowledge stackblitz or codesandbox would be difficult/wouldn't work because you need the compiled output and those typically don't have them. Happy to copy and paste the repo into it if that helps.

GiantRobots avatar Apr 01 '25 15:04 GiantRobots

Having the same issue.

extradosages avatar May 02 '25 05:05 extradosages

Can you try https://github.com/joe-bell/cva/releases/tag/v1.0.0-beta.4 please?

joe-bell avatar May 20 '25 06:05 joe-bell

Thanks for the update @joe-bell. This seems to have fixed things for us.

extradosages avatar May 27 '25 19:05 extradosages