[pigment-css] Add stringifyTheme for Pigment CSS integration

packages/mui-material/src/styles/index.d.ts

@@ -100,6 +100,9 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
+
+export * from './stringifyTheme';
+
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,

packages/mui-material/src/styles/index.js

@@ -31,7 +31,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';
@@ -50,6 +50,8 @@ export { default as experimental_extendTheme } from './experimental_extendTheme'
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 
+export * from './stringifyTheme';
+
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';
 export { default as private_createMixins } from './createMixins';

packages/mui-material/src/styles/stringifyTheme.test.ts

@@ -0,0 +1,127 @@
+import { expect } from 'chai';
+import { stringifyTheme } from './stringifyTheme';
+import extendTheme from './extendTheme';
+
+describe('StringifyTheme', () => {
+  it('should serialize the theme', () => {
+    const theme = extendTheme();
+    const result = stringifyTheme({
+      breakpoints: theme.breakpoints,
+      transitions: theme.transitions,
+    });
+    expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = {
+  "breakpoints": {
+    "keys": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+    ],
+    "values": {
+      "xs": 0,
+      "sm": 600,
+      "md": 900,
+      "lg": 1200,
+      "xl": 1536
+    },
+    "unit": "px"
+  },
+  "transitions": {
+    "easing": {
+      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
+    },
+    "duration": {
+      "shortest": 150,
+      "shorter": 200,
+      "short": 250,
+      "standard": 300,
+      "complex": 375,
+      "enteringScreen": 225,
+      "leavingScreen": 195
+    }
+  }
+};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`);
+
+    // test that non-seriazable values still exist in the original theme
+    expect(typeof theme.generateStyleSheets).to.equal('function');
+  });
+
+  it('should serialize the custom theme', () => {
+    const theme = extendTheme({
+      breakpoints: {
+        values: {
+          mobile: 0,
+          tablet: 640,
+          laptop: 1024,
+          desktop: 1280,
+        } as any,
+      },
+      transitions: {
+        duration: {
+          standard: 432,
+        },
+      },
+    });
+    const result = stringifyTheme({
+      breakpoints: theme.breakpoints,
+      transitions: theme.transitions,
+    });
+    expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = {
+  "breakpoints": {
+    "keys": [
+      "mobile",
+      "tablet",
+      "laptop",
+      "desktop"
+    ],
+    "values": {
+      "mobile": 0,
+      "tablet": 640,
+      "laptop": 1024,
+      "desktop": 1280
+    },
+    "unit": "px"
+  },
+  "transitions": {
+    "duration": {
+      "standard": 432,
+      "shortest": 150,
+      "shorter": 200,
+      "short": 250,
+      "complex": 375,
+      "enteringScreen": 225,
+      "leavingScreen": 195
+    },
+    "easing": {
+      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
+    }
+  }
+};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`);
+
+    // test that non-seriazable values still exist in the original theme
+    expect(typeof theme.generateStyleSheets).to.equal('function');
+  });
+});

packages/mui-material/src/styles/stringifyTheme.ts

@@ -0,0 +1,62 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+
+function isSerializable(val: any) {
+  return (
+    isPlainObject(val) ||
+    typeof val === 'undefined' ||
+    typeof val === 'string' ||
+    typeof val === 'boolean' ||
+    typeof val === 'number' ||
+    Array.isArray(val)
+  );
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntime` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntime = () => stringifyTheme(theme);
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme: Record<string, any> = {}) {
+  const serializableTheme: Record<string, any> = { ...baseTheme };
+
+  function serializeTheme(object: Record<string, any>) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = { ...value };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+
+  serializeTheme(serializableTheme);
+
+  return `import createBreakpoints from '@mui/system/createBreakpoints';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}