[core] Update jss plugins dependencies (#9732)

* remove jss-preset-default dependency and add used jss plugins * [examples] use preset from material-ui instead of jss-preset-default * fix markdown link * Remove some import of jss in the documentation * Make jssPreset public
mui · Jan 5, 2018 · 3fe31d8 · 3fe31d8
1 parent 573b657
commit 3fe31d8
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 56 deletions.
diff --git a/docs/src/pages/customization/css-in-js.md b/docs/src/pages/customization/css-in-js.md
@@ -26,7 +26,8 @@ It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/perfor
 It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
 
 If you end up using this styling solution in your codebase, you're going to need to *learn the API*.
-The best place to start is by looking at the features that each [plugin](http://cssinjs.org/plugins) provides. Material-UI uses the [jss-preset-default](http://cssinjs.org/jss-preset-default) module. You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
+The best place to start is by looking at the features that each [plugin](http://cssinjs.org/plugins) provides. Material-UI uses [few of them](#plugins).
+You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper.
 
 If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin.
 Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how.
@@ -101,17 +102,16 @@ By adjusting the placement of the `insertionPoint` comment within your HTML body
 ```jsx
 import JssProvider from 'react-jss/lib/JssProvider';
 import { create } from 'jss';
-import preset from 'jss-preset-default';
-import { createGenerateClassName } from 'material-ui/styles';
+import { createGenerateClassName, jssPreset } from 'material-ui/styles';
 
-const generateClassName = createGenerateClassName();
-const jss = create(preset());
+const jss = create(jssPreset());
 // We define a custom insertion point JSS will look for injecting the styles in the DOM.
 jss.options.insertionPoint = 'insertion-point-jss';
+jss.options.createGenerateClassName = createGenerateClassName;
 
 function App() {
   return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
+    <JssProvider jss={jss}>
       ...
     </JssProvider>
   );
@@ -132,11 +132,10 @@ Here is an example:
 ```jsx
 import JssProvider from 'react-jss/lib/JssProvider';
 import { create } from 'jss';
-import preset from 'jss-preset-default';
-import { createGenerateClassName } from 'material-ui/styles';
+import { createGenerateClassName, jssPreset } from 'material-ui/styles';
 
 const generateClassName = createGenerateClassName();
-const jss = create(preset());
+const jss = create(jssPreset());
 
 function App() {
   return (
@@ -253,19 +252,16 @@ A function which returns a class name generator function.
 
 ```jsx
 import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import preset from 'jss-preset-default';
 import { createGenerateClassName } from 'material-ui/styles';
 
 const generateClassName = createGenerateClassName({
   dangerouslyUseGlobalCSS: true,
   productionPrefix: 'c',
 });
-const jss = create(preset());
 
 function App() {
   return (
-    <JssProvider jss={jss} generateClassName={generateClassName}>
+    <JssProvider generateClassName={generateClassName}>
       ...
     </JssProvider>
   );

diff --git a/docs/src/pages/guides/right-to-left.md b/docs/src/pages/guides/right-to-left.md
@@ -27,13 +27,12 @@ Once you have created a new JSS instance with the plugin, you need to make it av
 
 ```jsx
 import { create } from 'jss';
-import preset from 'jss-preset-default';
 import rtl from 'jss-rtl';
 import JssProvider from 'react-jss/lib/JssProvider';
-import { createGenerateClassName } from 'material-ui/styles';
+import { createGenerateClassName, jssPreset } from 'material-ui/styles';
 
 // Configure JSS
-const jss = create({ plugins: [...preset().plugins, rtl()] });
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
 // Custom Material-UI class name generator.
 const generateClassName = createGenerateClassName();

diff --git a/docs/src/pages/guides/server-rendering.md b/docs/src/pages/guides/server-rendering.md
@@ -68,9 +68,6 @@ We then get the CSS from our `sheetsRegistry` using `sheetsRegistry.toString()`.
 import { renderToString } from 'react-dom/server'
 import { SheetsRegistry } from 'react-jss/lib/jss';
 import JssProvider from 'react-jss/lib/JssProvider';
-import { create } from 'jss';
-import preset from 'jss-preset-default';
-// import rtl from 'jss-rtl'; // in-case you're supporting rtl
 import { MuiThemeProvider, createMuiTheme, createGenerateClassName } from 'material-ui/styles';
 import { green, red } from 'material-ui/colors';
 
@@ -87,14 +84,11 @@ function handleRender(req, res) {
     },
   });
 
-  // Configure JSS
-  const jss = create(preset());
-  // const jss = create({ plugins: [...preset().plugins, rtl()] }); // in-case you're supporting rtl
   const generateClassName = createGenerateClassName();
 
   // Render the component to a string.
   const html = renderToString(
-    <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}>
+    <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
       <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
         <App />
       </MuiThemeProvider>

diff --git a/package.json b/package.json
@@ -69,7 +69,12 @@
     "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^2.3.1",
     "jss": "^9.3.3",
-    "jss-preset-default": "^4.0.1",
+    "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",
     "keycode": "^2.1.9",
     "lodash": "^4.2.0",
     "normalize-scroll-left": "^0.1.2",
@@ -86,8 +91,8 @@
   "devDependencies": {
     "@rosskevin/react-docgen": "^3.0.0-beta9",
     "@types/enzyme": "^3.1.4",
-    "@types/react": "16.0.31",
     "@types/jss": "^9.3.0",
+    "@types/react": "16.0.31",
     "app-module-path": "^2.2.0",
     "argos-cli": "^0.0.9",
     "autosuggest-highlight": "^3.1.1",

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -105,7 +105,7 @@ export { default as Reboot } from './Reboot';
 export { default as Select } from './Select';
 export { default as Snackbar, SnackbarContent } from './Snackbar';
 export { default as Stepper, Step, StepButton, StepContent, StepLabel } from './Stepper';
-export { MuiThemeProvider, withStyles, WithStyles, withTheme, createMuiTheme } from './styles';
+export { MuiThemeProvider, withStyles, WithStyles, withTheme, createMuiTheme, jssPreset } from './styles';
 
 import * as colors from './colors';
 

diff --git a/src/index.js b/src/index.js
@@ -52,7 +52,7 @@ export { default as Reboot } from './Reboot';
 export { default as Select } from './Select';
 export { default as Snackbar, SnackbarContent } from './Snackbar';
 export { default as Stepper, Step, StepButton, StepContent, StepLabel } from './Stepper';
-export { MuiThemeProvider, withStyles, withTheme, createMuiTheme } from './styles';
+export { MuiThemeProvider, withStyles, withTheme, createMuiTheme, jssPreset } from './styles';
 
 // eslint-disable-next-line import/first
 import * as colors from './colors';

diff --git a/src/styles/MuiThemeProvider.spec.js b/src/styles/MuiThemeProvider.spec.js
@@ -4,12 +4,11 @@ import { spy } from 'sinon';
 import { assert } from 'chai';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { create, SheetsRegistry } from 'jss';
+import { SheetsRegistry } from 'jss';
 import JssProvider from 'react-jss/lib/JssProvider';
 import { renderToString } from 'react-dom/server';
 import { createMount } from '../test-utils';
 import createMuiTheme from './createMuiTheme';
-import { preset } from './withStyles';
 import Button from '../Button';
 import createGenerateClassName from './createGenerateClassName';
 import withTheme from './withTheme';
@@ -74,11 +73,10 @@ describe('<MuiThemeProvider />', () => {
     it('should be able to extract the styles', () => {
       const theme = createMuiTheme();
       const sheetsRegistry = new SheetsRegistry();
-      const jss = create(preset());
-      jss.options.createGenerateClassName = createGenerateClassName;
+      const generateClassName = createGenerateClassName();
 
       const markup = renderToString(
-        <JssProvider registry={sheetsRegistry} jss={jss}>
+        <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
           <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
             <Button>Hello World</Button>
           </MuiThemeProvider>

diff --git a/src/styles/index.d.ts b/src/styles/index.d.ts
@@ -1,3 +1,6 @@
+export { default as createGenerateClassName } from './createGenerateClassName';
+export { default as createMuiTheme, Theme, Direction } from './createMuiTheme';
+export { default as jssPreset } from './jssPreset';
 export { default as MuiThemeProvider } from './MuiThemeProvider';
 export {
   default as withStyles,
@@ -7,5 +10,3 @@ export {
   StyledComponentProps,
 } from './withStyles';
 export { default as withTheme } from './withTheme';
-export { default as createMuiTheme, Theme, Direction } from './createMuiTheme';
-export { default as createGenerateClassName } from './createGenerateClassName';
diff --git a/src/styles/index.js b/src/styles/index.js
@@ -1,5 +1,6 @@
+export { default as createGenerateClassName } from './createGenerateClassName';
+export { default as createMuiTheme } from './createMuiTheme';
+export { default as jssPreset } from './jssPreset';
 export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
-export { default as createMuiTheme } from './createMuiTheme';
-export { default as createGenerateClassName } from './createGenerateClassName';
diff --git a/src/styles/jssPreset.d.ts b/src/styles/jssPreset.d.ts
@@ -0,0 +1 @@
+export default function jssPreset(): object;
diff --git a/src/styles/jssPreset.js b/src/styles/jssPreset.js
@@ -0,0 +1,23 @@
+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';
+
+// Subset of jss-preset-default with only the plugins the Material-UI
+// components are using.
+function jssPreset() {
+  return {
+    plugins: [
+      jssGlobal(),
+      jssNested(),
+      jssCamelCase(),
+      jssDefaultUnit(),
+      jssVendorPrefixer(),
+      jssPropsSort(),
+    ],
+  };
+}
+
+export default jssPreset;
diff --git a/src/styles/withStyles.js b/src/styles/withStyles.js
@@ -5,31 +5,15 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import getDisplayName from 'recompose/getDisplayName';
 import contextTypes from 'react-jss/lib/contextTypes';
 import { create } from 'jss';
-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 * as ns from 'react-jss/lib/ns';
+import jssPreset from './jssPreset';
 import createMuiTheme from './createMuiTheme';
 import themeListener from './themeListener';
 import createGenerateClassName from './createGenerateClassName';
 import getStylesCreator from './getStylesCreator';
 
-export const preset = () => ({
-  plugins: [
-    jssGlobal(),
-    jssNested(),
-    jssCamelCase(),
-    jssDefaultUnit(),
-    jssVendorPrefixer(),
-    jssPropsSort(),
-  ],
-});
-
 // New JSS instance.
-const jss = create(preset());
+const jss = create(jssPreset());
 
 // Use a singleton or the provided one by the context.
 const generateClassName = createGenerateClassName();

diff --git a/src/styles/withStyles.spec.js b/src/styles/withStyles.spec.js
@@ -5,7 +5,8 @@ import { spy } from 'sinon';
 import { assert } from 'chai';
 import JssProvider from 'react-jss/lib/JssProvider';
 import { create, SheetsRegistry } from 'jss';
-import withStyles, { preset } from './withStyles';
+import jssPreset from './jssPreset';
+import withStyles from './withStyles';
 import MuiThemeProvider from './MuiThemeProvider';
 import createMuiTheme from './createMuiTheme';
 import createGenerateClassName from './createGenerateClassName';
@@ -114,7 +115,7 @@ describe('withStyles', () => {
     let generateClassName;
 
     beforeEach(() => {
-      jss = create(preset());
+      jss = create(jssPreset());
       generateClassName = createGenerateClassName();
       sheetsRegistry = new SheetsRegistry();
     });

diff --git a/yarn.lock b/yarn.lock
@@ -5419,6 +5419,10 @@ jss-default-unit@^8.0.0:
   dependencies:
     is-observable "^0.2.0"
 
+jss-default-unit@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
+
 jss-expand@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.0.0.tgz#8eadb782f29ec5f1d285451dd38052d5ac51644a"