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.

[omerman]

Getting this error on a setup with nx monorepo.

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createTheme } = require('@mui/material');
const { composePlugins, withNx } = require('@nx/next');
const { withPigment } = require('@pigment-css/nextjs-plugin');
require('../../core/src/next/utils/prepareEnv');

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

  eslint: {
    ignoreDuringBuilds: false,
  },
  basePath: process.env['NEXT_PUBLIC_BASE_PATH'] || undefined,
  experimental: {
    // optimizePackageImports: ['@mui/material', 'lodash-es', 'react-icons'],
    after: true, // To run long tasks after response is sent to user.
    // ppr: true,
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
  (nextConfig) => {
    return withPigment(nextConfig, {
      theme: createTheme({
        cssVariables: true,
        colorSchemes: { light: true },
        typography: {
          fontFamily: 'var(--font-heebo)',
        },
      }),
      transformLibraries: ['@mui/material'],
    });
  },
];

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

The above yields an error. And I believe it should work.

[alexanderdavide]

Based on @omerman's input, the following works. Using extendTheme is essential.

import { extendTheme } from "@mui/material";
import { composePlugins, withNx } from "@nx/next";
import { withPigment as withPigmentNext } from "@pigment-css/nextjs-plugin";

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = { };

/**
 * @type {import('@nx/next/src/utils/config').NextPlugin}
 */
const withPigment = (nextConfig) => {
  /**
   * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
   */
  const pigmentConfig = {
    transformLibraries: ["@mui/material"],
    theme: extendTheme({ }),
  };

  return withPigmentNext(nextConfig, pigmentConfig);
};

const plugins = [withNx, withPigment];

export default composePlugins(...plugins)(nextConfig);

[omerman]

Ill check soon as well 🙏🙏