[system] Make createBreakpoints independent for stringify theme

.codesandbox/ci.json

@@ -13,6 +13,7 @@
     "packages/mui-lab",
     "packages/mui-material-nextjs",
     "packages/mui-material",
+    "packages/mui-material-pigment-css",
     "packages/mui-private-theming",
     "packages/mui-styled-engine-sc",
     "packages/mui-styled-engine",
@@ -38,6 +39,7 @@
     "@mui/lab": "packages/mui-lab/build",
     "@mui/material-nextjs": "packages/mui-material-nextjs/build",
     "@mui/material": "packages/mui-material/build",
+    "@mui/material-pigment-css": "packages/mui-material-pigment-css/build",
     "@mui/private-theming": "packages/mui-private-theming/build",
     "@mui/styled-engine": "packages/mui-styled-engine/build",
     "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",

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

@@ -66,6 +66,7 @@ export {
   StyledEngineProvider,
   SxProps,
 } from '@mui/system';
+export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx(): any;

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

@@ -18,6 +18,7 @@ export {
   css,
   keyframes,
 } from '@mui/system';
+export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {

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

@@ -9,8 +9,8 @@ describe('StringifyTheme', () => {
       breakpoints: theme.breakpoints,
       transitions: theme.transitions,
     });
-    expect(result).to.equal(`import { createBreakpoints } from '@mui/system';
-import { createTransitions } from '@mui/material/styles';
+    expect(result).to
+      .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
 
 const theme = {
   "breakpoints": {
@@ -78,8 +78,8 @@ export default theme;`);
       breakpoints: theme.breakpoints,
       transitions: theme.transitions,
     });
-    expect(result).to.equal(`import { createBreakpoints } from '@mui/system';
-import { createTransitions } from '@mui/material/styles';
+    expect(result).to
+      .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
 
 const theme = {
   "breakpoints": {
@@ -128,8 +128,7 @@ export default theme;`);
   it('works with framework toRuntimeSource', () => {
     const theme = { palette: { primary: { main: '#ff5252' } }, toRuntimeSource: stringifyTheme };
     expect(theme.toRuntimeSource.call(theme, theme)).to
-      .equal(`import { createBreakpoints } from '@mui/system';
-import { createTransitions } from '@mui/material/styles';
+      .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
 
 const theme = {
   "palette": {

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

@@ -50,8 +50,7 @@ export function stringifyTheme(baseTheme: Record<string, any> = {}) {
 
   serializeTheme(serializableTheme);
 
-  return `import { createBreakpoints } from '@mui/system';
-import { createTransitions } from '@mui/material/styles';
+  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
 
 const theme = ${JSON.stringify(serializableTheme, null, 2)};
 

packages/mui-system/src/Stack/createStack.tsx

@@ -12,7 +12,7 @@ import createTheme from '../createTheme';
 import { CreateMUIStyled } from '../createStyled';
 import { StackTypeMap, StackOwnerState } from './StackProps';
 import type { Breakpoint } from '../createTheme';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import {
   handleBreakpoints,
   mergeBreakpointsInOrder,

packages/mui-system/src/Unstable_Grid/gridGenerator.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import sinon from 'sinon';
 import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import {
   generateGridStyles,
   generateGridSizeStyles,

packages/mui-system/src/Unstable_Grid/gridGenerator.ts

@@ -1,4 +1,4 @@
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { GridDirection, GridOwnerState } from './GridProps';

packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import createBreakpoints from '../createTheme/createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import { traverseBreakpoints, filterBreakpointKeys } from './traverseBreakpoints';
 
 const breakpoints = createBreakpoints({});

packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts

@@ -1,4 +1,4 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints';
 
 export const filterBreakpointKeys = (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) =>
   breakpointsKeys.filter((key: string) => responsiveKeys.includes(key));

packages/mui-system/src/breakpoints/breakpoints.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import type { Breakpoint } from '../createTheme';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { StyleFunction } from '../Box';

packages/mui-system/src/createBreakpoints/index.d.ts

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from './createBreakpoints';

packages/mui-system/src/createBreakpoints/index.js

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from './createBreakpoints';

packages/mui-system/src/createTheme/createTheme.d.ts

@@ -1,12 +1,16 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
+import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
 import { Spacing, SpacingOptions } from './createSpacing';
 import { SxConfig, SxProps } from '../styleFunctionSx';
 import { ApplyStyles } from './applyStyles';
 import { CssContainerQueries } from '../cssContainerQueries';
 
-export { Breakpoint, Breakpoints, BreakpointOverrides } from './createBreakpoints';
+export {
+  Breakpoint,
+  Breakpoints,
+  BreakpointOverrides,
+} from '../createBreakpoints/createBreakpoints';
 
 export type Direction = 'ltr' | 'rtl';
 

packages/mui-system/src/createTheme/createTheme.js

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
+import createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
 import shape from './shape';
 import createSpacing from './createSpacing';

packages/mui-system/src/createTheme/index.js

@@ -1,3 +1,3 @@
 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints';
 export { default as unstable_applyStyles } from './applyStyles';

packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts

@@ -1,5 +1,5 @@
 import MuiError from '@mui/internal-babel-macros/MuiError.macro';
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints';
 
 interface ContainerQueries {
   up: Breakpoints['up'];

packages/mui-system/src/index.d.ts

@@ -77,8 +77,8 @@ export * from './styled';
 export { default as createTheme } from './createTheme';
 export * from './createTheme';
 
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
-export * from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
+export * from './createBreakpoints/createBreakpoints';
 
 export { default as createSpacing } from './createTheme/createSpacing';
 export { SpacingOptions, Spacing } from './createTheme/createSpacing';

packages/mui-system/src/index.js

@@ -50,7 +50,7 @@ export { default as createStyled } from './createStyled';
 export * from './createStyled';
 export { default as styled } from './styled';
 export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
 export { default as createSpacing } from './createTheme/createSpacing';
 export { default as shape } from './createTheme/shape';
 export { default as useThemeProps, getThemeProps } from './useThemeProps';