Support full syntax in function rules and values

[kof]

Currently the only plugin that we run over function values/rules is jss-default-unit. The problem with running every plugin over it is that we would add performance overhead to something that is supposed to be usable for animations.

Originates in https://github.com/cssinjs/react-jss/issues/185

Cases:

• fallbacks in fn rules
• media queries inside of function rules
• media query as a fn rule nested
• function values inside of media rules
• jss-nested inside of fn rules
• jss-nested as a fn rule
• jss-global should support function values and rules
• jss-compose should support linking function rules
• jss-compose should support linking rules with fn values
• jss.use(pluginObservable({process: false})), test for disabling plugins

[kof]

I got an idea what we can do here: due to the fact that other cssinjs libs have also functions and they don't expect those to be updatable at 60 FPS we can do this:

1. We assume that mainstream use case doesn't need to update at 60FPS
2. We allow all required plugins to react on the values/rules changes like they do for normal values
3. Introduce a modified interface for "fast" functions:

{
  button: {
   // If value is an array and first item is a function, we got a function value.
    top: [props => props.top]
  }
}

{
   // If rule is an array and first item is a function, we got a fast function rule.
  button: [(props) => ({
    top: props.top
  })
}

Additionally we could allow passing options:

{
  button: {
   // Second array value is an options object.
    top: [props => props.top, {someOptions}]
  }
}

Another interface idea:

// This function name could be something else…
import {fast} from 'jss'
{
  // fast() will mark the function with a flag that allows to distinguish "fast" functions without plugins.
  button: fast((props) => ({
    top: props.top
  }))  
}    

I am open for any other interface suggestions.

[kavehsajjadi]

Fast functions being ones that require updates at 60fps?

[kof]

Fast functions being ones which can be updated frequently using .update() method without being slow for animations or other types of frequent updates.

Basically current function values/rules implementation IS the "fast" version, which is why I couldn't add all plugins to the results they return, because that would slow them down.

So we need a way to use the entire JSS syntax for more "static" use cases, where static doesn't mean it can be done only once, but it shouldn't be updated frequently. This is the way styled-components is using them. At the same time I want to keep the "fast" version for frequent updates.

So we need to distinguish those 2 versions somehow.

[AleshaOleg]

@kof I got another idea according to "fast" functions. Maybe better to revert your idea, and use such kind of wrapper for function values/rules only if needed to isolate block (class name) from root scope? Let's say this would be named as "slow" function. It will be executed separately with all of the plugins enabled by a user.

[kof]

@AleshaOleg people expect all rules to work the same way with fn values, because other libraries support this. JSS is the only one with "fast" functions, thats why I think we should go by default for slow version and make fast optional. Another reason is that having animations is also not the most popular use cases compared to props based regular styling.