Adding the Pigment CSS vite-plugin to Remix causes a CJS build

[endaquigley]

Steps to reproduce

1. Install the @pigment-css/vite-plugin package inside your Remix project.
2. Add the pigment plugin to vite.config.ts with a basic config.
3. Run npm run build and check the output.

https://stackblitz.com/edit/remix-run-remix-aroqz5

Current behavior

Vite performs a CJS build for some reason:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

Expected behavior

Vite should perform an ESM build as type="module" is set in package.json and the file extension is vite.config.ts

Context

Removing the pigment plugin causes Vite to performs a ESM build again:

pigment({
  theme: extendTheme(),
  transformLibraries: ['@mui/material'],
})

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.13.0 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.1.0 
    @mui/material: 6.1.0 => 6.1.0 
    @mui/material-pigment-css: 6.1.0 => 6.1.0 
    @mui/private-theming:  6.1.0 
    @mui/styled-engine:  6.1.0 
    @mui/system: 6.1.0 => 6.1.0 
    @mui/types:  7.2.16 
    @mui/utils:  6.1.0 
    @pigment-css/react:  0.0.22 
    @pigment-css/vite-plugin: ^0.0.22 => 0.0.22 
    @types/react: ^18.2.20 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.1.6 => 5.5.3 

Search keywords: vite, cjs, performance, remix

[brijeshb42]

Pigment CSS depends on some of the @mui/* packages internally. We'll be moving away from that which would automatically fix this.

[oliviertassinari]

Is this issue a duplicate of #67?

[oliviertassinari]

Duplicate of #67