Remove class inheritance from VirtualCSS

[jviereck]

The current draft of VirtualCSS in PR #4 allows to use inheritance, for example:

var ButtonStyles = module.exports.styles = StyleSheet.create({
  button: {
    // This is the basic/base styles that all the following rules inherit from.
    '!BASE': {
      backgroundColor: '#E6E6E6',
      ...
    },

    // Define states. States can inherit the styles from the '!BASE' definitions.
    // Possible states might be "checked" or "disabled". Note that things like
    // "BigButton" are not states as they modify the '!BASE' definition by
    // composing from `ButtonStyles.button`.
    'disabled': {
      '!BASE': {
        color: 'gray'
      }
    }
  }
});

The idea to use inheritance seems appealing when thinking about states like having a base definition for a button and then define what the button looks like when it is disabled. However, as soon as you start inheriting the styles for disabled from the base button it becomes less obvious what the behavior of button::disabled is like when the button style gets extended using composition later on.

Therefore, instead of using inheritance, I plan to allow only one level of nesting for style definitions and then use composition to define what a "disabled" button should look like. However, this raises a problem: The way the styles are defined at the moment within one stylesheet makes it impossible to reference the button definition when the disabled definition want to componse on it. In fact, the usage of StyleSheet.create to define a bunch of styles felt strange to me for some time now, which is why I also intend to get rid of StyleSheet.create and instead use StyleSheet.defineStyle to define a single style. With this, the above example becomes:

var buttonStyle = StyleSheet.defineStyle({
  backgroundColor: '#E6E6E6'
});
var buttonDisabledStyle = StyleSheet.compose(buttonStyle, {
  color: 'gray'
});

var ButtonStyles = module.exports.styles = {
  button: buttonStyle,
  buttonDisabled: buttonDisabledStyle
};

This is more verbose at this point but for now as I want to focus on the functionality okay from my perspective.

[Maxim-Filimonov]

For that specific I would think you would just use the state of the component to determine is it disabled or not and render different style.
Similar to react native styles:
https://facebook.github.io/react-native/docs/style.html

<div style={[styles.base, this.state.active && styles.active]} />