[core] Move StyledEngineProvider to @material-ui/core/styles (#26265

)
mui · May 13, 2021 · d68c050 · d68c050
1 parent 9325231
commit d68c050
Show file tree

Hide file tree

Showing 21 changed files with 44 additions and 28 deletions.
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -11,7 +11,7 @@ import { create } from 'jss';
 import jssRtl from 'jss-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';

diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
@@ -11,7 +11,7 @@ function jsDemo(demoData) {
       'index.js': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Demo from './demo';
 
 ReactDOM.render(
@@ -36,7 +36,7 @@ function tsDemo(demoData) {
       'index.tsx': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Demo from './demo';
 
 ReactDOM.render(

diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
@@ -55,7 +55,7 @@ export default function PlainCssSlider() {
 
 ```jsx
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 export default function GlobalCssPriority() {
   return (
@@ -208,7 +208,7 @@ export default function GlobalCssSlider() {
 
 ```jsx
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 export default function GlobalCssPriority() {
   return (
@@ -457,7 +457,7 @@ export default function CssModulesSlider() {
 
 ```jsx
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 export default function GlobalCssPriority() {
   return (

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -89,7 +89,7 @@ The styled engine used in v5 by default is [`emotion`](https://github.com/emotio
 
 ```jsx
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 export default function GlobalCssPriority() {
   return (

diff --git a/examples/create-react-app-with-styled-components-typescript/src/index.tsx b/examples/create-react-app-with-styled-components-typescript/src/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import App from './App';
 
 ReactDOM.render(

diff --git a/examples/create-react-app-with-styled-components/src/index.js b/examples/create-react-app-with-styled-components/src/index.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

diff --git a/examples/create-react-app-with-typescript/src/index.tsx b/examples/create-react-app-with-typescript/src/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';

diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';
 

diff --git a/examples/gatsby-theme/src/pages/about.js b/examples/gatsby-theme/src/pages/about.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';

diff --git a/examples/gatsby-theme/src/pages/index.js b/examples/gatsby-theme/src/pages/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';

diff --git a/examples/gatsby/src/pages/about.js b/examples/gatsby/src/pages/about.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';

diff --git a/examples/gatsby/src/pages/index.js b/examples/gatsby/src/pages/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';

diff --git a/examples/preact/src/App.js b/examples/preact/src/App.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';

diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js
@@ -29,6 +29,24 @@ const nestedFolder = {
       return resolved;
     }
 
+    if (importee.indexOf('@material-ui/styled-engine/') === 0) {
+      const folder = importee.split('/')[2];
+      const resolved = path.resolve(
+        __dirname,
+        `../../../packages/material-ui-styled-engine/src/${folder}/index.js`,
+      );
+      return resolved;
+    }
+
+    if (importee.indexOf('@material-ui/styled-engine-sc/') === 0) {
+      const folder = importee.split('/')[2];
+      const resolved = path.resolve(
+        __dirname,
+        `../../../packages/material-ui-styled-engine-sc/src/${folder}/index.js`,
+      );
+      return resolved;
+    }
+
     return undefined;
   },
 };

diff --git a/packages/material-ui/src/StyledEngineProvider/index.d.ts b/packages/material-ui/src/StyledEngineProvider/index.d.ts
@@ -1 +1,4 @@
+/**
+ * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @material-ui/core/styles instead
+ */
 export { StyledEngineProvider as default } from '@material-ui/styled-engine';
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
@@ -463,7 +463,6 @@ export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 
 /**
- * @deprecated will be removed in v5.beta, please use StyledEngineProvider instead
+ * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @material-ui/core/styles instead
  */
-export { default as StylesProvider } from './StyledEngineProvider';
-export { default as StyledEngineProvider } from './StyledEngineProvider';
+export { StyledEngineProvider } from './styles';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
@@ -398,8 +398,4 @@ export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 
-/**
- * @deprecated will be removed in v5 beta, please use StyledEngineProvider instead
- */
-export { default as StylesProvider } from './StyledEngineProvider';
-export { default as StyledEngineProvider } from './StyledEngineProvider';
+export { StyledEngineProvider } from './styles';
diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts
@@ -58,3 +58,4 @@ export {
 export { ComponentsProps } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides } from './overrides';
+export { default as StyledEngineProvider } from '@material-ui/styled-engine/StyledEngineProvider';
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
@@ -12,3 +12,4 @@ export { default as unstable_useThemeProps } from './useThemeProps';
 export { default as withStyles } from './withStyles';
 export { default as experimentalStyled } from './experimentalStyled';
 export { default as ThemeProvider } from './ThemeProvider';
+export { default as StyledEngineProvider } from '@material-ui/styled-engine/StyledEngineProvider';
diff --git a/test/e2e/TestViewer.js b/test/e2e/TestViewer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 function TestViewer(props) {
   const { children } = props;

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, StyledEngineProvider } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
   '@global': {