[RFC] Use global class names

Author: oliviertassinari

docs/src/pages/demos/text-fields/CustomizedInputs.js

@@ -21,18 +21,17 @@ const styles = theme => ({
     margin: theme.spacing(1),
   },
   cssLabel: {
-    '&$cssFocused': {
+    '&.focused': {
       color: purple[500],
     },
   },
-  cssFocused: {},
   cssUnderline: {
     '&:after': {
       borderBottomColor: purple[500],
     },
   },
   cssOutlinedInput: {
-    '&$cssFocused $notchedOutline': {
+    '&.focused $notchedOutline': {
       borderColor: purple[500],
     },
   },
@@ -45,7 +44,7 @@ const styles = theme => ({
   bootstrapInput: {
     borderRadius: 4,
     position: 'relative',
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.background.paper,
     border: '1px solid #ced4da',
     fontSize: 16,
     width: 'auto',
@@ -76,24 +75,26 @@ const styles = theme => ({
     border: '1px solid #e2e2e1',
     overflow: 'hidden',
     borderRadius: 4,
-    backgroundColor: '#fcfcfb',
+    backgroundColor: theme.palette.background.default,
     transition: theme.transitions.create(['border-color', 'box-shadow']),
     '&:hover': {
-      backgroundColor: '#fff',
+      backgroundColor: theme.palette.background.paper,
     },
     '&.focused': {
-      backgroundColor: '#fff',
+      backgroundColor: theme.palette.background.paper,
       boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
       borderColor: theme.palette.primary.main,
     },
   },
 });
 
-const theme = createMuiTheme({
-  palette: {
-    primary: green,
-  },
-});
+const theme = outerTheme =>
+  createMuiTheme({
+    palette: {
+      ...outerTheme.palette,
+      primary: green,
+    },
+  });
 
 function CustomizedInputs(props) {
   const { classes } = props;
@@ -105,7 +106,6 @@ function CustomizedInputs(props) {
           htmlFor="custom-css-standard-input"
           classes={{
             root: classes.cssLabel,
-            focused: classes.cssFocused,
           }}
         >
           Custom CSS
@@ -122,13 +122,11 @@ function CustomizedInputs(props) {
         InputLabelProps={{
           classes: {
             root: classes.cssLabel,
-            focused: classes.cssFocused,
           },
         }}
         InputProps={{
           classes: {
             root: classes.cssOutlinedInput,
-            focused: classes.cssFocused,
             notchedOutline: classes.notchedOutline,
           },
         }}
@@ -170,7 +168,6 @@ function CustomizedInputs(props) {
           disableUnderline
           classes={{
             root: classes.redditRoot,
-            focused: 'focused',
           }}
         />
       </FormControl>

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

@@ -24,6 +24,8 @@ 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.
@@ -47,6 +49,11 @@ function ThemeProvider(props) {
   );
 
   const theme = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
+
+  if (theme && outerTheme !== null) {
+    theme[nested] = true
+  }
+
   return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 

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

@@ -1,26 +1,64 @@
 import warning from 'warning';
+import { nested } from '../ThemeProvider/ThemeProvider';
+
+const uppercasePattern = /[A-Z]/g;
+const cache = {};
+
+function toHyphenLower(match) {
+  return `-${match.toLowerCase()}`;
+}
+
+function camelCase(name) {
+  if (cache[name]) {
+    return cache[name];
+  }
+
+  const hName = name.replace(uppercasePattern, toHyphenLower).replace(/^-/, '');
+  cache[name] = hName;
+  return hName;
+}
 
 function safePrefix(classNamePrefix) {
   const prefix = String(classNamePrefix);
   warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`);
   return prefix;
 }
 
+const pseudoClasses = [
+  'checked',
+  'disabled',
+  'error',
+  'focused',
+  'focusVisible',
+  'required',
+  'selected',
+];
+
 // Returns a function which generates unique class names based on counters.
 // When new generator function is created, rule counter is reset.
 // We need to reset the rule counter for SSR for each request.
 //
 // It's inspired by
 // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
 export default function createGenerateClassName(options = {}) {
-  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss', seed = '' } = options;
+  const { productionPrefix = 'jss', seed = '' } = options;
   let ruleCounter = 0;
 
   return (rule, styleSheet) => {
-    const isStatic = !styleSheet.options.link;
+    const isStatic =
+      !styleSheet.options.link && styleSheet.options.name && !styleSheet.options.theme[nested];
+    const prefix = isStatic ? camelCase(safePrefix(styleSheet.options.name)) : null;
+
+    if (isStatic && rule.key === 'root') {
+      return prefix;
+    }
 
-    if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name && isStatic) {
-      return `${safePrefix(styleSheet.options.name)}-${rule.key}`;
+    if (isStatic && pseudoClasses.indexOf(rule.key) !== -1) {
+      return rule.key;
+    }
+
+    if (isStatic) {
+      return `${prefix}--${camelCase(rule.key)}`;
     }
 
     ruleCounter += 1;
@@ -36,11 +74,13 @@ export default function createGenerateClassName(options = {}) {
       return `${productionPrefix}${seed}${ruleCounter}`;
     }
 
+    const suffix = `${rule.key}-${seed}${ruleCounter}`;
+
     // Help with debuggability.
     if (styleSheet.options.classNamePrefix) {
-      return `${safePrefix(styleSheet.options.classNamePrefix)}-${rule.key}-${seed}${ruleCounter}`;
+      return `${safePrefix(styleSheet.options.classNamePrefix)}-${suffix}`;
     }
 
-    return `${rule.key}-${seed}${ruleCounter}`;
+    return suffix;
   };
 }

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

@@ -1,66 +1,115 @@
-import warning from 'warning';
-import hash from '@emotion/hash';
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import createGenerateClassName from './createGenerateClassName';
 
-function safePrefix(classNamePrefix) {
-  const prefix = String(classNamePrefix);
-  warning(prefix.length < 256, `Material-UI: the class name prefix is too long: ${prefix}.`);
-  return prefix;
-}
+describe('createGenerateClassName', () => {
+  const generateClassName = createGenerateClassName();
 
-const themeHashCache = {};
+  it('should generate a class name', () => {
+    assert.strictEqual(
+      generateClassName(
+        {
+          key: 'key',
+        },
+        {
+          options: {
+            theme: {},
+            classNamePrefix: 'classNamePrefix',
+          },
+        },
+      ),
+      'classNamePrefix-key-1',
+    );
+  });
 
-// Returns a function which generates unique class names based on counters.
-// When new generator function is created, rule counter is reset.
-// We need to reset the rule counter for SSR for each request.
-//
-// It's inspired by
-// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
-export default function createGenerateClassName(options = {}) {
-  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss', seed = '' } = options;
-  let ruleCounter = 0;
+  it('should increase the counter only when needed', () => {
+    assert.strictEqual(
+      generateClassName(
+        {
+          key: 'key',
+        },
+        {
+          options: {
+            theme: {},
+            classNamePrefix: 'classNamePrefix',
+          },
+        },
+      ),
+      'classNamePrefix-key-2',
+    );
+    assert.strictEqual(
+      generateClassName(
+        {
+          key: 'key',
+        },
+        {
+          options: {
+            link: true,
+            classNamePrefix: 'classNamePrefix',
+          },
+        },
+      ),
+      'classNamePrefix-key-3',
+    );
+    assert.strictEqual(
+      generateClassName(
+        {
+          key: 'key',
+        },
+        {
+          options: {
+            link: true,
+            classNamePrefix: 'classNamePrefix',
+          },
+        },
+      ),
+      'classNamePrefix-key-4',
+    );
+  });
 
-  return (rule, styleSheet) => {
-    const isStatic = !styleSheet.options.link;
-
-    if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name && isStatic) {
-      return `${safePrefix(styleSheet.options.name)}-${rule.key}`;
-    }
-
-    let suffix;
-
-    // It's a static rule.
-    if (isStatic) {
-      let themeHash = themeHashCache[styleSheet.options.theme];
-      if (!themeHash) {
-        themeHash = hash(JSON.stringify(styleSheet.options.theme));
-        themeHashCache[styleSheet.theme] = themeHash;
-      }
-      const raw = styleSheet.rules.raw[rule.key];
-      suffix = hash(`${themeHash}${rule.key}${JSON.stringify(raw)}`);
-    }
-
-    if (!suffix) {
-      ruleCounter += 1;
-      warning(
-        ruleCounter < 1e10,
-        [
-          'Material-UI: you might have a memory leak.',
-          'The ruleCounter is not supposed to grow that much.',
-        ].join(''),
+  describe('classNamePrefix', () => {
+    it('should work without a classNamePrefix', () => {
+      const generateClassName2 = createGenerateClassName();
+      assert.strictEqual(
+        generateClassName2(
+          { key: 'root' },
+          {
+            options: {},
+          },
+        ),
+        'root-1',
       );
+    });
+  });
 
-      suffix = ruleCounter;
+  describe('production', () => {
+    // Only run the test on node.
+    if (!/jsdom/.test(window.navigator.userAgent)) {
+      return;
     }
 
-    if (process.env.NODE_ENV === 'production') {
-      return `${productionPrefix}${seed}${suffix}`;
-    }
+    let nodeEnv;
+    const env = process.env;
 
-    // Help with debuggability.
-    if (styleSheet.options.classNamePrefix) {
-      return `${safePrefix(styleSheet.options.classNamePrefix)}-${rule.key}-${seed}${suffix}`;
-    }
+    before(() => {
+      nodeEnv = env.NODE_ENV;
+      env.NODE_ENV = 'production';
+      consoleErrorMock.spy();
+    });
+
+    after(() => {
+      env.NODE_ENV = nodeEnv;
+      consoleErrorMock.reset();
+    });
 
-    return `${rule.key}-${seed}${suffix}`;
-  };
-}
+    it('should output a short representation', () => {
+      const rule = { key: 'root' };
+      const styleSheet = {
+        rules: { raw: {} },
+        options: {},
+      };
+      const generateClassName2 = createGenerateClassName();
+      assert.strictEqual(generateClassName2(rule, styleSheet), 'jss1');
+    });
+  });
+});