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 { internal_styledEngineMockup } = require('@pigment-css/react');
 
 /**
  * @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 internal_styledEngineMockup;
         }
         return context.require(id);
       },

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

@@ -8,3 +8,4 @@ export { default as createUseThemeProps } from './createUseThemeProps';
 export { default as internal_createExtendSxProp } from './createExtendSxProp';
 export { default as useTheme } from './useTheme';
 export { default as globalCss } from './globalCss';
+export { default as internal_styledEngineMockup } from './styledEngineMockup';

packages/pigment-css-react/src/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-unplugin/src/index.ts

@@ -25,6 +25,7 @@ import {
   type PluginCustomOptions,
 } from '@pigment-css/react/utils';
 import type { ResolvePluginInstance } from 'webpack';
+import { internal_styledEngineMockup } from '@pigment-css/react';
 
 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 internal_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 { internal_styledEngineMockup } from '@pigment-css/react';
 
 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 internal_styledEngineMockup;
     }
     return originalRequire(id);
   };