Wrapping MUI components with styled not working in pigment with vite after version 0.0.20

[yishay-at-bay]

Steps to reproduce

Steps:

1. Create a new vite project with: yarn create vite vite-app --template react-ts (vite v5 or v6, yarn v1)
2. install versions 0.0.28 of @pigment-css/react, pigment-css/vite-plugin and @mui/material v6
3. define a StyledButton with:

   import { Button } from "@mui/material";
   import { styled } from "@pigment-css/react";
   
   const CustomButton: React.FC = () => {
     return <StyledButton>Click it</StyledButton>;
   };
   
   const StyledButton = styled(Button)(() => ({
     color: "green",
     backgroundColor: "orange",
   }));
   
   export default CustomButton;
   

Current behavior

When using @pigment-css/react and pigment-css/vite-plugin after version 0.0.20 I get the a lot of errors like:
Internal server error: node_modules/@mui/material/Tooltip/Tooltip.js Cannot read properties of undefined (reading 'vars')
Internal server error: /node_modules/@mui/material/Typography/Typography.js: Cannot read properties of undefined (reading 'typography')

Expected behavior

Latest versions (currently from 0.0.21 - 0.0.28) should work like version 0.0.20 or earlier

Context

No response

Your environment

No response

Search keywords: pigment vite version 0.0.20

[brijeshb42]

Have you configured the theme correctly in your vite config.
Check - https://github.com/mui/material-ui/blob/master/apps/pigment-css-vite-app/vite.config.ts#L41

[yishay-at-bay]

Hi @brijeshb42
Thanks for replying :)
This indeed solved the issue. Just added the theme to the config and it runs

So do I always have to define a theme when working like that (wrapping MUI components with styled) with pigment?

Another unrelated question...
Is pigment a production ready lib? Is it recommended to start working with it in real projects?

Thanks

[brijeshb42]

do I always have to define a theme when working like that (wrapping MUI components with styled) with pigment

Yes. You'll have to provide the theme as per the current implementation. Maybe we can improvde this experience by using the default theme when none is provided.

Is pigment a production ready lib

It is not recommended while its in v0.0.x. We are looking for user reported issues when trying in new projects.
We have plan to release v1 stable and with that, it'll be prod ready.

[yishay-at-bay]

It is not recommended while its in v0.0.x. We are looking for user reported issues when trying in new projects.
We have plan to release v1 stable and with that, it'll be prod ready

Do you have a rough estimation of when v1 will be released?

[brijeshb42]

We are targetting by March end.

[yishay-at-bay]

@brijeshb42 Thanks !! I really appreciate your help 🙏