Testing changes

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

@@ -97,44 +97,16 @@ theme.getColorSchemeSelector = (colorScheme) => {
 };
 theme.toRuntimeSource = stringifyTheme;
 
-function innerNoop() {
-  return null;
-}
-function outerNoop() {
-  return innerNoop;
-}
-
 /**
  * @type {PigmentOptions}
  */
 const pigmentOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
-  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);
-      },
-    };
-  },
 };
 
-/** @type {import('next').NextConfig} */
+/** @type {import('@pigment-css/nextjs-plugin').NextConfig} */
 const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,

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

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
@@ -18,13 +18,12 @@
     "@mui/material-nextjs": "workspace:^",
     "@mui/system": "workspace:^",
     "@emotion/cache": "latest",
-    "local-ui-lib": "workspace:^",
     "next": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.16",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

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

@@ -9,7 +9,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
     "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
@@ -18,7 +17,6 @@
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "clsx": "^2.1.1",
-    "local-ui-lib": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -28,7 +26,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "^0.0.16",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

apps/pigment-css-vite-app/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { extendTheme } from '@mui/material/styles';
+import { extendTheme, stringifyTheme } from '@mui/material/styles';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {
@@ -20,6 +20,8 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
+// @ts-ignore
+theme.toRuntimeSource = stringifyTheme;
 
 export default defineConfig({
   plugins: [
@@ -39,7 +41,7 @@ export default defineConfig({
     }),
     pigment({
       theme,
-      transformLibraries: ['local-ui-lib', '@mui/material'],
+      transformLibraries: ['@mui/material'],
       sourceMap: true,
       displayName: true,
     }),
@@ -52,15 +54,6 @@ export default defineConfig({
         find: /^@mui\/icons-material\/(.*)/,
         replacement: '@mui/icons-material/esm/$1',
       },
-      {
-        find: /^@pigment-css\/react$/,
-        // There is a weird issue on the CI where Vite/Rollup isn't able to resolve
-        // the path for pigment-css/react in this monodrep. This is a temporary workaround. It does not
-        // affect local development or end-user projects.
-        replacement: path.resolve(
-          path.join(process.cwd(), 'node_modules/@pigment-css/react/build/index.mjs'),
-        ),
-      },
     ],
   },
 });

package.json

@@ -208,7 +208,11 @@
     "@types/node": "^18.19.39",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "cross-fetch": "^4.0.0"
+    "cross-fetch": "^4.0.0",
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react",
+    "@pigment-css/unplugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin"
   },
   "nyc": {
     "include": [

packages/mui-lab/package.json

@@ -65,6 +65,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@mui/material": "workspace:^",
+    "@mui/material-pigment-css": "workspace:^",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
@@ -78,6 +79,9 @@
     },
     "@emotion/styled": {
       "optional": true
+    },
+    "@mui/material-pigment-css": {
+      "optional": true
     }
   },
   "sideEffects": false,

packages/mui-material-pigment-css/README.md

@@ -1,3 +1,3 @@
-# Material Pigment CSS
+# Material Pigment CSS
 
-A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system.
+A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system.

packages/mui-material-pigment-css/package.json

@@ -40,7 +40,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16"
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react"
   },
   "sideEffects": false,
   "publishConfig": {

packages/mui-material-pigment-css/src/Box.ts

@@ -0,0 +1,3 @@
+import Box from '@pigment-css/react/Box';
+
+export default Box;

packages/mui-material-pigment-css/tsconfig.build.json

@@ -6,7 +6,9 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]

packages/mui-material-pigment-css/tsconfig.json

@@ -1,8 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "moduleResolution": "NodeNext",
-    "module": "NodeNext"
-  },
   "include": ["src/**/*", "test/**/*"]
 }

packages/mui-material/package.json

@@ -78,7 +78,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
@@ -93,7 +93,7 @@
     "@emotion/styled": {
       "optional": true
     },
-    "@pigment-css/react": {
+    "@mui/material-pigment-css": {
       "optional": true
     }
   },

packages/mui-material/src/PigmentContainer/PigmentContainer.tsx

@@ -99,7 +99,7 @@ const PigmentContainer = React.forwardRef(function PigmentContainer(
       disableGutters={disableGutters}
       fixed={fixed}
       maxWidth={maxWidth}
-      {...props}
+      {...(props as any)}
       // @ts-ignore
       ref={ref}
     />

packages/mui-material/src/PigmentGrid/PigmentGrid.tsx

@@ -156,7 +156,7 @@ const PigmentGrid = React.forwardRef(function PigmentGrid(props, ref) {
 
   const classes = useUtilityClasses(props);
 
-  return <Grid ref={ref} className={clsx(classes.root, className)} {...other} />;
+  return <Grid ref={ref} className={clsx(classes.root, className)} {...(other as any)} />;
 }) as OverridableComponent<GridTypeMap>;
 
 PigmentGrid.propTypes /* remove-proptypes */ = {

packages/mui-material/src/PigmentStack/PigmentStack.tsx

@@ -71,7 +71,7 @@ const useUtilityClasses = () => {
  */
 const PigmentStack = React.forwardRef(function PigmentStack({ className, ...props }, ref) {
   const classes = useUtilityClasses();
-  return <Stack ref={ref} className={clsx(classes.root, className)} {...props} />;
+  return <Stack ref={ref} className={clsx(classes.root, className)} {...(props as any)} />;
 }) as OverridableComponent<PigmentStackTypeMap>;
 
 PigmentStack.propTypes /* remove-proptypes */ = {

packages/mui-material/tsconfig.build.json

@@ -8,7 +8,9 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "moduleResolution": "Node16",
+    "module": "Node16"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],