@material-ui/styles

.circleci/config.yml

@@ -182,14 +182,20 @@ jobs:
       - *restore_yarn_cache
       - *install_js
       - run:
-          name: Can we generate the material-ui build?
+          name: Can we generate the @material-ui/core build?
           command: cd packages/material-ui && yarn build
+      - run:
+          name: Can we generate the @material-ui/styles build?
+          command: cd packages/material-ui-styles && yarn build
+      - run:
+          name: Can we generate the @material-ui/utils build?
+          command: cd packages/material-ui-utils && yarn build
       - run:
           name: Can we build the docs?
           command: yarn docs:build
       - run:
           name: Is the size acceptable?
-          command: yarn size
+          command: yarn lerna bootstrap && yarn size
   test_browser:
     <<: *defaults
     steps:

.eslintignore

@@ -6,8 +6,6 @@
 /examples/create-react-app-with-flow/flow
 /examples/create-react-app-with-flow/flow-typed
 /examples/gatsby/public
-/flow
-/flow-typed
 /packages/material-ui-codemod/lib
 /packages/material-ui-codemod/src/*/*.test
 /packages/material-ui-codemod/src/*/*.test.js

.size-limit.js

@@ -19,16 +19,22 @@ module.exports = [
     limit: '18.5 KB',
   },
   {
-    name: 'The size of all the material-ui modules.',
+    name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
     limit: '94.1 KB',
   },
