fix: styled-engine new internals

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

@@ -2,6 +2,8 @@
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
 const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+// eslint-ignore-next-line @typescript-eslint/naming-convention
+const { styledEngineMockup } = require('@pigment-css/react/internal');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -118,13 +120,7 @@ const pigmentOptions = {
       ...context,
       require: (id) => {
         if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
-          return {
-            __esModule: true,
-            default: () => () => () => null,
-            internal_processStyles: () => {},
-            keyframes: () => '',
-            css: () => '',
-          };
+          return styledEngineMockup;
         }
         return context.require(id);
       },

packages/pigment-css-react/package.json

@@ -132,6 +132,15 @@
       "require": "./utils/index.js",
       "default": "./utils/index.js"
     },
+    "./internal": {
+      "types": "./internal/index.d.ts",
+      "import": {
+        "types": "./internal/index.d.mts",
+        "default": "./internal/index.mjs"
+      },
+      "require": "./internal/index.js",
+      "default": "./internal/index.js"
+    },
     "./exports/*": {
       "default": "./exports/*.js"
     },

packages/pigment-css-react/src/internal/index.ts

@@ -0,0 +1 @@
+export { default as styledEngineMockup } from './styledEngineMockup';

packages/pigment-css-react/src/internal/styledEngineMockup.ts

@@ -0,0 +1,13 @@
+/*
+ * Replicates `@mui/styled-engine` internals for the plugins to swap the runtime.
+ */
+
+export default {
+  __esModule: true,
+  default: () => () => () => null,
+  internal_mutateStyles: () => {},
+  internal_processStyles: () => {},
+  internal_serializeStyles: (x: any) => x,
+  keyframes: () => '',
+  css: () => '',
+};

packages/pigment-css-react/tsup.config.ts

@@ -50,4 +50,11 @@ export default defineConfig([
     ],
     outDir: 'utils',
   },
+  {
+    ...baseConfig,
+    entry: [
+      './src/internal/index.ts',
+    ],
+    outDir: 'internal',
+  },
 ]);

packages/pigment-css-unplugin/src/index.ts

@@ -25,6 +25,7 @@ import {
   type PluginCustomOptions,
 } from '@pigment-css/react/utils';
 import type { ResolvePluginInstance } from 'webpack';
+import { styledEngineMockup } from '@pigment-css/react/internal';
 
 import { handleUrlReplacement, type AsyncResolver } from './utils';
 
@@ -87,13 +88,7 @@ const addMaterialUIOverriedContext = (originalContext: Record<string, unknown>)
   const originalRequire = originalContext.require as (id: string) => any;
   const newRequire = (id: string) => {
     if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
-      return {
-        __esModule: true,
-        default: () => () => () => null,
-        internal_processStyles: () => {},
-        keyframes: () => '',
-        css: () => '',
-      };
+      return styledEngineMockup;
     }
     return originalRequire(id);
   };

packages/pigment-css-vite-plugin/src/vite-plugin.ts

@@ -21,6 +21,7 @@ import {
   type IFileReporterOptions,
 } from '@wyw-in-js/transform';
 import { matchAdapterPath, type PluginCustomOptions } from '@pigment-css/react/utils';
+import { styledEngineMockup } from '@pigment-css/react/internal';
 
 export type VitePluginOptions = {
   debug?: IFileReporterOptions | false | null | undefined;
@@ -45,13 +46,7 @@ const addMaterialUIOverriedContext = (originalContext: Record<string, unknown>)
   const originalRequire = originalContext.require as (id: string) => any;
   const newRequire = (id: string) => {
     if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
-      return {
-        __esModule: true,
-        default: () => () => () => null,
-        internal_processStyles: () => {},
-        keyframes: () => '',
-        css: () => '',
-      };
+      return styledEngineMockup;
     }
     return originalRequire(id);
   };