Simplification

mui · Apr 25, 2019 · e925dc2 · e925dc2
1 parent f46a24a
commit e925dc2
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 21 deletions.
diff --git a/docs/src/pages/css-in-js/advanced/GlobalClassName.js b/docs/src/pages/css-in-js/advanced/GlobalClassName.js
@@ -6,7 +6,7 @@ const StyledTextField = styled(TextField)`
   label.focused {
     color: green;
   }
-  .MuiOutlinedInput {
+  .MuiOutlinedInput-root {
     fieldset {
       border-color: red;
     }

diff --git a/docs/src/pages/css-in-js/advanced/advanced.md b/docs/src/pages/css-in-js/advanced/advanced.md
@@ -481,7 +481,7 @@ const useStyles = makeStyles({
 generates the following class names you that can override:
 
 ```css
-.MuiButton { /* … */ }
+.MuiButton-root { /* … */ }
 .MuiButton-label { /* … */ }
 .MuiButton-outlined { /* … */ }
 .MuiButton-outlined.disabled { /* … */ }
@@ -502,7 +502,7 @@ const StyledTextField = styled(TextField)`
   label.focused {
     color: green; 💚
   }
-  .MuiOutlinedInput {
+  .MuiOutlinedInput-root {
     fieldset {
       border-color: red; ❤️
     }

diff --git a/docs/src/pages/css-in-js/api/api.md b/docs/src/pages/css-in-js/api/api.md
@@ -10,7 +10,7 @@ A function which returns [a class name generator function](http://cssinjs.org/js
 
 1. `options` (*Object* [optional]):
   - `options.disableGlobal` (*Boolan* [optional]): Defaults to `false`. Disable the generation of deterministic class names.
-  - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production. You can disable the minification in production by providing an empty string.
+  - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production.
   - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators in the same document.
 
 #### Returns

diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js
@@ -16,7 +16,7 @@ const CssTextField = withStyles({
     '& .MuiInput-underline:after': {
       borderBottomColor: 'green',
     },
-    '& .MuiOutlinedInput': {
+    '& .MuiOutlinedInput-root': {
       '& fieldset': {
         borderColor: 'red',
       },

diff --git a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js
@@ -29,7 +29,7 @@ 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}`;
+  const seedPrefix = seed === '' ? '' : `${seed}-`;
   let ruleCounter = 0;
 
   return (rule, styleSheet) => {
@@ -51,7 +51,7 @@ export default function createGenerateClassName(options = {}) {
         return rule.key;
       }
 
-      const prefix = `${name}${rule.key === 'root' ? '' : `-${rule.key}`}${classNameSeed}`;
+      const prefix = `${seedPrefix}${name}-${rule.key}`;
 
       if (!styleSheet.options.theme[nested] || seed !== '') {
         return prefix;
@@ -60,17 +60,17 @@ export default function createGenerateClassName(options = {}) {
       return `${prefix}-${ruleCounter}`;
     }
 
-    if (process.env.NODE_ENV === 'production' && productionPrefix !== '') {
-      return `${productionPrefix}${classNameSeed}${ruleCounter}`;
+    if (process.env.NODE_ENV === 'production') {
+      return `${seedPrefix}${productionPrefix}${ruleCounter}`;
     }
 
-    const suffix = `${rule.key}${classNameSeed}-${ruleCounter}`;
+    const suffix = `${rule.key}-${ruleCounter}`;
 
     // Help with debuggability.
     if (styleSheet.options.classNamePrefix) {
-      return `${styleSheet.options.classNamePrefix}-${suffix}`;
+      return `${seedPrefix}${styleSheet.options.classNamePrefix}-${suffix}`;
     }
 
-    return suffix;
+    return `${seedPrefix}${suffix}`;
   };
 }
diff --git a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js
@@ -77,7 +77,7 @@ describe('createGenerateClassName', () => {
           },
         },
       ),
-      'MuiButton',
+      'MuiButton-root',
     );
     assert.strictEqual(
       generateClassName(
@@ -91,7 +91,7 @@ describe('createGenerateClassName', () => {
           },
         },
       ),
-      'MuiButton-2',
+      'MuiButton-root-2',
     );
   });
 
@@ -128,9 +128,9 @@ describe('createGenerateClassName', () => {
       );
     });
 
-    it('should disable the minification', () => {
+    it('should use the seed', () => {
       const generateClassName = createGenerateClassName({
-        productionPrefix: '',
+        seed: 'dark',
       });
       assert.strictEqual(
         generateClassName(
@@ -139,7 +139,7 @@ describe('createGenerateClassName', () => {
             options: {},
           },
         ),
-        'root-1',
+        'dark-jss1',
       );
     });
   });

diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
@@ -238,10 +238,10 @@ describe('makeStyles', () => {
         </ThemeProvider>,
       );
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
       wrapper.setProps({ theme: createMuiTheme({ foo: 'bar' }) });
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
     });
 
     it('should support the overrides key', () => {

diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js
@@ -190,10 +190,10 @@ describe('withStyles', () => {
         </ThemeProvider>,
       );
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
       wrapper.setProps({ theme: createMuiTheme({ foo: 'bar' }) });
       assert.strictEqual(sheetsRegistry.registry.length, 1);
-      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' });
+      assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField-root' });
     });
 
     it('should support the overrides key', () => {