[styles] Upgrade JSS to v10-alpha

.size-limit.js

@@ -16,19 +16,19 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.7 KB',
+    limit: '18.6 KB',
   },
   {
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.5 KB',
+    limit: '95.6 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
     webpack: true,
     path: 'packages/material-ui-styles/build/index.js',
-    limit: '15.3 KB',
+    limit: '15.9 KB',
   },
   {
     name: 'The size of the @material-ui/system modules',
@@ -55,7 +55,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '178 KB',
+    limit: '181 KB',
   },
   {
     name: 'The docs home page',

docs/src/pages/css-in-js/advanced/StringTemplates.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { jssPreset, StylesProvider, makeStyles } from '@material-ui/styles';
 import { create } from 'jss';
-import jssTemplate from 'jss-template';
+import jssTemplate from 'jss-plugin-template';
 import Button from '@material-ui/core/Button';
 
 const jss = create({

docs/src/pages/css-in-js/advanced/advanced.md

@@ -86,7 +86,7 @@ export default App;
 
 ## String templates
 
-If you prefer using the CSS syntax, you can use the [jss-template](https://cssinjs.org/jss-template) plugin.
+If you prefer using the CSS syntax, you can use the [jss-plugin-template](https://cssinjs.org/jss-plugin-template) plugin.
 
 ```jsx
 const useStyles = makeStyles({

docs/src/pages/customization/css-in-js/JssRegistry.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import JssProvider from 'react-jss/lib/JssProvider';
+import { JssProvider } from 'react-jss';
 import { SheetsRegistry } from 'jss';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import CssInJs from './CssInJs';

package.json

@@ -117,6 +117,7 @@
     "isomorphic-fetch": "^2.2.1",
     "jsdom": "^13.0.0",
     "jsonlint": "^1.6.3",
+    "jss-plugin-template": "^10.0.0-alpha.3",
     "jss-rtl": "^0.2.1",
     "karma": "3.0.0",
     "karma-browserstack-launcher": "^1.3.0",
@@ -146,7 +147,7 @@
     "react-final-form": "^4.0.2",
     "react-frame-component": "^4.0.2",
     "react-inspector": "^2.2.2",
-    "react-jss": "^8.1.0",
+    "react-jss": "^10.0.0-alpha.3",
     "react-number-format": "^4.0.0",
     "react-redux": "^6.0.0",
     "react-router": "^4.2.0",
@@ -182,7 +183,8 @@
     "workbox-build": "^3.6.3"
   },
   "resolutions": {
-    "**/hoist-non-react-statics": "^3.2.1"
+    "**/hoist-non-react-statics": "^3.2.1",
+    "jss": "^10.0.0-alpha.3"
   },
   "sideEffects": false,
   "nyc": {

packages/material-ui-benchmark/README.md

@@ -24,14 +24,14 @@ Markdown x 924 ops/sec ±3.05% (184 runs sampled)
 yarn styles
 
 JSSButton x 13,573 ops/sec ±5.01% (78 runs sampled)
-Box x 2,489 ops/sec ±7.37% (71 runs sampled)
+Box x 3,043 ops/sec ±4.14% (179 runs sampled)
 JSS naked x 21,021 ops/sec ±7.27% (72 runs sampled)
-WithStylesButton x 7,384 ops/sec ±4.94% (74 runs sampled)
-HookButton x 10,386 ops/sec ±4.03% (84 runs sampled)
-StyledComponentsButton x 7,194 ops/sec ±3.34% (82 runs sampled)
-EmotionButton x 7,409 ops/sec ±5.19% (73 runs sampled)
-Naked x 42,211 ops/sec ±4.63% (79 runs sampled)
-hashing x 216,173 ops/sec ±2.18% (86 runs sampled)
+WithStylesButton x 8,442 ops/sec ±3.31% (176 runs sampled)
+HookButton x 11,265 ops/sec ±3.43% (178 runs sampled)
+StyledComponentsButton x 6,745 ops/sec ±2.91% (181 runs sampled)
+EmotionButton x 6,856 ops/sec ±5.06% (165 runs sampled)
+Naked x 32,683 ops/sec ±3.54% (172 runs sampled)
+hashing x 221,423 ops/sec ±1.22% (190 runs sampled)
 ```
 
 ## `@material-ui/system`

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

@@ -280,13 +280,13 @@ suite
   .add('Naked', () => {
     const Raw = props => <button type="submit" {...props} />;
     ReactDOMServer.renderToString(
-      <JssProvider>
+      <StylesProvider>
         <React.Fragment>
           {Array.from(new Array(5)).map((_, index) => (
             <Raw key={String(index)}>Material-UI</Raw>
           ))}
         </React.Fragment>
-      </JssProvider>,
+      </StylesProvider>,
     );
   })
   .add('hashing', () => {

packages/material-ui-styles/package.json

@@ -40,13 +40,14 @@
     "@material-ui/utils": "^3.0.0-alpha.1",
     "classnames": "^2.2.5",
     "deepmerge": "^3.0.0",
-    "jss": "^9.3.3",
-    "jss-camel-case": "^6.0.0",
-    "jss-default-unit": "^8.0.2",
-    "jss-global": "^3.0.0",
-    "jss-nested": "^6.0.1",
-    "jss-props-sort": "^6.0.0",
-    "jss-vendor-prefixer": "^7.0.0",
+    "jss": "^10.0.0-alpha.3",
+    "jss-plugin-camel-case": "^10.0.0-alpha.3",
+    "jss-plugin-default-unit": "^10.0.0-alpha.3",
+    "jss-plugin-global": "^10.0.0-alpha.3",
+    "jss-plugin-nested": "^10.0.0-alpha.3",
+    "jss-plugin-props-sort": "^10.0.0-alpha.3",
+    "jss-plugin-rule-value-function": "^10.0.0-alpha.3",
+    "jss-plugin-vendor-prefixer": "^10.0.0-alpha.3",
     "prop-types": "^15.6.0",
     "warning": "^4.0.1"
   },

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

@@ -1,23 +1,25 @@
-import jssGlobal from 'jss-global';
-import jssNested from 'jss-nested';
-import jssCamelCase from 'jss-camel-case';
-import jssDefaultUnit from 'jss-default-unit';
-import jssVendorPrefixer from 'jss-vendor-prefixer';
-import jssPropsSort from 'jss-props-sort';
+import functions from 'jss-plugin-rule-value-function';
+import global from 'jss-plugin-global/dist/jss-plugin-global.cjs';
+import nested from 'jss-plugin-nested/dist/jss-plugin-nested.cjs';
+import camelCase from 'jss-plugin-camel-case';
+import defaultUnit from 'jss-plugin-default-unit';
+import vendorPrefixer from 'jss-plugin-vendor-prefixer';
+import propsSort from 'jss-plugin-props-sort';
 
 // Subset of jss-preset-default with only the plugins the Material-UI components are using.
 function jssPreset() {
   return {
     plugins: [
-      jssGlobal(),
-      jssNested(),
-      jssCamelCase(),
-      jssDefaultUnit(),
+      functions(),
+      global(),
+      nested(),
+      camelCase(),
+      defaultUnit(),
       // Disable the vendor prefixer server-side, it does nothing.
       // This way, we can get a performance boost.
       // In the documentation, we are using `autoprefixer` to solve this problem.
-      typeof window === 'undefined' ? null : jssVendorPrefixer(),
-      jssPropsSort(),
+      typeof window === 'undefined' ? null : vendorPrefixer(),
+      propsSort(),
     ],
   };
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import getDynamicStyles from 'jss/lib/utils/getDynamicStyles';
+import { getDynamicStyles } from 'jss';
 import { getDisplayName } from '@material-ui/utils';
 import { increment } from './indexCounter';
 import mergeClasses from './mergeClasses';
@@ -76,6 +76,7 @@ export function attach({ state, props, theme, stylesOptions, stylesCreator, name
     ...stylesOptions,
     flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl',
   };
+  options.generateId = options.generateClassName;
 
   const sheetsRegistry = stylesOptions.sheetsRegistry;
 

packages/material-ui/src/ButtonBase/TouchRipple.js

@@ -37,6 +37,7 @@ export const styles = theme => ({
     opacity: 0.3,
     transform: 'scale(1)',
     animation: `mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
+    animationName: '$mui-ripple-enter',
   },
   /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
   ripplePulsate: {
@@ -55,13 +56,15 @@ export const styles = theme => ({
   childLeaving: {
     opacity: 0,
     animation: `mui-ripple-exit ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
+    animationName: '$mui-ripple-exit',
   },
   /* Styles applied to the internal `Ripple` components `childPulsate` class. */
   childPulsate: {
     position: 'absolute',
     left: 0,
     top: 0,
     animation: `mui-ripple-pulsate 2500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
+    animationName: '$mui-ripple-pulsate',
   },
   '@keyframes mui-ripple-enter': {
     '0%': {

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

@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
-import JssProvider from 'react-jss/lib/JssProvider';
+import { JssProvider } from 'react-jss';
 import ReactDOMServer from 'react-dom/server';
 import { createMount } from '@material-ui/core/test-utils';
 import createMuiTheme from './createMuiTheme';
@@ -74,17 +74,17 @@ describe('<MuiThemeProvider />', () => {
       assert.notStrictEqual(markup.match('Hello World'), null);
       assert.strictEqual(sheetsRegistry.registry.length, 2);
       assert.strictEqual(sheetsRegistry.toString().length > 4000, true);
-      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiButtonBase-root-27');
+      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiButtonBaseroot-0-1-27');
       assert.deepEqual(
         sheetsRegistry.registry[0].classes,
         {
-          disabled: 'MuiButtonBase-disabled-28',
-          focusVisible: 'MuiButtonBase-focusVisible-29',
-          root: 'MuiButtonBase-root-27',
+          disabled: 'MuiButtonBasedisabled-0-1-28',
+          focusVisible: 'MuiButtonBasefocusVisible-0-1-29',
+          root: 'MuiButtonBaseroot-0-1-27',
         },
         'the class names should be deterministic',
       );
-      assert.strictEqual(sheetsRegistry.registry[1].classes.root, 'MuiButton-root-1');
+      assert.strictEqual(sheetsRegistry.registry[1].classes.root, 'MuiButtonroot-0-1-1');
     }
 
     it('should be able to extract the styles', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { spy } from 'sinon';
 import { assert } from 'chai';
-import JssProvider from 'react-jss/lib/JssProvider';
+import { JssProvider } from 'react-jss';
 import { create, SheetsRegistry } from 'jss';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import jssPreset from './jssPreset';