How can I custom a theme with NX+Next.js?

[JenniferGoijman]

Related page

https://github.com/mui/pigment-css?tab=readme-ov-file#start-with-nextjs

Kind of issue

Missing information

Issue description

This is my next.config.jsfile that I have configured PigmentCSS in a Nx+Next.js repo:

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { withPigment } = require('@pigment-css/nextjs-plugin');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
  withPigment
];

module.exports = composePlugins(...plugins)(nextConfig);

How can I custom a theme with NX+Next.js?

Context

@pigment-css/react: 0.0.11
next: 14.0.4
react: 18.2.0
react-dom: 18.2.0
@nx/next: 18.0.2
@pigment-css/nextjs-plugin: 0.0.11
nx: 18.0.2

Search keywords: NX, Next.js

[brijeshb42]

This requires a change in the api of withPigment to take in it's config from the nextConfig object itself instead of taking it as a 2nd argument. This will be a breaking change but makes sense if majority of other plugins are already following this approach.