styled-components 2.1.1 → 2.2.1

package/lib/models/StyledComponent.js

@@ -32,10 +32,6 @@ var _getComponentName = require('../utils/getComponentName');
 
 var _getComponentName2 = _interopRequireDefault(_getComponentName);
 
-var _AbstractStyledComponent = require('./AbstractStyledComponent');
-
-var _AbstractStyledComponent2 = _interopRequireDefault(_AbstractStyledComponent);
-
 var _ThemeProvider = require('./ThemeProvider');
 
 var _StyleSheet = require('./StyleSheet');
@@ -61,10 +57,14 @@ var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPl
 var escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g;
 var multiDashRegex = /--+/g;
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+var STATIC_EXECUTION_CONTEXT = {};
+
 exports.default = function (ComponentStyle, constructWithOptions) {
   /* We depend on components having unique IDs */
   var identifiers = {};
-  var generateId = function generateId(_displayName) {
+  var generateId = function generateId(_displayName, parentComponentId) {
     var displayName = typeof _displayName !== 'string' ? 'sc' : _displayName.replace(escapeRegex, '-') // Replace all possible CSS selectors
     .replace(multiDashRegex, '-'); // Replace multiple -- with single -
 
@@ -72,11 +72,12 @@ exports.default = function (ComponentStyle, constructWithOptions) {
     identifiers[displayName] = nr;
 
     var hash = ComponentStyle.generateName(displayName + nr);
-    return displayName + '-' + hash;
+    var componentId = displayName + '-' + hash;
+    return parentComponentId !== undefined ? parentComponentId + '-' + componentId : componentId;
   };
 
-  var BaseStyledComponent = function (_AbstractStyledCompon) {
-    _inherits(BaseStyledComponent, _AbstractStyledCompon);
+  var BaseStyledComponent = function (_Component) {
+    _inherits(BaseStyledComponent, _Component);
 
     function BaseStyledComponent() {
       var _temp, _this, _ret;
@@ -87,12 +88,18 @@ exports.default = function (ComponentStyle, constructWithOptions) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _AbstractStyledCompon.call.apply(_AbstractStyledCompon, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
         theme: null,
         generatedClassName: ''
-      }, _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.unsubscribeId = -1, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
+    BaseStyledComponent.prototype.unsubscribeFromContext = function unsubscribeFromContext() {
+      if (this.unsubscribeId !== -1) {
+        this.context[_ThemeProvider.CHANNEL_NEXT].unsubscribe(this.unsubscribeId);
+      }
+    };
+
     BaseStyledComponent.prototype.buildExecutionContext = function buildExecutionContext(theme, props) {
       var attrs = this.constructor.attrs;
 
@@ -113,55 +120,86 @@ exports.default = function (ComponentStyle, constructWithOptions) {
 
     BaseStyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {
       var _constructor = this.constructor,
+          attrs = _constructor.attrs,
           componentStyle = _constructor.componentStyle,
           warnTooManyClasses = _constructor.warnTooManyClasses;
 
-      var executionContext = this.buildExecutionContext(theme, props);
       var styleSheet = this.context[_StyleSheet.CONTEXT_KEY] || _StyleSheet2.default.instance;
-      var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet);
+      } else {
+        var executionContext = this.buildExecutionContext(theme, props);
+        var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
+
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
 
-      return className;
+        return className;
+      }
     };
 
     BaseStyledComponent.prototype.componentWillMount = function componentWillMount() {
       var _this2 = this;
 
-      // If there is a theme in the context, subscribe to the event emitter. This
-      // is necessary due to pure components blocking context updates, this circumvents
-      // that by updating when an event is emitted
-      if (this.context[_ThemeProvider.CHANNEL]) {
-        var subscribe = this.context[_ThemeProvider.CHANNEL];
-        this.unsubscribe = subscribe(function (nextTheme) {
+      var componentStyle = this.constructor.componentStyle;
+
+      var styledContext = this.context[_ThemeProvider.CHANNEL_NEXT];
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        var generatedClassName = this.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, this.props);
+        this.setState({ generatedClassName: generatedClassName });
+        // If there is a theme in the context, subscribe to the event emitter. This
+        // is necessary due to pure components blocking context updates, this circumvents
+        // that by updating when an event is emitted
+      } else if (styledContext !== undefined) {
+        var subscribe = styledContext.subscribe;
+
+        this.unsubscribeId = subscribe(function (nextTheme) {
           // This will be called once immediately
 
           // Props should take precedence over ThemeProvider, which should take precedence over
           // defaultProps, but React automatically puts defaultProps on props.
           var defaultProps = _this2.constructor.defaultProps;
+          /* eslint-disable react/prop-types */
 
           var isDefaultTheme = defaultProps && _this2.props.theme === defaultProps.theme;
           var theme = _this2.props.theme && !isDefaultTheme ? _this2.props.theme : nextTheme;
+          /* eslint-enable */
           var generatedClassName = _this2.generateAndInjectStyles(theme, _this2.props);
           _this2.setState({ theme: theme, generatedClassName: generatedClassName });
         });
       } else {
+        // eslint-disable-next-line react/prop-types
         var _theme = this.props.theme || {};
-        var generatedClassName = this.generateAndInjectStyles(_theme, this.props);
-        this.setState({ theme: _theme, generatedClassName: generatedClassName });
+        var _generatedClassName = this.generateAndInjectStyles(_theme, this.props);
+        this.setState({ theme: _theme, generatedClassName: _generatedClassName });
       }
     };
 
     BaseStyledComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
       var _this3 = this;
 
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      var componentStyle = this.constructor.componentStyle;
+
+      if (componentStyle.isStatic) {
+        return;
+      }
+
       this.setState(function (oldState) {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.
         var defaultProps = _this3.constructor.defaultProps;
+        /* eslint-disable react/prop-types */
 
         var isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme;
         var theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme;
+        /* eslint-enable */
         var generatedClassName = _this3.generateAndInjectStyles(theme, nextProps);
 
         return { theme: theme, generatedClassName: generatedClassName };
@@ -169,14 +207,13 @@ exports.default = function (ComponentStyle, constructWithOptions) {
     };
 
     BaseStyledComponent.prototype.componentWillUnmount = function componentWillUnmount() {
-      if (this.unsubscribe) {
-        this.unsubscribe();
-      }
+      this.unsubscribeFromContext();
     };
 
     BaseStyledComponent.prototype.render = function render() {
       var _this4 = this;
 
+      // eslint-disable-next-line react/prop-types
       var innerRef = this.props.innerRef;
       var generatedClassName = this.state.generatedClassName;
       var _constructor2 = this.constructor,
@@ -186,7 +223,9 @@ exports.default = function (ComponentStyle, constructWithOptions) {
 
       var isTargetTag = (0, _isTag2.default)(target);
 
-      var className = [this.props.className, styledComponentId, this.attrs.className, generatedClassName].filter(Boolean).join(' ');
+      var className = [
+      // eslint-disable-next-line react/prop-types
+      this.props.className, styledComponentId, this.attrs.className, generatedClassName].filter(Boolean).join(' ');
 
       var baseProps = _extends({}, this.attrs, {
         className: className
@@ -213,7 +252,7 @@ exports.default = function (ComponentStyle, constructWithOptions) {
     };
 
     return BaseStyledComponent;
-  }(_AbstractStyledComponent2.default);
+  }(_react.Component);
 
   var createStyledComponent = function createStyledComponent(target, options, rules) {
     var _StyledComponent$cont;
@@ -221,7 +260,7 @@ exports.default = function (ComponentStyle, constructWithOptions) {
     var _options$displayName = options.displayName,
         displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + (0, _getComponentName2.default)(target) + ')' : _options$displayName,
         _options$componentId = options.componentId,
-        componentId = _options$componentId === undefined ? generateId(options.displayName) : _options$componentId,
+        componentId = _options$componentId === undefined ? generateId(options.displayName, options.parentComponentId) : _options$componentId,
         _options$ParentCompon = options.ParentComponent,
         ParentComponent = _options$ParentCompon === undefined ? BaseStyledComponent : _options$ParentCompon,
         extendingRules = options.rules,
@@ -231,7 +270,7 @@ exports.default = function (ComponentStyle, constructWithOptions) {
     var styledComponentId = options.displayName && options.componentId ? options.displayName + '-' + options.componentId : componentId;
 
     var warnTooManyClasses = void 0;
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production') {
       warnTooManyClasses = (0, _createWarnTooManyClasses2.default)(displayName);
     }
 
@@ -247,26 +286,31 @@ exports.default = function (ComponentStyle, constructWithOptions) {
       }
 
       StyledComponent.withComponent = function withComponent(tag) {
-        var _ = options.displayName,
-            __ = options.componentId,
-            optionsToCopy = _objectWithoutProperties(options, ['displayName', 'componentId']);
+        var previousComponentId = options.componentId,
+            optionsToCopy = _objectWithoutProperties(options, ['componentId']);
+
+        var newComponentId = previousComponentId && previousComponentId + '-' + ((0, _isTag2.default)(tag) ? tag : (0, _getComponentName2.default)(tag));
+
+        var newOptions = _extends({}, optionsToCopy, {
+          componentId: newComponentId,
+          ParentComponent: StyledComponent
+        });
 
-        var newOptions = _extends({}, optionsToCopy, { ParentComponent: StyledComponent });
         return createStyledComponent(tag, newOptions, rules);
       };
 
       _createClass(StyledComponent, null, [{
         key: 'extend',
         get: function get() {
-          var _ = options.displayName,
-              __ = options.componentId,
-              rulesFromOptions = options.rules,
-              optionsToCopy = _objectWithoutProperties(options, ['displayName', 'componentId', 'rules']);
+          var rulesFromOptions = options.rules,
+              parentComponentId = options.componentId,
+              optionsToCopy = _objectWithoutProperties(options, ['rules', 'componentId']);
 
           var newRules = rulesFromOptions === undefined ? rules : rulesFromOptions.concat(rules);
 
           var newOptions = _extends({}, optionsToCopy, {
             rules: newRules,
+            parentComponentId: parentComponentId,
             ParentComponent: StyledComponent
           });
 
@@ -277,7 +321,7 @@ exports.default = function (ComponentStyle, constructWithOptions) {
       return StyledComponent;
     }(ParentComponent);
 
-    StyledComponent.contextTypes = (_StyledComponent$cont = {}, _StyledComponent$cont[_ThemeProvider.CHANNEL] = _propTypes2.default.func, _StyledComponent$cont[_StyleSheet.CONTEXT_KEY] = _propTypes2.default.instanceOf(_StyleSheet2.default), _StyledComponent$cont);
+    StyledComponent.contextTypes = (_StyledComponent$cont = {}, _StyledComponent$cont[_ThemeProvider.CHANNEL] = _propTypes2.default.func, _StyledComponent$cont[_ThemeProvider.CHANNEL_NEXT] = _ThemeProvider.CONTEXT_CHANNEL_SHAPE, _StyledComponent$cont[_StyleSheet.CONTEXT_KEY] = _propTypes2.default.instanceOf(_StyleSheet2.default), _StyledComponent$cont);
     StyledComponent.displayName = displayName;
     StyledComponent.styledComponentId = styledComponentId;
     StyledComponent.attrs = attrs;

package/lib/models/StyledNativeComponent.js

@@ -8,6 +8,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _react = require('react');
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _isTag = require('../utils/isTag');
 
 var _isTag2 = _interopRequireDefault(_isTag);
@@ -22,10 +26,6 @@ var _getComponentName2 = _interopRequireDefault(_getComponentName);
 
 var _ThemeProvider = require('./ThemeProvider');
 
-var _AbstractStyledComponent = require('./AbstractStyledComponent');
-
-var _AbstractStyledComponent2 = _interopRequireDefault(_AbstractStyledComponent);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -43,8 +43,8 @@ var babelPluginFlowReactPropTypes_proptype_Target = require('../types').babelPlu
 var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('prop-types').any;
 
 exports.default = function (constructWithOptions, InlineStyle) {
-  var BaseStyledNativeComponent = function (_AbstractStyledCompon) {
-    _inherits(BaseStyledNativeComponent, _AbstractStyledCompon);
+  var BaseStyledNativeComponent = function (_Component) {
+    _inherits(BaseStyledNativeComponent, _Component);
 
     function BaseStyledNativeComponent() {
       var _temp, _this, _ret;
@@ -55,10 +55,11 @@ exports.default = function (constructWithOptions, InlineStyle) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _AbstractStyledCompon.call.apply(_AbstractStyledCompon, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
         theme: null,
         generatedStyles: undefined
-      }, _this.onRef = function (node) {
+      }, _this.unsubscribeId = -1, _this.onRef = function (node) {
+        // eslint-disable-next-line react/prop-types
         var innerRef = _this.props.innerRef;
 
         _this.root = node;
@@ -69,6 +70,12 @@ exports.default = function (constructWithOptions, InlineStyle) {
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
+    BaseStyledNativeComponent.prototype.unsubscribeFromContext = function unsubscribeFromContext() {
+      if (this.unsubscribeId !== -1) {
+        this.context[_ThemeProvider.CHANNEL_NEXT].unsubscribe(this.unsubscribeId);
+      }
+    };
+
     BaseStyledNativeComponent.prototype.buildExecutionContext = function buildExecutionContext(theme, props) {
       var attrs = this.constructor.attrs;
 
@@ -101,21 +108,26 @@ exports.default = function (constructWithOptions, InlineStyle) {
       // If there is a theme in the context, subscribe to the event emitter. This
       // is necessary due to pure components blocking context updates, this circumvents
       // that by updating when an event is emitted
-      if (this.context[_ThemeProvider.CHANNEL]) {
-        var subscribe = this.context[_ThemeProvider.CHANNEL];
-        this.unsubscribe = subscribe(function (nextTheme) {
+      var styledContext = this.context[_ThemeProvider.CHANNEL_NEXT];
+      if (styledContext !== undefined) {
+        var subscribe = styledContext.subscribe;
+
+        this.unsubscribeId = subscribe(function (nextTheme) {
           // This will be called once immediately
 
           // Props should take precedence over ThemeProvider, which should take precedence over
           // defaultProps, but React automatically puts defaultProps on props.
           var defaultProps = _this2.constructor.defaultProps;
+          /* eslint-disable react/prop-types */
 
           var isDefaultTheme = defaultProps && _this2.props.theme === defaultProps.theme;
           var theme = _this2.props.theme && !isDefaultTheme ? _this2.props.theme : nextTheme;
+          /* eslint-enable */
           var generatedStyles = _this2.generateAndInjectStyles(theme, _this2.props);
           _this2.setState({ theme: theme, generatedStyles: generatedStyles });
         });
       } else {
+        // eslint-disable-next-line react/prop-types
         var _theme = this.props.theme || {};
         var generatedStyles = this.generateAndInjectStyles(_theme, this.props);
         this.setState({ theme: _theme, generatedStyles: generatedStyles });
@@ -129,9 +141,11 @@ exports.default = function (constructWithOptions, InlineStyle) {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.
         var defaultProps = _this3.constructor.defaultProps;
+        /* eslint-disable react/prop-types */
 
         var isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme;
         var theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme;
+        /* eslint-enable */
         var generatedStyles = _this3.generateAndInjectStyles(theme, nextProps);
 
         return { theme: theme, generatedStyles: generatedStyles };
@@ -139,9 +153,7 @@ exports.default = function (constructWithOptions, InlineStyle) {
     };
 
     BaseStyledNativeComponent.prototype.componentWillUnmount = function componentWillUnmount() {
-      if (this.unsubscribe) {
-        this.unsubscribe();
-      }
+      this.unsubscribeFromContext();
     };
 
     BaseStyledNativeComponent.prototype.setNativeProps = function setNativeProps(nativeProps) {
@@ -158,6 +170,7 @@ exports.default = function (constructWithOptions, InlineStyle) {
     };
 
     BaseStyledNativeComponent.prototype.render = function render() {
+      // eslint-disable-next-line react/prop-types
       var _props = this.props,
           children = _props.children,
           style = _props.style;
@@ -182,9 +195,11 @@ exports.default = function (constructWithOptions, InlineStyle) {
     };
 
     return BaseStyledNativeComponent;
-  }(_AbstractStyledComponent2.default);
+  }(_react.Component);
 
   var createStyledNativeComponent = function createStyledNativeComponent(target, options, rules) {
+    var _StyledNativeComponen;
+
     var _options$displayName = options.displayName,
         displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + (0, _getComponentName2.default)(target) + ')' : _options$displayName,
         _options$ParentCompon = options.ParentComponent,
@@ -242,6 +257,7 @@ exports.default = function (constructWithOptions, InlineStyle) {
     StyledNativeComponent.target = target;
     StyledNativeComponent.attrs = attrs;
     StyledNativeComponent.inlineStyle = inlineStyle;
+    StyledNativeComponent.contextTypes = (_StyledNativeComponen = {}, _StyledNativeComponen[_ThemeProvider.CHANNEL] = _propTypes2.default.func, _StyledNativeComponen[_ThemeProvider.CHANNEL_NEXT] = _ThemeProvider.CONTEXT_CHANNEL_SHAPE, _StyledNativeComponen);
     StyledNativeComponent.styledComponentId = 'StyledNativeComponent';
 
 

package/lib/models/ThemeProvider.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.CHANNEL = undefined;
+exports.CONTEXT_CHANNEL_SHAPE = exports.CHANNEL_NEXT = exports.CHANNEL = undefined;
 
 var _ThemeProvider$childC, _ThemeProvider$contex;
 
@@ -27,6 +27,10 @@ var _createBroadcast = require('../utils/create-broadcast');
 
 var _createBroadcast2 = _interopRequireDefault(_createBroadcast);
 
+var _once = require('../utils/once');
+
+var _once2 = _interopRequireDefault(_once);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -37,19 +41,32 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 /* globals React$Element */
 
 
-// NOTE: DO NOT CHANGE, changing this is a semver major change!
 var babelPluginFlowReactPropTypes_proptype_Broadcast = require('../utils/create-broadcast').babelPluginFlowReactPropTypes_proptype_Broadcast || require('prop-types').any;
 
+// NOTE: DO NOT CHANGE, changing this is a semver major change!
 var CHANNEL = exports.CHANNEL = '__styled-components__';
+var CHANNEL_NEXT = exports.CHANNEL_NEXT = CHANNEL + 'next__';
+
+var CONTEXT_CHANNEL_SHAPE = exports.CONTEXT_CHANNEL_SHAPE = _propTypes2.default.shape({
+  getTheme: _propTypes2.default.func,
+  subscribe: _propTypes2.default.func,
+  unsubscribe: _propTypes2.default.func
+});
 
 if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Theme', {
   value: require('prop-types').shape({})
 });
 
+
+var warnChannelDeprecated = (0, _once2.default)(function () {
+  // eslint-disable-next-line no-console
+  console.error('Warning: Usage of `context.' + CHANNEL + '` as a function is deprecated. It will be replaced with the object on `.context.' + CHANNEL_NEXT + '` in a future version.');
+});
 /**
  * Provide a theme to an entire react component tree via context and event listeners (have to do
  * both context and event emitter as pure components block context updates)
  */
+
 var ThemeProvider = function (_Component) {
   _inherits(ThemeProvider, _Component);
 
@@ -58,6 +75,8 @@ var ThemeProvider = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this));
 
+    _this.unsubscribeToOuterId = -1;
+
     _this.getTheme = _this.getTheme.bind(_this);
     return _this;
   }
@@ -67,9 +86,9 @@ var ThemeProvider = function (_Component) {
 
     // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme
     // with the outer theme
-    if (this.context[CHANNEL]) {
-      var subscribe = this.context[CHANNEL];
-      this.unsubscribeToOuter = subscribe(function (theme) {
+    var outerContext = this.context[CHANNEL_NEXT];
+    if (outerContext !== undefined) {
+      this.unsubscribeToOuterId = outerContext.subscribe(function (theme) {
         _this2.outerTheme = theme;
       });
     }
@@ -77,9 +96,22 @@ var ThemeProvider = function (_Component) {
   };
 
   ThemeProvider.prototype.getChildContext = function getChildContext() {
-    var _extends2;
-
-    return _extends({}, this.context, (_extends2 = {}, _extends2[CHANNEL] = this.broadcast.subscribe, _extends2));
+    var _this3 = this,
+        _extends2;
+
+    return _extends({}, this.context, (_extends2 = {}, _extends2[CHANNEL_NEXT] = {
+      getTheme: this.getTheme,
+      subscribe: this.broadcast.subscribe,
+      unsubscribe: this.broadcast.unsubscribe
+    }, _extends2[CHANNEL] = function (subscriber) {
+      warnChannelDeprecated();
+
+      // Patch the old `subscribe` provide via `CHANNEL` for older clients.
+      var unsubscribeId = _this3.broadcast.subscribe(subscriber);
+      return function () {
+        return _this3.broadcast.unsubscribe(unsubscribeId);
+      };
+    }, _extends2));
   };
 
   ThemeProvider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
@@ -87,8 +119,8 @@ var ThemeProvider = function (_Component) {
   };
 
   ThemeProvider.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (this.context[CHANNEL]) {
-      this.unsubscribeToOuter();
+    if (this.unsubscribeToOuterId !== -1) {
+      this.context[CHANNEL_NEXT].unsubscribe(this.unsubscribeToOuterId);
     }
   };
 
@@ -126,7 +158,7 @@ ThemeProvider.propTypes = {
 };
 
 
-ThemeProvider.childContextTypes = (_ThemeProvider$childC = {}, _ThemeProvider$childC[CHANNEL] = _propTypes2.default.func.isRequired, _ThemeProvider$childC);
-ThemeProvider.contextTypes = (_ThemeProvider$contex = {}, _ThemeProvider$contex[CHANNEL] = _propTypes2.default.func, _ThemeProvider$contex);
+ThemeProvider.childContextTypes = (_ThemeProvider$childC = {}, _ThemeProvider$childC[CHANNEL] = _propTypes2.default.func, _ThemeProvider$childC[CHANNEL_NEXT] = CONTEXT_CHANNEL_SHAPE, _ThemeProvider$childC);
+ThemeProvider.contextTypes = (_ThemeProvider$contex = {}, _ThemeProvider$contex[CHANNEL_NEXT] = CONTEXT_CHANNEL_SHAPE, _ThemeProvider$contex);
 
 exports.default = ThemeProvider;

package/lib/native/index.js

@@ -47,7 +47,7 @@ var styled = function styled(tag) {
 
 /* React native lazy-requires each of these modules for some reason, so let's
 *  assume it's for a good reason and not eagerly load them all */
-var aliases = 'ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid\n Image ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal Navigator NavigatorIOS\n Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider\n SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl StatusBar\n SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid\n Touchable TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback\n View ViewPagerAndroid WebView FlatList SectionList VirtualizedList';
+var aliases = 'ActivityIndicator ActivityIndicatorIOS ART Button DatePickerIOS DrawerLayoutAndroid\n Image ImageBackground ImageEditor ImageStore KeyboardAvoidingView ListView MapView Modal Navigator NavigatorIOS\n Picker PickerIOS ProgressBarAndroid ProgressViewIOS ScrollView SegmentedControlIOS Slider\n SliderIOS SnapshotViewIOS Switch RecyclerViewBackedScrollView RefreshControl StatusBar\n SwipeableListView SwitchAndroid SwitchIOS TabBarIOS Text TextInput ToastAndroid ToolbarAndroid\n Touchable TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback\n View ViewPagerAndroid WebView FlatList SectionList VirtualizedList';
 
 /* Define a getter for each alias which simply gets the reactNative component
  * and passes it to styled */

package/lib/test/utils.js

@@ -67,8 +67,11 @@ var seedNextClassnames = exports.seedNextClassnames = function seedNextClassname
 var resetStyled = exports.resetStyled = function resetStyled() {
   var isServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-  if (!document.head) throw new Error("Missing document <head>");
-  document.head.innerHTML = '';
+  if (!isServer) {
+    if (!document.head) throw new Error("Missing document <head>");
+    document.head.innerHTML = '';
+  }
+
   _StyleSheet2.default.reset(isServer);
   index = 0;
 

package/lib/utils/create-broadcast.js

@@ -4,7 +4,8 @@ exports.__esModule = true;
 if (typeof exports !== "undefined") Object.defineProperty(exports, "babelPluginFlowReactPropTypes_proptype_Broadcast", {
   value: require("prop-types").shape({
     publish: require("prop-types").func.isRequired,
-    subscribe: require("prop-types").func.isRequired
+    subscribe: require("prop-types").func.isRequired,
+    unsubscribe: require("prop-types").func.isRequired
   })
 });
 /**
@@ -13,30 +14,39 @@ if (typeof exports !== "undefined") Object.defineProperty(exports, "babelPluginF
  * @see https://github.com/ReactTraining/react-broadcast
  */
 
-var createBroadcast = function createBroadcast(initialValue) {
-  var listeners = [];
-  var currentValue = initialValue;
-
-  return {
-    publish: function publish(value) {
-      currentValue = value;
-      listeners.forEach(function (listener) {
-        return listener(currentValue);
-      });
-    },
-    subscribe: function subscribe(listener) {
-      listeners.push(listener);
-
-      // Publish to this subscriber once immediately.
-      listener(currentValue);
-
-      return function () {
-        listeners = listeners.filter(function (item) {
-          return item !== listener;
-        });
-      };
+var createBroadcast = function createBroadcast(initialState) {
+  var listeners = {};
+  var id = 0;
+  var state = initialState;
+
+  function publish(nextState) {
+    state = nextState;
+
+    // eslint-disable-next-line guard-for-in, no-restricted-syntax
+    for (var key in listeners) {
+      var _listener = listeners[key];
+      if (_listener === undefined) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      _listener(state);
     }
-  };
+  }
+
+  function subscribe(listener) {
+    var currentId = id;
+    listeners[currentId] = listener;
+    id += 1;
+    listener(state);
+    return currentId;
+  }
+
+  function unsubscribe(unsubID) {
+    listeners[unsubID] = undefined;
+  }
+
+  return { publish: publish, subscribe: subscribe, unsubscribe: unsubscribe };
 };
 
 exports.default = createBroadcast;

package/lib/utils/domElements.js

@@ -4,7 +4,7 @@ exports.__esModule = true;
 
 // Thanks to ReactDOMFactories for this handy list!
 
-exports.default = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',
+exports.default = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',
 
 // SVG
 'circle', 'clipPath', 'defs', 'ellipse', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];

package/lib/utils/flatten.js

@@ -16,7 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('prop-types').any;
 
 var objToCss = exports.objToCss = function objToCss(obj, prevKey) {
-  var css = Object.keys(obj).map(function (key) {
+  var css = Object.keys(obj).filter(function (key) {
+    var chunk = obj[key];
+    return chunk !== undefined && chunk !== null && chunk !== false && chunk !== '';
+  }).map(function (key) {
     if ((0, _isPlainObject2.default)(obj[key])) return objToCss(obj[key], key);
     return (0, _hyphenateStyleName2.default)(key) + ': ' + obj[key] + ';';
   }).join(' ');