Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/styles/createGenerateClassName.js.flow

@@ -1,8 +1,4 @@
-// @flow
-
 import warning from 'warning';
-import type StyleSheet from 'jss/lib/StyleSheet';
-import type { Rule, generateClassName } from 'jss/lib/types';
 
 let generatorCounter = 0;
 
@@ -10,12 +6,24 @@ let generatorCounter = 0;
 // When new generator function is created, rule counter is reset.
 // We need to reset the rule counter for SSR for each request.
 //
-// It's an improved version of
+// It's inspired by
 // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
-export default function createGenerateClassName(): generateClassName {
+export default function createGenerateClassName(options = {}) {
+  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss' } = options;
+  const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
   let ruleCounter = 0;
 
-  if (process.env.NODE_ENV === 'production' && typeof window !== 'undefined') {
+  // - HMR can lead to many class name generators being instantiated,
+  // so the warning is only triggered in production.
+  // - We expect a class name generator to be instantiated per new request on the server,
+  // so the warning is only triggered client side.
+  // - You can get away with having multiple class name generators
+  // by modifying the `productionPrefix`.
+  if (
+    process.env.NODE_ENV === 'production' &&
+    typeof window !== 'undefined' &&
+    productionPrefix === 'jss'
+  ) {
     generatorCounter += 1;
 
     if (generatorCounter > 2) {
@@ -30,7 +38,7 @@ export default function createGenerateClassName(): generateClassName {
     }
   }
 
-  return (rule: Rule, sheet?: StyleSheet): string => {
+  return (rule, styleSheet) => {
     ruleCounter += 1;
     warning(
       ruleCounter < 1e10,
@@ -40,17 +48,39 @@ export default function createGenerateClassName(): generateClassName {
       ].join(''),
     );
 
-    if (process.env.NODE_ENV === 'production') {
-      return `c${ruleCounter}`;
+    // Code branch the whole block at the expense of more code.
+    if (dangerouslyUseGlobalCSS) {
+      if (styleSheet && styleSheet.options.classNamePrefix) {
+        let prefix = styleSheet.options.classNamePrefix;
+        // Sanitize the string as will be used to prefix the generated class name.
+        prefix = prefix.replace(escapeRegex, '-');
+
+        if (prefix.match(/^Mui/)) {
+          return `${prefix}-${rule.key}`;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          return `${prefix}-${rule.key}-${ruleCounter}`;
+        }
+      }
+
+      if (process.env.NODE_ENV === 'production') {
+        return `${productionPrefix}${ruleCounter}`;
+      }
+
+      return `${rule.key}-${ruleCounter}`;
     }
 
-    if (sheet && sheet.options.meta) {
-      let meta = sheet.options.meta;
-      // Sanitize the string as will be used in development to prefix the generated
-      // class name.
-      meta = meta.replace(new RegExp(/[!"#$%&'()*+,./:; <=>?@[\\\]^`{|}~]/g), '-');
+    if (process.env.NODE_ENV === 'production') {
+      return `${productionPrefix}${ruleCounter}`;
+    }
 
-      return `${meta}-${rule.key}-${ruleCounter}`;
+    if (styleSheet && styleSheet.options.classNamePrefix) {
+      let prefix = styleSheet.options.classNamePrefix;
+      // Sanitize the string as will be used to prefix the generated class name.
+      prefix = prefix.replace(escapeRegex, '-');
+
+      return `${prefix}-${rule.key}-${ruleCounter}`;
     }
 
     return `${rule.key}-${ruleCounter}`;