Convert example to mjs syntax

Fixes mui#88

Author: brijeshb42

apps/pigment-css-next-app/next.config.js apps/pigment-css-next-app/next.config.mjs

@@ -1,7 +1,5 @@
-/* eslint-env node */
-// eslint-ignore-next-line import/no-unresolved
-const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+import { withPigment } from '@pigment-css/nextjs-plugin';
+import { experimental_extendTheme as extendTheme } from '@mui/material';
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -121,4 +119,4 @@ const nextConfig = {
   pigment: pigmentOptions,
 };
 
-module.exports = withPigment(nextConfig);
+export default withPigment(nextConfig);

apps/pigment-css-next-app/package.json

@@ -2,6 +2,7 @@
   "name": "@app/next-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

examples/pigment-css-nextjs-ts/next.config.js examples/pigment-css-nextjs-ts/next.config.mjs

@@ -1,4 +1,4 @@
-const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
 
 // To learn more about theming, visit https://github.com/mui/pigment-css/blob/master/README.md#theming
 const theme = extendTheme({
@@ -22,7 +22,11 @@ const theme = extendTheme({
   },
 });
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+/** @type {import('@pigment-css/nextjs-plugin').WithPigmentOptions} */
+const nextConfig = {
+  pigment: {
+    theme,
+  },
+};
 
-module.exports = withPigment(nextConfig, { theme });
+module.exports = withPigment(nextConfig);