Losing type information on RecipeVariantProps

[engelkes-finstreet]

Hey!

I am trying to build an external component library. Most of the things are working already, but I cannot get the correct type information from my RecipeVariantProps to work with tsup.

Here is an example component that I create with cva:

import {cva, type RecipeVariantProps} from "@styled/css";

const styles = cva({
    base: {
        bgColor: "yellow.500",
    },
    variants: {
        size: {
            small: {
                height: 20,
                width: 20,
            },
            huge: {
                height: 120,
                width: 120,
            }
        }
    },
    defaultVariants: {
        size: "small",
    }
})

type CvaVariantProps = NonNullable<RecipeVariantProps<typeof styles>>

type Props = {
    label: string
} & CvaVariantProps

export const CvaComponent = (props: Props) => {
    return (
        <div className={styles({size: props.size})}>{props.label}</div>
    )
}

If I use this component inside my package I get full type safety for CvaComponent with correct typings for the size. After I bundle my package with tsup and use the CvaComponent inside a consuming package the type information get lost and I do not get any autocomplete for size and TypeScript does not show an error for a missing label.

Here is my tsup.config.ts:

import { defineConfig } from 'tsup';

export default defineConfig((options) => {
    const prod = options.env?.NODE_ENV === 'production';

    return {
        entry: ['src/index.ts'],
        format: ['cjs', 'esm'],
        dts: true, // Always generate declaration files
        splitting: true,
        sourcemap: true,
        clean: true,
        treeshake: true,
        minify: prod,
        external: ['react', 'react-dom', 'react-hook-form', '@pandacss/dev', '@styled'],
        outDir: 'dist',
        bundle: false,
        skipNodeModulesBundle: true,
        metafile: true,
        watch: !prod,
        tsconfig: './tsconfig.json',
        outExtension({ format }) {
            return {
                js: `.${format}.js`,
                dts: '.d.ts',
            };
        },
    };
});

Is there a way to keep the type information on the RecipeVariantProps?
Thanks in advance for your help!

[segunadebayo]

The reason this happens is because @styled is marked as external.

In the consuming app, do you generate a styled-system folder? If you do, I recommend setting up an alias in the tsconfig that maps @styled to the generated styled-system

[engelkes-finstreet]

Great! That solved it. Thanks for the help :) Really appreciated!