From 4703cccdd38df1962106aca97889e42d449bc949 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk@users.noreply.github.com>
Date: Tue, 3 Sep 2024 09:25:50 -0400
Subject: [PATCH] fix: styled-engine new internals (#220)

---
 packages/pigment-css-react/.gitignore               |  1 +
 packages/pigment-css-react/package.json             | 10 ++++++++++
 packages/pigment-css-react/src/internal/index.ts    |  1 +
 .../src/internal/styledEngineMockup.ts              | 13 +++++++++++++
 packages/pigment-css-react/tsup.config.ts           |  5 +++++
 packages/pigment-css-unplugin/src/index.ts          |  9 ++-------
 packages/pigment-css-vite-plugin/src/vite-plugin.ts |  9 ++-------
 7 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 packages/pigment-css-react/src/internal/index.ts
 create mode 100644 packages/pigment-css-react/src/internal/styledEngineMockup.ts

diff --git a/packages/pigment-css-react/.gitignore b/packages/pigment-css-react/.gitignore
index ce226001..03064a98 100644
--- a/packages/pigment-css-react/.gitignore
+++ b/packages/pigment-css-react/.gitignore
@@ -1,3 +1,4 @@
 /processors/
 /utils/
+/internal/
 LICENSE
diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
index 04ee7b14..fabce2d6 100644
--- a/packages/pigment-css-react/package.json
+++ b/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"
     },
diff --git a/packages/pigment-css-react/src/internal/index.ts b/packages/pigment-css-react/src/internal/index.ts
new file mode 100644
index 00000000..48d5801c
--- /dev/null
+++ b/packages/pigment-css-react/src/internal/index.ts
@@ -0,0 +1 @@
+export { default as styledEngineMockup } from './styledEngineMockup';
diff --git a/packages/pigment-css-react/src/internal/styledEngineMockup.ts b/packages/pigment-css-react/src/internal/styledEngineMockup.ts
new file mode 100644
index 00000000..29dce93b
--- /dev/null
+++ b/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: () => '',
+};
diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts
index 897964a6..5beec78f 100644
--- a/packages/pigment-css-react/tsup.config.ts
+++ b/packages/pigment-css-react/tsup.config.ts
@@ -50,4 +50,9 @@ export default defineConfig([
     ],
     outDir: 'utils',
   },
+  {
+    ...baseConfig,
+    entry: ['./src/internal/index.ts'],
+    outDir: 'internal',
+  },
 ]);
diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
index 6ae7addc..9bc83051 100644
--- a/packages/pigment-css-unplugin/src/index.ts
+++ b/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);
   };
diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts
index 02580197..7e063284 100644
--- a/packages/pigment-css-vite-plugin/src/vite-plugin.ts
+++ b/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);
   };