+  {
+    name: 'The size of the @material-ui/styles modules',
+    webpack: true,
+    path: 'packages/material-ui-styles/build/index.js',
+    limit: '14.9 KB',
+  },
   {
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '185 KB',
+    limit: '190 KB',
   },
   {
     name: 'The docs home page',

BACKERS.md

@@ -68,7 +68,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 | Avétis KAZARIAN | Withinpixels | SIM KIM SIA | Renaud Bompuis | Yaron Malin |
 | Arvanitis Panagiotis | Jesse Weigel | Bogdan Mihai Nicolae | Dung Tran | Kyle Pennell |
 | Kai Mit Pansen | Eric Nagy | Karens Grigorjancs | Mohamed Turco | Haroun Serang |
-| Antonio Seveso | Ali Akhavan | Bruno Winck | Alessandro Annini |
+| Antonio Seveso | Ali Akhavan | Bruno Winck | Alessandro Annini | Victor Irzak |
 
 via [OpenCollective](https://opencollective.com/material-ui)
 

babel.config.js

@@ -27,6 +27,14 @@ if (process.env.BABEL_ENV === 'es') {
   ];
 }
 
+const defaultAlias = {
+  '@material-ui/core': './packages/material-ui/src',
+  '@material-ui/icons': './packages/material-ui-icons/src',
+  '@material-ui/lab': './packages/material-ui-lab/src',
+  '@material-ui/styles': './packages/material-ui-styles/src',
+  '@material-ui/utils': './packages/material-ui-utils/src',
+};
+
 module.exports = {
   presets: defaultPresets.concat(['@babel/preset-react']),
   plugins: [
@@ -42,17 +50,26 @@ module.exports = {
     '@babel/plugin-transform-runtime',
   ],
   env: {
+    test: {
+      sourceMaps: 'both',
+      plugins: [
+        [
+          'babel-plugin-module-resolver',
+          {
+            root: ['./'],
+            alias: defaultAlias,
+          },
+        ],
+      ],
+    },
     coverage: {
       plugins: [
         'babel-plugin-istanbul',
         [
           'babel-plugin-module-resolver',
           {
             root: ['./'],
-            alias: {
-              '@material-ui/core': './packages/material-ui/src',
-              '@material-ui/icons': './packages/material-ui-icons/src',
-            },
+            alias: defaultAlias,
           },
         ],
       ],
@@ -76,10 +93,8 @@ module.exports = {
           'babel-plugin-module-resolver',
           {
             alias: {
-              '@material-ui/core': './packages/material-ui/src',
+              ...defaultAlias,
               '@material-ui/docs': './packages/material-ui-docs/src',
-              '@material-ui/icons': './packages/material-ui-icons/src',
-              '@material-ui/lab': './packages/material-ui-lab/src',
               docs: './docs',
               modules: './modules',
               pages: './pages',
@@ -97,10 +112,8 @@ module.exports = {
           'babel-plugin-module-resolver',
           {
             alias: {
-              '@material-ui/core': './packages/material-ui/src',
+              ...defaultAlias,
               '@material-ui/docs': './packages/material-ui-docs/src',
-              '@material-ui/icons': './packages/material-ui-icons/src',
-              '@material-ui/lab': './packages/material-ui-lab/src',
               docs: './docs',
               modules: './modules',
               pages: './pages',
@@ -160,20 +173,5 @@ module.exports = {
         ],
       ],
     },
-    test: {
-      sourceMaps: 'both',
-      plugins: [
-        [
-          'babel-plugin-module-resolver',
-          {
-            root: ['./'],
-            alias: {
-              '@material-ui/core': './packages/material-ui/src',
-              '@material-ui/icons': './packages/material-ui-icons/src',
-            },
-          },
-        ],
-      ],
-    },
   },
 };

crowdin.yml

@@ -2,5 +2,5 @@ files:
   - source: /docs/src/pages/**/*.md
     ignore:
       - /**/%file_name%-%two_letters_code%.md
-      - /docs/src/pages/page-layout-examples/**/*
+      - /docs/src/pages/getting-started/page-layout-examples/**/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%

docs/src/modules/components/AppTableOfContents.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'docs/src/modules/components/Link';
 import marked from 'marked';
+import warning from 'warning';
 import throttle from 'lodash/throttle';
 import EventListener from 'react-event-listener';
 import { withStyles } from '@material-ui/core/styles';
@@ -22,6 +23,10 @@ renderer.heading = (text, level) => {
       children: [],
     });
   } else if (level === 3) {
+    if (!itemsServer[itemsServer.length - 1]) {
+      throw new Error(`Missing parent level for: ${text}`);
+    }
+
     itemsServer[itemsServer.length - 1].children.push({
       text,
       level,
@@ -61,6 +66,14 @@ const styles = theme => ({
   },
 });
 
+function checkDuplication(uniq, item) {
+  warning(!uniq[item.hash], `Duplicated table of content ${item.hash}`);
+
+  if (!uniq[item.hash]) {
+    uniq[item.hash] = true;
+  }
+}
+
 class AppTableOfContents extends React.Component {
   handleScroll = throttle(() => {
     this.findActiveIndex();
@@ -80,15 +93,18 @@ class AppTableOfContents extends React.Component {
 
   componentDidMount() {
     this.itemsClient = [];
+    const uniq = {};
 
     itemsServer.forEach(item2 => {
+      checkDuplication(uniq, item2);
       this.itemsClient.push({
         ...item2,
         node: document.getElementById(item2.hash),
       });
 
       if (item2.children.length > 0) {
         item2.children.forEach(item3 => {
+          checkDuplication(uniq, item3);
           this.itemsClient.push({
             ...item3,
             node: document.getElementById(item3.hash),

docs/src/modules/components/AppWrapper.js

@@ -3,8 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import JssProvider from 'react-jss/lib/JssProvider';
+import { ThemeProvider, StylesProvider } from '@material-ui/styles';
 import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
 import getPageContext, { updatePageContext } from 'docs/src/modules/styles/getPageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
@@ -79,16 +78,17 @@ class AppWrapper extends React.Component {
     const { pageContext } = this.state;
 
     return (
-      <JssProvider
-        jss={pageContext.jss}
-        registry={pageContext.sheetsRegistry}
+      <StylesProvider
         generateClassName={pageContext.generateClassName}
+        jss={pageContext.jss}
+        sheetsManager={pageContext.sheetsManager}
+        sheetsRegistry={pageContext.sheetsRegistry}
       >
-        <MuiThemeProvider theme={pageContext.theme} sheetsManager={pageContext.sheetsManager}>
+        <ThemeProvider theme={pageContext.theme}>
           {children}
           <GoogleAnalytics />
-        </MuiThemeProvider>
-      </JssProvider>
+        </ThemeProvider>
+      </StylesProvider>
     );
   }
 }

docs/src/modules/components/Demo.js

@@ -312,7 +312,7 @@ Demo.propTypes = {
   demoOptions: PropTypes.object.isRequired,
   githubLocation: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
-  js: PropTypes.func.isRequired,
+  js: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   raw: PropTypes.string.isRequired,
 };
 

docs/src/modules/components/DemoFrame.js

@@ -7,9 +7,9 @@ import {
   jssPreset,
   MuiThemeProvider,
 } from '@material-ui/core/styles';
+import { StylesProvider } from '@material-ui/styles';
 import rtl from 'jss-rtl';
 import Frame from 'react-frame-component';
-import JssProvider from 'react-jss/lib/JssProvider';
 
 const styles = theme => ({
   root: {
@@ -52,13 +52,13 @@ class DemoFrame extends React.Component {
     const { children, classes, theme } = this.props;
 
     const inIframe = this.state.ready ? (
-      <JssProvider jss={this.state.jss} generateClassName={generateClassName}>
+      <StylesProvider jss={this.state.jss} generateClassName={generateClassName}>
         <MuiThemeProvider theme={theme} sheetsManager={this.state.sheetsManager}>
           {React.cloneElement(children, {
             container: this.state.container,
           })}
         </MuiThemeProvider>
-      </JssProvider>
+      </StylesProvider>
     ) : null;
 
     return (

docs/src/modules/components/bootstrap.js

@@ -0,0 +1,3 @@
+import { install } from '@material-ui/styles';
+
+install();