Ryan review

Author: oliviertassinari

packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js

@@ -4,6 +4,7 @@ import warning from 'warning';
 import { exactProp } from '@material-ui/utils';
 import ThemeContext from '../useTheme/ThemeContext';
 import useTheme from '../useTheme';
+import nested from './nested';
 
 // To support composition of theme.
 function mergeOuterLocalTheme(outerTheme, localTheme) {
@@ -24,8 +25,6 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
   return { ...outerTheme, ...localTheme };
 }
 
-export const nested = Symbol('nested');
-
 /**
  * This component takes a `theme` property.
  * It makes the `theme` available down the React tree thanks to React context.

packages/material-ui-styles/src/ThemeProvider/nested.js

@@ -0,0 +1,3 @@
+const nested = Symbol('nested');
+
+export default nested;

packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js

@@ -1,11 +1,5 @@
 import warning from 'warning';
-import { nested } from '../ThemeProvider/ThemeProvider';
-
-function safePrefix(classNamePrefix) {
-  const prefix = String(classNamePrefix);
-  warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`);
-  return prefix;
-}
+import nested from '../ThemeProvider/nested';
 
 /**
  * This is the list of the style rule name we use as drop in replacement for the built-in
@@ -35,30 +29,10 @@ const pseudoClasses = [
 // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
 export default function createGenerateClassName(options = {}) {
   const { disableGlobal = false, productionPrefix = 'jss', seed = '' } = options;
+  const classNameSeed = seed === '' ? '' : `-${seed}`;
   let ruleCounter = 0;
 
   return (rule, styleSheet) => {
-    const isGlobal =
-      !styleSheet.options.link &&
-      styleSheet.options.name &&
-      styleSheet.options.name.indexOf('Mui') === 0 &&
-      !disableGlobal;
-
-    if (isGlobal) {
-      if (pseudoClasses.indexOf(rule.key) !== -1) {
-        return rule.key;
-      }
-
-      if (!styleSheet.options.theme[nested]) {
-        const prefix = `${safePrefix(styleSheet.options.name)}${seed}`;
-
-        if (rule.key === 'root') {
-          return prefix;
-        }
-        return `${prefix}-${rule.key}`;
-      }
-    }
-
     ruleCounter += 1;
     warning(
       ruleCounter < 1e10,
@@ -68,15 +42,33 @@ export default function createGenerateClassName(options = {}) {
       ].join(''),
     );
 
+    const name = styleSheet.options.name;
+
+    // Is a global static MUI style?
+    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+      // We can use a shorthand class name, we never use the keys to style the components.
+      if (pseudoClasses.indexOf(rule.key) !== -1) {
+        return rule.key;
+      }
+
+      const prefix = `${name}${rule.key === 'root' ? '' : `-${rule.key}`}${classNameSeed}`;
+
+      if (!styleSheet.options.theme[nested] || seed !== '') {
+        return prefix;
+      }
+
+      return `${prefix}-${ruleCounter}`;
+    }
+
     if (process.env.NODE_ENV === 'production' && productionPrefix !== '') {
-      return `${productionPrefix}${seed}${ruleCounter}`;
+      return `${productionPrefix}${classNameSeed}${ruleCounter}`;
     }
 
-    const suffix = `${rule.key}-${seed}${ruleCounter}`;
+    const suffix = `${rule.key}${classNameSeed}-${ruleCounter}`;
 
     // Help with debuggability.
     if (styleSheet.options.classNamePrefix) {
-      return `${safePrefix(styleSheet.options.classNamePrefix)}-${suffix}`;
+      return `${styleSheet.options.classNamePrefix}-${suffix}`;
     }
 
     return suffix;

packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js

@@ -1,7 +1,7 @@
 import { assert } from 'chai';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import createGenerateClassName from './createGenerateClassName';
-import { nested } from '../ThemeProvider/ThemeProvider';
+import nested from '../ThemeProvider/nested';
 
 describe('createGenerateClassName', () => {
   it('should generate a class name', () => {
@@ -91,7 +91,7 @@ describe('createGenerateClassName', () => {
           },
         },
       ),
-      'root-1',
+      'MuiButton-2',
     );
   });