fix: styled-engine new internals (#220)

Author: romgrk

packages/pigment-css-react/.gitignore

@@ -1,3 +1,4 @@
 /processors/
 /utils/
+/internal/
 LICENSE

packages/pigment-css-react/package.json

@@ -98,6 +98,7 @@
     "processors",
     "theme",
     "utils",
+    "internal",
     "package.json",
     "styles.css",
     "LICENSE"
@@ -132,6 +133,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,9 @@ 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);
   };