(split)React-JSS id prop docs and improvements (cssinjs#1147)

* keep only specific to the old HOC parts in the legacy doc

* update all TOCs

* section about class name generator

* flatten sheetOptions, generate new generateId once id options changed

Author: kof

.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/react-jss.js": {
-    "bundled": 168182,
-    "minified": 58162,
-    "gzipped": 18963
+    "bundled": 168271,
+    "minified": 58142,
+    "gzipped": 18993
   },
   "dist/react-jss.min.js": {
-    "bundled": 111457,
-    "minified": 41516,
-    "gzipped": 14027
+    "bundled": 111603,
+    "minified": 41537,
+    "gzipped": 14077
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 26174,
-    "minified": 11471,
-    "gzipped": 3751
+    "bundled": 26210,
+    "minified": 11429,
+    "gzipped": 3784
   },
   "dist/react-jss.esm.js": {
-    "bundled": 25212,
-    "minified": 10636,
-    "gzipped": 3624,
+    "bundled": 25248,
+    "minified": 10594,
+    "gzipped": 3662,
     "treeshaked": {
       "rollup": {
-        "code": 1946,
+        "code": 1841,
         "import_statements": 538
       },
       "webpack": {
-        "code": 3544
+        "code": 3439
       }
     }
   }

src/JssContext.js

@@ -3,7 +3,7 @@ import React, {type Context} from 'react'
 import type {Context as JssContextValue} from './types'
 
 const JssContext: Context<JssContextValue> = React.createContext({
-  sheetOptions: {classNamePrefix: ''},
+  classNamePrefix: '',
   disableStylesGeneration: false
 })
 

src/JssProvider.js

@@ -1,4 +1,6 @@
 // @flow
+/* eslint-disable react/require-default-props, react/no-unused-prop-types */
+
 import React, {Component, type Node} from 'react'
 import PropTypes from 'prop-types'
 import {shallowEqualObjects} from 'shallow-equal'
