Skip to content

Commit b5a9181

Browse files
Hyperkid123Hyperkid123
committed
fix(mui): remove @mui/styles package
1 parent aa4b9fa commit b5a9181

File tree

9 files changed

+117
-109
lines changed

9 files changed

+117
-109
lines changed

‎packages/common/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"dependencies": {
2525
"clsx": "^1.0.4",
2626
"lodash": "^4.17.15",
27-
"react-select": "^3.0.8",
2827
"prop-types": "^15.7.2"
2928
},
3029
"peerDependencies": {

‎packages/mui-component-mapper/package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,23 @@
2525
"directory": "packages/mui-component-mapper"
2626
},
2727
"devDependencies": {
28-
"@mui/icons-material": "5.2.5",
29-
"@mui/material": "5.2.8",
30-
"@mui/styles": "5.2.3"
28+
"@mui/icons-material": "^5.10.3",
29+
"@mui/material": "^5.10.4"
3130
},
3231
"peerDependencies": {
3332
"@data-driven-forms/react-form-renderer": "*",
34-
"@mui/icons-material": "5.2.5",
35-
"@mui/material": "5.2.8",
36-
"@mui/styles": "5.2.3",
33+
"@mui/icons-material": "^5.10.3",
34+
"@mui/material": "^5.10.4",
3735
"prop-types": ">=15.7.2",
3836
"react": "^17.0.2 || ^18.0.0",
3937
"react-dom": "^17.0.2 || ^18.0.0"
4038
},
4139
"dependencies": {
4240
"@data-driven-forms/common": "*",
43-
"@emotion/react": "^11.5.0",
44-
"@emotion/styled": "^11.3.0",
45-
"@mui/x-date-pickers": "^5.0.0-beta.0",
41+
"@emotion/react": "^11.10.4",
42+
"@emotion/styled": "^11.10.4",
43+
"@mui/system": "^5.10.4",
44+
"@mui/x-date-pickers": "^5.0.1",
4645
"clsx": "^1.0.4",
4746
"date-fns": "^2.16.1",
4847
"lodash": "^4.17.21"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@ describe('package.json', () => {
55
it('mui-mapper has the same version as react-renderer-demo', () => {
66
expect(MUIJson.devDependencies['@mui/material']).toEqual(DEMOJson.dependencies['@mui/material']);
77
expect(MUIJson.devDependencies['@mui/icons-material']).toEqual(DEMOJson.dependencies['@mui/icons-material']);
8-
expect(MUIJson.devDependencies['@mui/styles']).toEqual(DEMOJson.dependencies['@mui/styles']);
98
});
109
});

‎packages/react-renderer-demo/package.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,20 @@
2828
},
2929
"dependencies": {
3030
"@actions/github": "^5.0.0",
31-
"@data-driven-forms/mui-component-mapper": "*",
3231
"@data-driven-forms/editor-pro": "0.0.13",
32+
"@data-driven-forms/mui-component-mapper": "*",
3333
"@data-driven-forms/react-form-renderer": "*",
34-
"@emotion/react": "^11.7.1",
35-
"@emotion/styled": "^11.6.0",
34+
"@emotion/cache": "^11.10.3",
35+
"@emotion/react": "^11.10.4",
36+
"@emotion/server": "^11.10.0",
37+
"@emotion/styled": "^11.10.4",
38+
"@emotion/utils": "^1.2.0",
3639
"@mdx-js/loader": "^1.6.22",
3740
"@mdx-js/react": "^1.6.22",
38-
"@mui/icons-material": "5.2.5",
39-
"@mui/material": "5.2.8",
40-
"@mui/styles": "5.2.3",
41-
"@mui/x-date-pickers": "5.0.0-beta.0",
41+
"@mui/icons-material": "^5.10.3",
42+
"@mui/material": "^5.10.4",
43+
"@mui/system": "^5.10.4",
44+
"@mui/x-date-pickers": "^5.0.1",
4245
"@next/bundle-analyzer": "12.3.0",
4346
"@next/mdx": "12.3.0",
4447
"@rvsia/next-offline": "^5.0.5",
@@ -64,9 +67,9 @@
6467
"devDependencies": {
6568
"cpx": "^1.5.0",
6669
"cross-env": "^7.0.3",
67-
"glob": "^7.2.0",
6870
"firebase-functions-test": "^0.3.3",
6971
"firebase-tools": "^10.1.0",
72+
"glob": "^7.2.0",
7073
"rimraf": "^3.0.2"
7174
}
7275
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,19 @@ module.exports = withBundleAnalyzer(
5656
config.resolve.alias = {
5757
...config.resolve.alias,
5858
...(process.env.DEPLOY === 'true'
59-
? {}
59+
? {
60+
"@emotion/react": path.resolve(__dirname, '../node_modules/@emotion/react'),
61+
"@emotion/server": path.resolve(__dirname, '../node_modules/@emotion/server'),
62+
"@emotion/styled": path.resolve(__dirname, '../node_modules/@emotion/styled'),
63+
}
6064
: {
6165
react: path.resolve(__dirname, '../../../node_modules/react'),
6266
'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
67+
"@emotion/react": path.resolve(__dirname, '../../../node_modules/@emotion/react'),
68+
"@emotion/server": path.resolve(__dirname, '../../../node_modules/@emotion/server'),
69+
"@emotion/styled": path.resolve(__dirname, '../../../node_modules/@emotion/styled'),
6370
}),
71+
6472
'@docs/doc-components': path.resolve(__dirname, './doc-components'),
6573
'@docs/components': path.resolve(__dirname, './components'),
6674
'@docs/pages': path.resolve(__dirname, './pages'),

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

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
import React from 'react';
2-
import App from 'next/app';
1+
import * as React from 'react';
2+
import PropTypes from 'prop-types';
33
import Head from 'next/head';
44
import { ThemeProvider } from '@mui/material/styles';
5-
import { StyledEngineProvider } from '@mui/material/styles';
65
import CssBaseline from '@mui/material/CssBaseline';
7-
import theme from '../theme';
6+
import { CacheProvider } from '@emotion/react';
87
import Layout from '@docs/components/layout';
98
import { MDXProvider } from '@mdx-js/react';
109
import MdxComponents from '@docs/components/mdx/mdx-components';
10+
1111
import CookieModal from '../components/cookie-modal';
12+
import theme from '../theme';
13+
import createEmotionCache from '../utils/create-emotion-cache';
1214

13-
export default class MyApp extends App {
14-
componentDidMount() {
15-
// Remove the server-side injected CSS.
16-
const jssStyles = document.querySelector('#jss-server-side');
17-
if (jssStyles) {
18-
jssStyles.parentNode.removeChild(jssStyles);
19-
}
20-
}
15+
// Client-side cache, shared for the whole session of the user in the browser.
16+
const clientSideEmotionCache = createEmotionCache();
2117

22-
render() {
23-
const { Component, pageProps } = this.props;
18+
export default function App(props) {
19+
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
2420

25-
return (
26-
<React.Fragment>
27-
<Head>
28-
<title>Data driven forms</title>
29-
</Head>
30-
<StyledEngineProvider injectFirst>
31-
<ThemeProvider theme={theme}>
32-
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
33-
<CssBaseline />
34-
<MDXProvider components={MdxComponents}>
35-
<Layout>
36-
<Component {...pageProps} />
37-
</Layout>
38-
</MDXProvider>
39-
<CookieModal />
40-
</ThemeProvider>
41-
</StyledEngineProvider>
42-
</React.Fragment>
43-
);
44-
}
21+
return (
22+
<CacheProvider value={emotionCache}>
23+
<Head>
24+
<title>Data driven forms</title>
25+
<meta name="viewport" content="initial-scale=1, width=device-width" />
26+
</Head>
27+
<ThemeProvider theme={theme}>
28+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
29+
<CssBaseline />
30+
<MDXProvider components={MdxComponents}>
31+
<Layout>
32+
<Component {...pageProps} />
33+
</Layout>
34+
</MDXProvider>
35+
<CookieModal />
36+
</ThemeProvider>
37+
</CacheProvider>
38+
);
4539
}
40+
41+
App.propTypes = {
42+
Component: PropTypes.elementType.isRequired,
43+
emotionCache: PropTypes.object,
44+
pageProps: PropTypes.object.isRequired,
45+
};

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

Lines changed: 36 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,32 @@
1-
import React from 'react';
2-
import Document, { Head, Main, NextScript } from 'next/document';
3-
import { ServerStyleSheets } from '@mui/styles';
1+
import * as React from 'react';
2+
import Document, { Html, Head, Main, NextScript } from 'next/document';
3+
import createEmotionServer from '@emotion/server/create-instance';
4+
import theme from '../theme';
5+
import createEmotionCache from '../utils/create-emotion-cache';
46

5-
class MyDocument extends Document {
7+
export default class MyDocument extends Document {
68
render() {
79
return (
8-
<html lang="en">
10+
<Html lang="en">
911
<Head>
10-
<meta charSet="utf-8" />
11-
<meta name="author" content="Data Driven Forms" />
12-
<link rel="manifest" href="/manifest.json" />
13-
<link rel="shortcut icon" href="/favicon.ico" />
14-
<link rel="apple-touch-icon" href="/192x192.png"></link>
15-
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
1612
{/* PWA primary color */}
17-
<meta name="theme-color" content="#430f8f" />
18-
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
19-
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" />
20-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
21-
<style
22-
dangerouslySetInnerHTML={{
23-
__html: `
24-
html {
25-
box-sizing: border-box;
26-
-webkit-font-smoothing: antialiased;
27-
-moz-osx-font-smoothing: grayscale;
28-
}
29-
*, *::before, *::after {
30-
box-sizing: inherit;
31-
}
32-
strong, b {
33-
font-weight: bolder !important;
34-
}
35-
body {
36-
color: rgba(0, 0, 0, 0.87) !important;
37-
margin: 0 !important;
38-
font-size: 0.875rem !important;
39-
font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
40-
font-weight: 400 !important;
41-
line-height: 1.43 !important;
42-
letter-spacing: 0.01071em !important;
43-
background-color: #fafafa !important;
44-
}`,
45-
}}
46-
/>
13+
<meta name="theme-color" content={theme.palette.primary.main} />
14+
<link rel="shortcut icon" href="/favicon.ico" />
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
16+
<meta name="emotion-insertion-point" content="" />
17+
{this.props.emotionStyleTags}
4718
</Head>
4819
<body>
4920
<Main />
5021
<NextScript />
5122
</body>
52-
</html>
23+
</Html>
5324
);
5425
}
5526
}
5627

28+
// `getInitialProps` belongs to `_document` (instead of `_app`),
29+
// it's compatible with static-site generation (SSG).
5730
MyDocument.getInitialProps = async (ctx) => {
5831
// Resolution order
5932
//
@@ -77,27 +50,36 @@ MyDocument.getInitialProps = async (ctx) => {
7750
// 3. app.render
7851
// 4. page.render
7952

80-
// Render app and page and get the context of the page with collected side effects.
81-
const sheets = new ServerStyleSheets();
8253
const originalRenderPage = ctx.renderPage;
8354

55+
// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
56+
// However, be aware that it can have global side effects.
57+
const cache = createEmotionCache();
58+
const { extractCriticalToChunks } = createEmotionServer(cache);
59+
8460
ctx.renderPage = () =>
8561
originalRenderPage({
86-
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
62+
enhanceApp: (App) =>
63+
function EnhanceApp(props) {
64+
return <App emotionCache={cache} {...props} />;
65+
},
8766
});
8867

8968
const initialProps = await Document.getInitialProps(ctx);
69+
// This is important. It prevents Emotion to render invalid HTML.
70+
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
71+
const emotionStyles = extractCriticalToChunks(initialProps.html);
72+
const emotionStyleTags = emotionStyles.styles.map((style) => (
73+
<style
74+
data-emotion={`${style.key} ${style.ids.join(' ')}`}
75+
key={style.key}
76+
// eslint-disable-next-line react/no-danger
77+
dangerouslySetInnerHTML={{ __html: style.css }}
78+
/>
79+
));
9080

9181
return {
9282
...initialProps,
93-
// Styles fragment is rendered after the app and page rendering finish.
94-
styles: [
95-
<React.Fragment key="styles">
96-
{initialProps.styles}
97-
{sheets.getStyleElement()}
98-
</React.Fragment>,
99-
],
83+
emotionStyleTags,
10084
};
10185
};
102-
103-
export default MyDocument;

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,5 @@ export const dependencies = {
7575
'@mui/icons-material': 'latest',
7676
'@mui/x-date-pickers': 'latest',
7777
'@mui/material': 'latest',
78-
'@mui/styles': 'latest',
7978
'prop-types': 'latest',
8079
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import createCache from '@emotion/cache';
2+
3+
const isBrowser = typeof document !== 'undefined';
4+
5+
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
6+
// This assures that MUI styles are loaded first.
7+
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
8+
function createEmotionCache() {
9+
let insertionPoint;
10+
11+
if (isBrowser) {
12+
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
13+
insertionPoint = emotionInsertionPoint ?? undefined;
14+
}
15+
16+
return createCache({ key: 'mui-style', insertionPoint });
17+
}
18+
19+
export default createEmotionCache;

0 commit comments

Comments
 (0)