[material-ui][Alert] Convert to support zero runtime

apps/zero-runtime-next-app/next.config.js

@@ -83,20 +83,40 @@ const theme = extendTheme({
   },
 });
 
-theme.getColorSchemeSelector = (key) => {
-  return `[data-mui-color-scheme="${key}"]`;
+// TODO: Fix this from the Material UI side in a separate PR
+theme.palette = theme.colorSchemes.light.palette;
+theme.getColorSchemeSelector = (colorScheme) => {
+  return `@media (prefers-color-scheme: ${colorScheme})`;
+};
+const { css: rootCss } = theme.generateCssVars();
+const { css: lightCss } = theme.generateCssVars('light');
+const { css: darkCss } = theme.generateCssVars('dark');
+theme.generateCssVars = (colorScheme) => {
+  if (colorScheme === 'dark') {
+    return {
+      css: darkCss,
+      selector: {
+        '@media (prefers-color-scheme: dark)': {
+          ':root': darkCss,
+        },
+      },
+    };
+  }
+  if (colorScheme === 'light') {
+    return { css: lightCss, selector: ':root' };
+  }
+  return { css: rootCss, selector: ':root' };
 };
-
-// { [theme.getColorSchemeSelector('dark')]: { color: 'black' } }
 
 /**
  * @type {ZeroPluginConfig}
  */
 const zeroPluginOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
+  transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
   displayName: true,
+  transformSx: false,
 };
 
 /** @type {import('next').NextConfig} */
@@ -107,6 +127,7 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  transpilePackages: ['@mui/material'],
 };
 
 module.exports = withZeroPlugin(nextConfig, zeroPluginOptions);

apps/zero-runtime-next-app/package.json

@@ -9,18 +9,20 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@mui/zero-runtime": "workspace:^",
-    "@mui/utils": "workspace:^",
-    "@mui/base": "workspace:^",
-    "@mui/material": "workspace:^",
-    "@mui/system": "workspace:^",
+    "@mui/system": "file:../../packages/mui-system/build",
+    "@mui/utils": "file:../../packages/mui-utils/build",
+    "@mui/zero-runtime": "file:../../packages/zero-runtime",
+    "@mui/material": "file:../../packages/mui-material/build",
+    "@mui/material-nextjs": "workspace:^",
+    "@mui/icons-material": "file:../../packages/mui-icons-material/build",
+    "@emotion/cache": "latest",
     "local-ui-lib": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "next": "13.5.1"
+    "next": "latest"
   },
   "devDependencies": {
-    "@mui/zero-next-plugin": "workspace:^",
+    "@mui/zero-next-plugin": "file:../../packages/zero-next-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

apps/zero-runtime-next-app/src/app/alert/page.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@mui/zero-runtime';
+import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts';
+import ColorAlerts from '../../../../../docs/data/material/components/alert/ColorAlerts';
+import DescriptionAlerts from '../../../../../docs/data/material/components/alert/DescriptionAlerts';
+import FilledAlerts from '../../../../../docs/data/material/components/alert/FilledAlerts';
+import IconAlerts from '../../../../../docs/data/material/components/alert/IconAlerts';
+import OutlinedAlerts from '../../../../../docs/data/material/components/alert/OutlinedAlerts';
+import SimpleAlert from '../../../../../docs/data/material/components/alert/SimpleAlert';
+
+const Main = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '32px',
+  marginInline: 'auto',
+  maxWidth: '900px',
+  paddingBlock: '16px',
+  [theme.breakpoints.up('sm')]: {
+    paddingInline: '24px',
+  },
+  [theme.breakpoints.up('lg')]: {
+    paddingInline: '60px',
+  },
+}));
+
+export default function MaterialUILayout() {
+  return (
+    <Main>
+      <h1>Alert</h1>
+      <h2>Basic</h2>
+      <BasicAlerts />
+      <h2>Color</h2>
+      <ColorAlerts />
+      <h2>Description</h2>
+      <DescriptionAlerts />
+      <h2>Filled</h2>
+      <FilledAlerts />
+      <h2>Icon</h2>
+      <IconAlerts />
+      <h2>Outlined</h2>
+      <OutlinedAlerts />
+      <h2>Simple</h2>
+      <SimpleAlert />
+    </Main>
+  );
+}

apps/zero-runtime-next-app/src/app/layout.tsx

@@ -1,5 +1,8 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
 import '@mui/zero-runtime/styles.css';
 
 import './globals.css';
@@ -14,7 +17,11 @@ export const metadata: Metadata = {
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{props.children}</body>
+      <body className={inter.className}>
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
     </html>
   );
 }

apps/zero-runtime-next-app/src/app/theme.ts

