[material-ui][pigment-css] Support project without enabling CSS varia…

…bles (#44171)
mui · Oct 21, 2024 · 85422cf · 85422cf
1 parent 1a018b7
commit 85422cf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
@@ -561,4 +561,12 @@ describe('createTheme', () => {
       ],
     ).to.equal('5 7 10');
   });
+
+  it('should have `toRuntimeSource` for integrating with Pigment CSS', () => {
+    const theme = createTheme();
+    expect(typeof theme.toRuntimeSource).to.equal('function');
+
+    const themeCssVars = createTheme({ cssVariables: true });
+    expect(typeof themeCssVars.toRuntimeSource).to.equal('function');
+  });
 });
diff --git a/packages/mui-material/src/styles/createThemeNoVars.js b/packages/mui-material/src/styles/createThemeNoVars.js
@@ -10,6 +10,7 @@ import createTypography from './createTypography';
 import shadows from './shadows';
 import createTransitions from './createTransitions';
 import zIndex from './zIndex';
+import { stringifyTheme } from './stringifyTheme';
 
 function createThemeNoVars(options = {}, ...args) {
   const {
@@ -117,6 +118,7 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this,
     });
   };
+  muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
 
   return muiTheme;
 }