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) 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) 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); };