[docs] Interoperability with react-jss (mui#8735)

docs/src/pages/customization/ReactJss.js

@@ -0,0 +1,62 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import injectSheet from 'react-jss/lib/injectSheet';
+import Typography from 'material-ui/Typography';
+
+// 1. We define the styles.
+const styles = theme => ({
+  root: {
+    color: 'inherit',
+    textDecoration: 'inherit',
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+  },
+  primary: {
+    color: theme.palette.primary[500],
+  },
+});
+
+function MyLink(props) {
+  const { children, classes, className, variant, ...other } = props;
+
+  return (
+    <a
+      className={classNames(
+        classes.root,
+        {
+          [classes.primary]: variant === 'primary',
+        },
+        className,
+      )}
+      {...other}
+    >
+      {children}
+    </a>
+  );
+}
+
+MyLink.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['primary']),
+};
+
+// 2. We inject the styles.
+const MyLinkStyled = injectSheet(styles)(MyLink);
+
+export default function CssInJs() {
+  return (
+    <Typography type="subheading">
+      <MyLinkStyled href="#">MyLink</MyLinkStyled>
+      {' - '}
+      <MyLinkStyled href="#" variant="primary">
+        {'primary'}
+      </MyLinkStyled>
+    </Typography>
+  );
+}

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

@@ -33,9 +33,9 @@ It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/perfor
 It is about 5KB (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 each [plugin](http://cssinjs.org/plugins) is providing. Material-UI is using the [`jss-preset-default`](http://cssinjs.org/jss-preset-default) module. You can always add new plugins if needed with the [`JssProvider` helper](https://github.com/cssinjs/react-jss#custom-setup).
+The best place to start is by looking at the features each [plugin](http://cssinjs.org/plugins) is providing. Material-UI is using the [jss-preset-default](http://cssinjs.org/jss-preset-default) module. You can always add new plugins if needed with the [`JssProvider` helper](https://github.com/cssinjs/react-jss#custom-setup).
 
-Also, 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.
+Also, 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.
 Visit their [readme](https://github.com/alitaheri/jss-rtl#simple-usage) file to learn how.
 
 ## Sheets registry
@@ -71,6 +71,16 @@ They are easy to debug in development and as short as possible in production:
 - development: `.MuiAppBar-root-12`
 - production: `.c12`
 
+## Interoperability
+
+### React JSS
+
+The styling solution of Material-UI shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss).
+We went ahead and forked the project in order to handle our unique needs.
+We are examining how to merge the changes and fixes from Material-UI back to react-jss.
+
+{{demo='pages/customization/ReactJss.js'}}
+
 ## API
 
 ### `withStyles(styles, [options]) => Higher-order Component`

pages/customization/css-in-js.js

@@ -29,6 +29,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/customization/JssRegistry'), 'utf8')
+`,
+        },
+        'pages/customization/ReactJss.js': {
+          js: require('docs/src/pages/customization/ReactJss').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/customization/ReactJss'), 'utf8')
 `,
         },
       }}

src/styles/createGenerateClassName.js

@@ -45,7 +45,12 @@ export default function createGenerateClassName(): generateClassName {
     }
 
     if (sheet && sheet.options.meta) {
-      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
+      let meta = sheet.options.meta;
+      // Sanitize the string as will be used in development to prefix the generated
+      // class name.
+      meta = meta.replace(new RegExp(/[!"#$%&'()*+,./:; <=>?@[\\\]^`{|}~]/g), '-');
+
+      return `${meta}-${rule.key}-${ruleCounter}`;
     }
 
     return `${rule.key}-${ruleCounter}`;

src/styles/themeListener.js

@@ -2,7 +2,8 @@
 
 import PropTypes from 'prop-types';
 
-export const CHANNEL = 'material-ui';
+// Same value used by react-jss
+export const CHANNEL = '__THEMING__';
 
 const themeListener = {
   contextTypes: {

src/styles/themeListener.spec.js

@@ -2,9 +2,7 @@
 
 import { assert } from 'chai';
 import createBroadcast from 'brcast';
-import themeListener from './themeListener';
-
-const CHANNEL = 'material-ui';
+import themeListener, { CHANNEL } from './themeListener';
 
 describe('themeListener', () => {
   it('should be able to get the initial state', () => {

src/styles/withStyles.js

@@ -191,9 +191,6 @@ const withStyles = (
 
         if (process.env.NODE_ENV !== 'production') {
           meta = name || getDisplayName(Component);
-          // Sanitize the string as will be used in development to prefix the generated
-          // class name.
-          meta = meta.replace(new RegExp(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g), '-');
         }
 
         const sheet = this.jss.createStyleSheet(styles, {