fix(mui): remove @mui/styles package

Author: Hyperkid123

packages/common/package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "clsx": "^1.0.4",
     "lodash": "^4.17.15",
-    "react-select": "^3.0.8",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

packages/mui-component-mapper/package.json

@@ -25,24 +25,23 @@
     "directory": "packages/mui-component-mapper"
   },
   "devDependencies": {
-    "@mui/icons-material": "5.2.5",
-    "@mui/material": "5.2.8",
-    "@mui/styles": "5.2.3"
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.4"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": "*",
-    "@mui/icons-material": "5.2.5",
-    "@mui/material": "5.2.8",
-    "@mui/styles": "5.2.3",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.4",
     "prop-types": ">=15.7.2",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/system": "^5.10.4",
+    "@mui/x-date-pickers": "^5.0.1",
     "clsx": "^1.0.4",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21"

packages/mui-component-mapper/src/tests/dependencies.test.js

@@ -5,6 +5,5 @@ describe('package.json', () => {
   it('mui-mapper has the same version as react-renderer-demo', () => {
     expect(MUIJson.devDependencies['@mui/material']).toEqual(DEMOJson.dependencies['@mui/material']);
     expect(MUIJson.devDependencies['@mui/icons-material']).toEqual(DEMOJson.dependencies['@mui/icons-material']);
-    expect(MUIJson.devDependencies['@mui/styles']).toEqual(DEMOJson.dependencies['@mui/styles']);
   });
 });

packages/react-renderer-demo/package.json

@@ -28,17 +28,20 @@
     },
     "dependencies": {
         "@actions/github": "^5.0.0",
-        "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/editor-pro": "0.0.13",
+        "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
-        "@emotion/react": "^11.7.1",
-        "@emotion/styled": "^11.6.0",
+        "@emotion/cache": "^11.10.3",
+        "@emotion/react": "^11.10.4",
+        "@emotion/server": "^11.10.0",
+        "@emotion/styled": "^11.10.4",
+        "@emotion/utils": "^1.2.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
-        "@mui/icons-material": "5.2.5",
-        "@mui/material": "5.2.8",
-        "@mui/styles": "5.2.3",
-        "@mui/x-date-pickers": "5.0.0-beta.0",
+        "@mui/icons-material": "^5.10.3",
+        "@mui/material": "^5.10.4",
+        "@mui/system": "^5.10.4",
+        "@mui/x-date-pickers": "^5.0.1",
         "@next/bundle-analyzer": "12.3.0",
         "@next/mdx": "12.3.0",
         "@rvsia/next-offline": "^5.0.5",
@@ -64,9 +67,9 @@
     "devDependencies": {
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
-        "glob": "^7.2.0",
         "firebase-functions-test": "^0.3.3",
         "firebase-tools": "^10.1.0",
+        "glob": "^7.2.0",
         "rimraf": "^3.0.2"
     }
 }

packages/react-renderer-demo/src/next.config.js

