[plugin] Allow runtime libraries to have their own theme and styles css path

[brijeshb42]

For ex, this change will allow the plugins to process theme/styles.css import from @mui/material-pigment-css

• I have followed (at least) the PR section of the contributing guide.

[siriwatknp]

Is this a quick solution for @mui/material-pigment-css? Because if someone wants to build an adapter on top of Pigment CSS, they have to add it to the list here.

[siriwatknp]

Nothing to change at this point but it's something to think about for Pigment CSS v1.

[brijeshb42]

It's not only for material-pigment-css.
It's for any other similar libraries. They'll just have to ask users to add their lib to the transformLibraries list.

[siriwatknp]

Then why do we need to add @mui/material-pigment-css here? It should be inside a config @mui/material-pigment-css.

Something like:

import { withPigment } from '@pigment-css/nextjs-plugin';
import { presets } from '@mui/material-pigment-css';

withPigment({
  theme,
  …presets, // transformLibraries: ['@mui/material-pigment-css']
})

[brijeshb42]

We don't need any config in @mui/material-pigment-css itself. There are two ways to handle this library through Pigment -

1. In the Material docs for configuring Pigment, ask users to add @mui/material-pigment-css to the transformLibraries option. This would also be applicable for other 3rd party libraries built on Pigment.
2. Or, make this option built-in since we control both the libraries.

[siriwatknp]

There is an overrideContext that we might need to add as a workaround for the toString issue.

This is the config that works for Material UI x Pigment:

export default withPigment(nextConfig, {
  theme: customTheme,
  transformLibraries: ["@mui/material"],
  overrideContext: (context) => {
    if (!context.$RefreshSig$) {
      context.$RefreshSig$ = outerNoop;
    }
    return {
      ...context,
      require: (id) => {
        if (id === "@mui/styled-engine" || id === "@mui/styled-engine-sc") {
          return {
            __esModule: true,
            default: () => () => () => null,
            internal_processStyles: () => {},
            keyframes: () => "",
            css: () => "",
          };
        }
        return context.require(id);
      },
    };
  },
});

Where do you think the overrideContext should be?

[brijeshb42]

I don't want to have packages like @mui/material-pigment-vite-plugin/nextjs-plugin. So it'd be better to have this hardcoded in Pigment itself. I'll added this in a new commit.

[siriwatknp]

Suggested change

	packageMap: transformLibraries.reduce(
	packageMap: finalTransformLibraries.reduce(