@@ -0,0 +1,12 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+export default createTheme({
+  components: {
+    MuiStack: {
+      defaultProps: {
+        useFlexGap: true,
+      },
+    },
+  },
+});

apps/zero-runtime-next-app/src/augment.d.ts

@@ -1,4 +1,6 @@
 import type { ExtendTheme } from '@mui/zero-runtime';
+import type { Theme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 declare module '@mui/zero-runtime/theme' {
   interface ThemeTokens {
@@ -29,6 +31,7 @@ declare module '@mui/zero-runtime/theme' {
     theme: ExtendTheme<{
       colorScheme: 'light' | 'dark';
       tokens: ThemeTokens;
-    }>;
+    }> &
+      Theme;
   }
 }

packages/mui-material/src/Alert/Alert.js

@@ -2,10 +2,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { darken, lighten } from '@mui/system';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { darken, lighten } from '@mui/system/colorManipulator';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -17,6 +16,8 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 
+const useThemeProps = createUseThemeProps('MuiAlert');
+
 const useUtilityClasses = (ownerState) => {
   const { variant, color, severity, classes } = ownerState;
 
@@ -42,58 +43,70 @@ const AlertRoot = styled(Paper, {
       styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`],
     ];
   },
-})(({ theme, ownerState }) => {
+})(({ theme }) => {
   const getColor = theme.palette.mode === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  const color = ownerState.color || ownerState.severity;
-
   return {
     ...theme.typography.body2,
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
-    ...(color &&
-      ownerState.variant === 'standard' && {
-        color: theme.vars
-          ? theme.vars.palette.Alert[`${color}Color`]
-          : getColor(theme.palette[color].light, 0.6),
-        backgroundColor: theme.vars
-          ? theme.vars.palette.Alert[`${color}StandardBg`]
-          : getBackgroundColor(theme.palette[color].light, 0.9),
-        [`& .${alertClasses.icon}`]: theme.vars
-          ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
-          : {
-              color: theme.palette[color].main,
-            },
-      }),
-    ...(color &&
-      ownerState.variant === 'outlined' && {
-        color: theme.vars
-          ? theme.vars.palette.Alert[`${color}Color`]
-          : getColor(theme.palette[color].light, 0.6),
-        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-        [`& .${alertClasses.icon}`]: theme.vars
-          ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
-          : {
-              color: theme.palette[color].main,
-            },
-      }),
-    ...(color &&
-      ownerState.variant === 'filled' && {
-        fontWeight: theme.typography.fontWeightMedium,
-        ...(theme.vars
-          ? {
-              color: theme.vars.palette.Alert[`${color}FilledColor`],
-              backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
-            }
-          : {
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette[color].dark
-                  : theme.palette[color].main,
-              color: theme.palette.getContrastText(theme.palette[color].main),
-            }),
-      }),
+    variants: [
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main)
+        .map(([color]) => ({
+          props: { colorSeverity: color, variant: 'standard' },
+          style: {
+            color: theme.vars
+              ? theme.vars.palette.Alert[`${color}Color`]
+              : getColor(theme.palette[color].light, 0.6),
+            backgroundColor: theme.vars
+              ? theme.vars.palette.Alert[`${color}StandardBg`]
+              : getBackgroundColor(theme.palette[color].light, 0.9),
+            [`& .${alertClasses.icon}`]: theme.vars
+              ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+              : {
+                  color: theme.palette[color].main,
+                },
+          },
+        })),
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main)
+        .map(([color]) => ({
+          props: { colorSeverity: color, variant: 'outlined' },
+          style: {
+            color: theme.vars
+              ? theme.vars.palette.Alert[`${color}Color`]
+              : getColor(theme.palette[color].light, 0.6),
+            border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+            [`& .${alertClasses.icon}`]: theme.vars
+              ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+              : {
+                  color: theme.palette[color].main,
+                },
+          },
+        })),
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main)
+        .map(([color]) => ({
+          props: { colorSeverity: color, variant: 'filled' },
+          style: {
+            fontWeight: theme.typography.fontWeightMedium,
+            ...(theme.vars
+              ? {
+                  color: theme.vars.palette.Alert[`${color}FilledColor`],
+                  backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
+                }
+              : {
+                  backgroundColor:
+                    theme.palette.mode === 'dark'
+                      ? theme.palette[color].dark
+                      : theme.palette[color].main,
+                  color: theme.palette.getContrastText(theme.palette[color].main),
+                }),
+          },
+        })),
+    ],
   };
 });
 
@@ -164,6 +177,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
     color,
     severity,
     variant,
+    colorSeverity: color || severity,
   };
 
   const classes = useUtilityClasses(ownerState);