[styles] Upgrade JSS to v10-alpha (#14006)

* [styles] Upgrade JSS to v10-alpha

* [core] Fix typescript errors related to jss v10

.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/index.d.ts

@@ -18,17 +18,15 @@ declare module '@material-ui/styles' {
 }
 
 declare module '@material-ui/styles/createGenerateClassName' {
-  import { GenerateClassName } from 'jss';
+  import { GenerateId } from 'jss';
 
   export interface GenerateClassNameOptions {
     dangerouslyUseGlobalCSS?: boolean;
     productionPrefix?: string;
     seed?: string;
   }
 
-  export default function createGenerateClassName(
-    options?: GenerateClassNameOptions,
-  ): GenerateClassName;
+  export default function createGenerateClassName(options?: GenerateClassNameOptions): GenerateId;
 }
 
 declare module '@material-ui/styles/createStyles' {
@@ -66,9 +64,9 @@ declare module '@material-ui/styles/install' {
 }
 
 declare module '@material-ui/styles/jssPreset' {
-  import { JSSOptions } from 'jss';
+  import { JssOptions } from 'jss';
 
-  export default function jssPreset(): JSSOptions;
+  export default function jssPreset(): JssOptions;
 }
 
 declare module '@material-ui/styles/makeStyles' {
@@ -96,7 +94,7 @@ declare module '@material-ui/styles/makeStyles' {
 
   export default function makeStyles<S extends Styles<any, any>>(
     styles: S,
-    options?: WithStylesOptions<ClassKeyOfStyles<S>>,
+    options?: WithStylesOptions,
   ): StylesHook<S>;
 }
 
@@ -128,12 +126,12 @@ declare module '@material-ui/styles/styled' {
 }
 
 declare module '@material-ui/styles/StylesProvider' {
-  import { GenerateClassName, JSS } from 'jss';
+  import { GenerateId, Jss } from 'jss';
 
   interface StylesOptions {
     disableGeneration?: boolean;
-    generateClassName?: GenerateClassName;
-    jss?: JSS;
+    generateClassName?: GenerateId;
+    jss?: Jss;
     // TODO need info @oliviertassinari
     sheetsCache?: {};
     // TODO need info @oliviertassinari
@@ -204,8 +202,7 @@ declare module '@material-ui/styles/withStyles' {
     | StyleRules<Props, ClassKey>
     | StyleRulesCallback<Theme, Props, ClassKey>;
 
-  export interface WithStylesOptions<ClassKey extends string = string>
-    extends JSS.CreateStyleSheetOptions<ClassKey> {
+  export interface WithStylesOptions extends JSS.StyleSheetFactoryOptions {
     flip?: boolean;
     withTheme?: boolean;
     name?: string;
@@ -249,7 +246,7 @@ declare module '@material-ui/styles/withStyles' {
 
   export default function withStyles<
     S extends Styles<any, any>,
-    Options extends WithStylesOptions<ClassKeyOfStyles<S>> = {}
+    Options extends WithStylesOptions = {}
   >(
     style: S,
     options?: Options,

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-styles/test/index.spec.tsx

@@ -55,11 +55,11 @@ function testGetThemeProps(theme: Theme, props: AppBarProps): void {
   makeStyles(styles, {
     flip: true,
     name: 'some-sheet',
-    generateClassName: (_, sheet) => (sheet ? sheet.classes.root : 'no-sheet'),
+    generateId: (_, sheet) => (sheet ? sheet.classes.root : 'no-sheet'),
   });
   makeStyles(styles, {
-    // Property 'toot' does not exist on type 'Record<"root", string>'
-    generateClassName: (_, sheet) => (sheet ? sheet.classes.toot : 'no-sheet'), // $ExpectError
+    // rules are added at runtime so no compile time error
+    generateId: (_, sheet) => (sheet ? sheet.classes.toot : 'no-sheet'),
   });
 
   // optional props

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.d.ts

@@ -5,7 +5,7 @@ import { StyleRules, StylesCreator } from './withStyles';
 
 interface SheetManagerTheme {
   refs: number;
-  sheet: StyleSheet<string>;
+  sheet: StyleSheet;
 }
 
 export interface MuiThemeProviderProps {

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';
@@ -92,7 +92,7 @@ describe('<MuiThemeProvider />', () => {
       const generateClassName = createGenerateClassName();
 
       const markup = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
+        <JssProvider registry={sheetsRegistry} generateId={generateClassName}>
           <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
             <Button>Hello World</Button>
           </MuiThemeProvider>
@@ -108,7 +108,7 @@ describe('<MuiThemeProvider />', () => {
 
       const sheetsRegistry1 = new SheetsRegistry();
       const markup1 = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry1} generateClassName={generateClassName}>
+        <JssProvider registry={sheetsRegistry1} generateId={generateClassName}>
           <MuiThemeProvider theme={theme} sheetsManager={new Map()} sheetsCache={sheetsCache}>
             <Button>Hello World</Button>
           </MuiThemeProvider>
@@ -118,7 +118,7 @@ describe('<MuiThemeProvider />', () => {
 
       const sheetsRegistry2 = new SheetsRegistry();
       const markup2 = ReactDOMServer.renderToString(
-        <JssProvider registry={sheetsRegistry2} generateClassName={generateClassName}>
+        <JssProvider registry={sheetsRegistry2} generateId={generateClassName}>
           <MuiThemeProvider theme={theme} sheetsManager={new Map()} sheetsCache={sheetsCache}>
             <Button>Hello World</Button>
           </MuiThemeProvider>

packages/material-ui/src/styles/createGenerateClassName.d.ts

@@ -1,11 +1,9 @@
-import { GenerateClassName } from 'jss';
+import { GenerateId } from 'jss';
 
 export interface GenerateClassNameOptions {
   dangerouslyUseGlobalCSS?: boolean;
   productionPrefix?: string;
   seed?: string;
 }
 
-export default function createGenerateClassName(
-  options?: GenerateClassNameOptions,
-): GenerateClassName;
+export default function createGenerateClassName(options?: GenerateClassNameOptions): GenerateId;

packages/material-ui/src/styles/jssPreset.d.ts

@@ -1,3 +1,3 @@
-import { JSSOptions } from 'jss';
+import { JssOptions } from 'jss';
 
-export default function jssPreset(): JSSOptions;
+export default function jssPreset(): JssOptions;