@@ -12,19 +14,19 @@ import defaultJss, {
 import type {Context, Managers} from './types'
 import JssContext from './JssContext'
 
-/* eslint-disable react/require-default-props, react/no-unused-prop-types */
-
 type Props = {|
   jss?: Jss,
   registry?: SheetsRegistry,
   generateId?: GenerateId,
   classNamePrefix?: string,
   disableStylesGeneration?: boolean,
   media?: string,
-  children: Node,
-  id: CreateGenerateIdOptions
+  id?: CreateGenerateIdOptions,
+  children: Node
 |}
 
+const initialContext: Object = {}
+
 export default class JssProvider extends Component<Props> {
   static propTypes = {
     registry: PropTypes.instanceOf(SheetsRegistry),
@@ -37,15 +39,20 @@ export default class JssProvider extends Component<Props> {
     id: PropTypes.shape({minify: PropTypes.bool})
   }
 
-  static defaultProps = {id: {minify: false}}
-
   managers: Managers = {}
 
-  createContext = (outerContext: Context) => {
-    const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media} = this.props
+  createContext = (parentContext: Context, prevContext?: Context = initialContext) => {
+    const {
+      registry,
+      classNamePrefix,
+      jss,
+      generateId,
+      disableStylesGeneration,
+      media,
+      id
+    } = this.props
 
-    // Clone the outer context
-    const context = {...outerContext}
+    const context = {...parentContext}
 
     if (registry) {
       context.registry = registry
@@ -61,22 +68,24 @@ export default class JssProvider extends Component<Props> {
 
     context.managers = this.managers
 
-    if (generateId) {
-      context.sheetOptions.generateId = generateId
-    } else if (!context.sheetOptions.generateId) {
-      if (!this.generateId) {
-        this.generateId = createGenerateId(this.props.id)
-      }
-      context.sheetOptions.generateId = this.generateId
+    if (id !== undefined) {
+      context.id = id
+    }
+
+    if (generateId !== undefined) {
+      context.generateId = generateId
+    }
+
+    if (!context.generateId || !prevContext || context.id !== prevContext.id) {
+      context.generateId = createGenerateId(context.id)
     }
 
-    // Merge the classname prefix
     if (classNamePrefix) {
-      context.sheetOptions.classNamePrefix += classNamePrefix
+      context.classNamePrefix += classNamePrefix
     }
 
     if (media !== undefined) {
-      context.sheetOptions.media = media
+      context.media = media
     }
 
     if (jss) {
@@ -87,12 +96,10 @@ export default class JssProvider extends Component<Props> {
       context.disableStylesGeneration = disableStylesGeneration
     }
 
-    if (this.prevContext && shallowEqualObjects(this.prevContext, context)) {
-      return this.prevContext
+    if (prevContext && shallowEqualObjects(prevContext, context)) {
+      return prevContext
     }
 
-    this.prevContext = context
-
     return context
   }
 
@@ -102,10 +109,10 @@ export default class JssProvider extends Component<Props> {
 
   registry: ?SheetsRegistry
 
-  renderProvider = (outerContext: Context) => {
+  renderProvider = (parentContext: Context) => {
     const {children} = this.props
-    const context: Context = this.createContext(outerContext)
-
+    const context: Context = this.createContext(parentContext, this.prevContext)
+    this.prevContext = context
     return <JssContext.Provider value={context}>{children}</JssContext.Provider>
   }
 

src/JssProvider.test.js

@@ -191,6 +191,48 @@ describe('React-JSS: JssProvider', () => {
         `)
       })
     })
+
+    describe('id prop', () => {
+      it('should forward from context', () => {
+        const MyComponent = withStyles({a: {color: 'red'}})()
+
+        TestRenderer.create(
+          <JssProvider registry={registry} id={{minify: true}}>
+            <JssProvider>
+              <MyComponent />
+            </JssProvider>
+          </JssProvider>
+        )
+        expect(registry.toString().substr(0, 2)).to.be('.c')
+      })
+
+      it('should overwrite over child props to `true`', () => {
+        const MyComponent = withStyles({a: {color: 'red'}})()
+
+        TestRenderer.create(
+          <JssProvider registry={registry} id={{minify: false}}>
+            <JssProvider id={{minify: true}}>
+              <MyComponent />
+            </JssProvider>
+          </JssProvider>
+        )
+        expect(registry.toString().substr(0, 2)).to.be('.c')
+      })
+
+      it('should overwrite over child props to `false`', () => {
+        const MyComponent = withStyles({a: {color: 'red'}})()
+
+        TestRenderer.create(
+          <JssProvider registry={registry} id={{minify: true}}>
+            <JssProvider id={{minify: false}}>
+              <MyComponent />
+            </JssProvider>
+          </JssProvider>
+        )
+
+        expect(registry.toString().substr(0, 2)).to.be('.N')
+      })
+    })
   })
 
   describe('JssProvider in a stateful component', () => {

src/types.js

@@ -1,15 +1,18 @@
 // @flow
-import type {StyleSheetFactoryOptions, Jss, SheetsRegistry, SheetsManager, BaseRule} from 'jss'
+import type {
+  StyleSheetFactoryOptions,
+  Jss,
+  SheetsRegistry,
+  SheetsManager,
+  BaseRule,
+  CreateGenerateIdOptions,
+  GenerateId
+} from 'jss'
 import type {Node} from 'react'
 import type {Theming} from 'theming'
 
 export type Managers = {[key: number]: SheetsManager}
 
-type StyleSheetOptions = {
-  ...StyleSheetFactoryOptions,
-  classNamePrefix: string
-}
-
 export type HookOptions<Theme> = StyleSheetFactoryOptions & {
   index?: number,
   name?: string,
@@ -26,8 +29,11 @@ export type Context = {|
   jss?: Jss,
   registry?: SheetsRegistry,
   managers?: Managers,
-  sheetOptions: StyleSheetOptions,
-  disableStylesGeneration: boolean
+  id?: CreateGenerateIdOptions,
+  classNamePrefix?: string,
+  disableStylesGeneration?: boolean,
+  media?: string,
+  generateId?: GenerateId
 |}
 
 export type HOCProps<Theme, Props> = Props & {

src/utils/sheets.js

@@ -32,22 +32,27 @@ const getStyles = <Theme>(options: Options<Theme>) => {
 }
 
 function getSheetOptions<Theme>(options: Options<Theme>, link: boolean) {
-  const classNamePrefix =
-    process.env.NODE_ENV === 'production' || !options.name
-      ? ''
-      : `${options.name.replace(/\s/g, '-')}-`
+  let minify
+  if (options.context.id && options.context.id.minify != null) {
+    minify = options.context.id.minify
+  }
+
+  let classNamePrefix = options.context.classNamePrefix || ''
+  if (options.name && !minify) {
+    classNamePrefix += `${options.name.replace(/\s/g, '-')}-`
+  }
 
   let meta = ''
   if (options.name) meta = `${options.name}, `
   meta += typeof options.styles === 'function' ? 'Themed' : 'Unthemed'
 
   return {
     ...options.sheetOptions,
-    ...options.context.sheetOptions,
     index: options.index,
     meta,
-    classNamePrefix: options.context.sheetOptions.classNamePrefix + classNamePrefix,
-    link
+    classNamePrefix,
+    link,
+    generateId: options.context.generateId
   }
 }