[bug] `extendTheme` doesn't work w/ `pigment`

[o-alexandrov]

Steps to reproduce

Link to live example

Steps:

1. clone repo & install deps npm ci
2. run npm run start
3. see the theme src/theme.ts has no effect on mui.Fab

Current behavior

extendTheme doesn't change the styles of the mui.Fab

Expected behavior

extendTheme affects mui.Fab

Context

• https://github.com/mui/material-ui/pull/42781
  • this reproduction example follows the PR's upcoming docs

Your environment

npx @mui/envinfo

``` "@pigment-css/react": "0.0.16", "@pigment-css/vite-plugin": "0.0.16", System: OS: macOS 14.5 Binaries: Node: 22.1.0 - /opt/homebrew/bin/node npm: 10.7.0 - /opt/homebrew/bin/npm pnpm: 9.0.2 - /opt/homebrew/bin/pnpm Browsers: Chrome: 126.0.6478.127 Edge: 112.0.1722.39 Safari: 17.5 npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.5 @mui/base: 5.0.0-beta.51 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/material: 6.0.0-alpha.13 => 6.0.0-alpha.13 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.14 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @types/react: 18.3.3 => 18.3.3 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.5.2 => 5.5.2 ```

Search keywords: pigment, extendTheme

Search keywords:

[o-alexandrov]

Thank you everyone for your great progress on PigmentCSS. @siriwatknp pinging you as the repro example might be useful

[aarongarciah]

@o-alexandrov can you provide a link to a live example? e.g. Codesandbox

[o-alexandrov]

@aarongarciah please refer to the attached GitHub repo at the top of the description

[aarongarciah]

@o-alexandrov I saw it, but the link text says "Link to live example", but that's not the case. Whenever possible, we ask for a live example, as stated in the steps when opening a bug report:

Is there a reason why you can't provide a live example?

[DavidGregory084]

https://stackblitz.com/github/o-alexandrov/mui-pigment-extend-theme?file=index.html

[aarongarciah]

@siriwatknp pinging you in case you can have a look.

[siriwatknp]

Vite has deps optimization that does not work with Pigment CSS

This is the vite config that work so far:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { pigment } from '@pigment-css/vite-plugin'
import { extendTheme, stringifyTheme } from '@mui/material/styles'

const theme = extendTheme();
// @ts-expect-error ignore
theme.toRuntimeSource = stringifyTheme;

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    include: [
      "prop-types",
      "react-is",
      "hoist-non-react-statics",
      "react",
      "react-dom",
      '@emotion/react',
      '@emotion/styled',
    ],
    exclude: ["@mui/material"],
  },
  plugins: [
    react(),
    pigment({
      theme,
      transformLibraries: ["@pigment-css/react", "@mui/material"],
    }),
  ],
})

Note: this is a workaround to get the app working, need mui/material-ui#169 to be released.

[o-alexandrov]

@siriwatknp @aarongarciah Please reopen the issue, as it still doesn't work using the latest versions of pigment and @mui/material and following exactly the Migration Guide.

Updated the repro. Related issue https://github.com/mui/pigment-css/issues/180

There are issues:

1. A developer still must pass @mui/material to transformLibraries
   • w/o this option, root styleOverrides from theme.ts (in the provided repro) file are not applied
2. extended Fab styles overrides are not applied even if you pass transformLibraries
   • EDIT: wrong typings, please refer to comment below
3. vite fails to start for the first cold start
   • to test, run rm -rf node_modules/.vite and then npm run start

[aarongarciah]

@o-alexandrov

1. A developer still must pass @mui/material to transformLibraries

True, I just reproduced it.

2. extended Fab styles overrides are not applied even if you pass transformLibraries

This is not a bug. extended is not a slot, it's a variant. The only slot in Fab is root. You can override styles based on props (like variant) like this:

 const themeRaw = extendTheme({
   components: {
     MuiFab: {
       styleOverrides: {
-        extended: {
-          borderRadius: 12,
-        },
         root: {
           background: `red !important`,
+          variants:[{
+            props: { variant: 'extended' },
+            style: { borderRadius: 12 }
+          }]
         },
       },
     },
   },
 });

3. vite fails to start for the first cold start

True, I just reproduced it.

@siriwatknp can you have a look?

[o-alexandrov]

@aarongarciah cc @siriwatknp Thank you for confirming and describing point 2 in more detail. The issue in point 2 is: incorrect typings then, that allow you to pass extended prop and doesn't enforce you to migrate to the new way of declaring variants. (see screenshot).

• updated repro to showcase this in theme.ts

[rhoiyds]

I'm beginning to get this exact error: Details posted over on https://github.com/mui/pigment-css/issues/211