Batch rendering mode

[kof]

As IE9 has a limit of 31 style sheets per document (style and link and @imports alltogether), we might want to implement an optional rendering strategy.

See Khan/aphrodite#45

An API that would be possible, inspired by apphrodite.

1. Only one style sheet for all components.
2. Styles are generated when .use is called.

import {create} from 'jss'

// Tell jss to render in batch mode.
const jss = create({batch: true})

const sheet = jss.createStyleSheet({
  button1: {
    color: 'red'
  },
  button2: {
    color: 'red'
  }
})
<div className={sheet.use('button1',  'button2')}></div>

[kof]

Following assumptions need to be validated:

• when we add a text node to an existing style sheet, does browser renders just added rules or there is an overhead of reparsing entire style sheet and recreation of the rules
• when we use IE rendering using cssText, how much of overhead is it, the entire sheet needs to be def. reparsed
• what is more efficient for IE .cssText or addRule api?
• I have the feeling there is no guarantee that a style sheet is parsed by browser before react renders the dom node. If this is not guaranteed, there is a chance of repaint at the moment we insert styles when node is already rendered. This is can happen when batching lots of rules into one insert by using libs like asap.

[kof]

Another possibility is a separate batch-renderer project + lazy option.

Batch renderer will ensure all rules a rendered in one sheet, "lazy" option will ensure that rules are not parsed until they are used.

[kof]

When rendering only styles which are in use, the order of rules needs to be preserved by comparing the resulting rules with the original order.

[kof]

Closing this because we never got any request to support IE9.