Getting it to work in bit(bit.dev) to consume in React applications

[mark-eava-ai]

I have searched everywhere but dont see the answer I am looking for (or have an issue/error so doing it wrong).

I have created a basic react component using bit (bit.dev) and want to style it using vanilla extract.

I have tried both style variants and recipe variants but neither work in the consuming app.

NOTE: my bit (which uses ts loader and webpack) does NOT have the vanilla-extract plugins as i did not want to export the final css file to my node module - so am exporting the css.js file with the component.js file (e.g. coloredbutton.js and coloredbutton.css.js). I do however have access to the ts and css ts files in my node modules (as bit bundles the source code outside of the dist folder)

So if i have a style.css.ts file with

export const testRecipe = recipe({
variants: {
colors: {
'm red': { color: '#f00' },
'm blue': { color: '#00f' },
'm green': { color: '#80' },
'm teal': { color: '#008080' },
'm-maroon': { color: '#800000' }
}
}
});

export type testRecipeVariants = RecipeVariants

and a component in test.tsx

`export type MarkTestProps = {
text: string,
colorVariant: testRecipeVariants
}

export function MarkTest({ text, colorVariant } : MarkTestProps) {
return (
<>

{text}

</>
);
}`

I export these to bit and get the test.js and test.css.js files

In my consuming app I then have the import and this in mainapp.tsx

<>
<MarkTest colorVariant={{ colors: 'm red' } as testRecipeVariants} text='Hello Mark 1' />
<MarkTest colorVariant={{ colors: 'm blue' } as testRecipeVariants} text='Hello Mark 2' />
<MarkTest colorVariant={{ colors: 'm green' } as testRecipeVariants} text='Hello Mark 3' />
</>

when i run the app i get an error that the is 'not a function'

I do have vanilla-extract working in the app with styles, recipes etc but not the imported components from our private npm scope

For now, we are creating component libraries in our private scope for our use in our own apps so dont need to worry about other devs/builders etc. as we have control over both bit and our consuming apps webpack configs.

I was loathed to build the css in bit in the component and import/bundle it in the app.

I considered just pushing the tsx and css.ts files to the consuming app. Or to build the tsx component with the css.ts part as a peer dependency and import it into the consuming app.

Anyone have a good best practice to achieve the above?