@@ -56,11 +56,19 @@ module.exports = withBundleAnalyzer(
         config.resolve.alias = {
           ...config.resolve.alias,
           ...(process.env.DEPLOY === 'true'
-            ? {}
+            ? {
+                "@emotion/react": path.resolve(__dirname, '../node_modules/@emotion/react'),
+                "@emotion/server": path.resolve(__dirname, '../node_modules/@emotion/server'),
+                "@emotion/styled": path.resolve(__dirname, '../node_modules/@emotion/styled'),
+              }
             : {
                 react: path.resolve(__dirname, '../../../node_modules/react'),
                 'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
+                "@emotion/react": path.resolve(__dirname, '../../../node_modules/@emotion/react'),
+                "@emotion/server": path.resolve(__dirname, '../../../node_modules/@emotion/server'),
+                "@emotion/styled": path.resolve(__dirname, '../../../node_modules/@emotion/styled'),
               }),
+
           '@docs/doc-components': path.resolve(__dirname, './doc-components'),
           '@docs/components': path.resolve(__dirname, './components'),
           '@docs/pages': path.resolve(__dirname, './pages'),

packages/react-renderer-demo/src/pages/_app.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import App from 'next/app';
+import * as React from 'react';
+import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { ThemeProvider } from '@mui/material/styles';
-import { StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import theme from '../theme';
+import { CacheProvider } from '@emotion/react';
 import Layout from '@docs/components/layout';
 import { MDXProvider } from '@mdx-js/react';
 import MdxComponents from '@docs/components/mdx/mdx-components';
+
 import CookieModal from '../components/cookie-modal';
+import theme from '../theme';
+import createEmotionCache from '../utils/create-emotion-cache';
 
-export default class MyApp extends App {
-  componentDidMount() {
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles) {
-      jssStyles.parentNode.removeChild(jssStyles);
-    }
-  }
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
 
-  render() {
-    const { Component, pageProps } = this.props;
+export default function App(props) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
 
-    return (
-      <React.Fragment>
-        <Head>
-          <title>Data driven forms</title>
-        </Head>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <MDXProvider components={MdxComponents}>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </MDXProvider>
-            <CookieModal />
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </React.Fragment>
-    );
-  }
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <title>Data driven forms</title>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <MDXProvider components={MdxComponents}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </MDXProvider>
+        <CookieModal />
+      </ThemeProvider>
+    </CacheProvider>
+  );
 }
+
+App.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  emotionCache: PropTypes.object,
+  pageProps: PropTypes.object.isRequired,
+};

packages/react-renderer-demo/src/pages/_document.js

@@ -1,59 +1,32 @@
-import React from 'react';
-import Document, { Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@mui/styles';
+import * as React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import createEmotionServer from '@emotion/server/create-instance';
+import theme from '../theme';
+import createEmotionCache from '../utils/create-emotion-cache';
 
-class MyDocument extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
-      <html lang="en">
+      <Html lang="en">
         <Head>
-          <meta charSet="utf-8" />
-          <meta name="author" content="Data Driven Forms" />
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="shortcut icon" href="/favicon.ico" />
-          <link rel="apple-touch-icon" href="/192x192.png"></link>
-          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
           {/* PWA primary color */}
-          <meta name="theme-color" content="#430f8f" />
-          <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-          <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" />
-          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-          <style
-            dangerouslySetInnerHTML={{
-              __html: `
-          html {
-            box-sizing: border-box;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-          }
-          *, *::before, *::after {
-            box-sizing: inherit;
-          }
-          strong, b {
-            font-weight: bolder !important;
-          }
-          body {
-            color: rgba(0, 0, 0, 0.87) !important;
-            margin: 0 !important;
-            font-size: 0.875rem !important;
-            font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
-            font-weight: 400 !important;
-            line-height: 1.43 !important;
-            letter-spacing: 0.01071em !important;
-            background-color: #fafafa !important;
-          }`,
-            }}
-          />
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+          <meta name="emotion-insertion-point" content="" />
+          {this.props.emotionStyleTags}
         </Head>
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     );
   }
 }
 
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
 MyDocument.getInitialProps = async (ctx) => {
   // Resolution order
   //
@@ -77,27 +50,36 @@ MyDocument.getInitialProps = async (ctx) => {
   // 3. app.render
   // 4. page.render
 
-  // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;
 
+  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: (App) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
     });
 
   const initialProps = await Document.getInitialProps(ctx);
+  // This is important. It prevents Emotion to render invalid HTML.
+  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
 
   return {
     ...initialProps,
-    // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      <React.Fragment key="styles">
-        {initialProps.styles}
-        {sheets.getStyleElement()}
-      </React.Fragment>,
-    ],
+    emotionStyleTags,
   };
 };
-
-export default MyDocument;

packages/react-renderer-demo/src/stackblitz-templates/mui-templates.js

@@ -75,6 +75,5 @@ export const dependencies = {
   '@mui/icons-material': 'latest',
   '@mui/x-date-pickers': 'latest',
   '@mui/material': 'latest',
-  '@mui/styles': 'latest',
   'prop-types': 'latest',
 };

packages/react-renderer-demo/src/utils/create-emotion-cache.js

@@ -0,0 +1,19 @@
+import createCache from '@emotion/cache';
+
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
+}
+
+export default createEmotionCache;