radium - npm Package Compare versions

11

CHANGELOG.md

		# Radium Changelog

		## 0.25.1 (December 16, 2018)
		#### Bug Fixes
		- Pass `snapshot` argument to `componentDidUpdate (#1013)

		#### Infra/Tooling
		- Fix console warnings when running examples (#1002)
		- Upgrade karma to 3.0 (#1003)
		- Refactor enhancer for readability (#1004)
		- Replace Isparta with Istanbul (#1011)
		- Prettier (#1012)

		## 0.25.0 (September 16, 2018)
		@@ -4,0 +15,0 @@ - Use `Reflect` to construct es native classes in a way that preserves the value of `this` used in

258

es/enhancer.js

		@@ -1,6 +0,6 @@
		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

		@@ -52,122 +52,51 @@ 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; }

		export default function enhanceWithRadium(configOrComposedComponent) {
		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		function copyArrowFuncs(enhancedSelf, ComposedComponent) {
		RADIUM_METHODS.forEach(function (name) {
		var thisDesc = Object.getOwnPropertyDescriptor(enhancedSelf, name);
		var thisMethod = (thisDesc \|\| {}).value;
		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}
		var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		var radiumProtoMethod = (radiumDesc \|\| {}).value;
		var superProtoMethod = ComposedComponent.prototype[name];
		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(ComposedComponent.prototype, name, thisDesc);
		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete enhancedSelf[name];
		}
		});
		}

		function createEnhancedComponent(origComponent, ComposedComponent, config) {
		var _class, _temp;

		var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		var RadiumEnhancer = (_temp = _class = function (_ComposedComponent) {
		_inherits(RadiumEnhancer, _ComposedComponent);

		if (typeof configOrComposedComponent !== 'function') {
		var newConfig = _extends({}, config, configOrComposedComponent);
		return function (configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}

		var component = configOrComposedComponent;
		var _ComposedComponent = component;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(_ComposedComponent)) {
		_ComposedComponent = function (OrigComponent) {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		var obj = Reflect.construct(OrigComponent, arguments, this.constructor);

		return obj;
		}

		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);

		return NewComponent;
		}(_ComposedComponent);
		}

		// Handle stateless components
		if (isStateless(_ComposedComponent)) {
		_ComposedComponent = function (_Component) {
		_inherits(ComposedComponent, _Component);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		_createClass(ComposedComponent, [{
		key: 'render',
		value: function render() {
		return component(this.props, this.context);
		}
		}]);

		return ComposedComponent;
		}(Component);

		_ComposedComponent.displayName = component.displayName \|\| component.name;
		}

		// Shallow copy composed if still original (we may mutate later).
		if (_ComposedComponent === component) {
		_ComposedComponent = function (_ComposedComponent2) {
		_inherits(ComposedComponent, _ComposedComponent2);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		return ComposedComponent;
		}(_ComposedComponent);
		}

		var RadiumEnhancer = (_temp = _class = function (_ComposedComponent3) {
		_inherits(RadiumEnhancer, _ComposedComponent3);

		function RadiumEnhancer() {
		_classCallCheck(this, RadiumEnhancer);

		var _this3 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
		var _this = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));

		_this3.state = _this3.state \|\| {};
		_this3.state._radiumStyleState = {};
		_this3._radiumIsMounted = true;
		_this.state = _this.state \|\| {};
		_this.state._radiumStyleState = {};
		_this._radiumIsMounted = true;

		var self = _this3;
		var self = _this;

		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		RADIUM_METHODS.forEach(function (name) {
		var thisDesc = Object.getOwnPropertyDescriptor(self, name);
		var thisMethod = (thisDesc \|\| {}).value;

		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}

		var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		var radiumProtoMethod = radiumDesc.value;
		var superProtoMethod = _ComposedComponent.prototype[name];

		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(_ComposedComponent.prototype, name, thisDesc);

		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete self[name];
		}
		});
		return _this3;
		// Handle es7 arrow functions on React class method
		copyArrowFuncs(self, ComposedComponent);
		return _this;
		}
		@@ -221,2 +150,4 @@

		// do the style and interaction work

		var _resolveStyles = resolveStyles(this, renderedElement, currentConfig),
		@@ -235,5 +166,5 @@ extraStateKeyMap = _resolveStyles.extraStateKeyMap,
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
		value: function componentDidUpdate(prevProps, prevState, snapshot) {
		if (_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this)) {
		_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this).call(this, prevProps, prevState);
		_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this).call(this, prevProps, prevState, snapshot);
		}
		@@ -258,3 +189,3 @@
		return RadiumEnhancer;
		}(_ComposedComponent), _class._isRadiumEnhanced = true, _temp);
		}(ComposedComponent), _class._isRadiumEnhanced = true, _temp);

		@@ -272,3 +203,3 @@ // Lazy infer the method names of the Enhancer.
		// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
		copyProperties(component, RadiumEnhancer);
		copyProperties(origComponent, RadiumEnhancer);

		@@ -279,5 +210,6 @@ if (process.env.NODE_ENV !== 'production') {
		// https://github.com/FormidableLabs/radium/issues/219.
		copyProperties(_ComposedComponent.prototype, RadiumEnhancer.prototype);
		copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
		}

		// add Radium propTypes to enhanced component's propTypes
		if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {
		@@ -289,4 +221,6 @@ RadiumEnhancer.propTypes = _extends({}, RadiumEnhancer.propTypes, {

		RadiumEnhancer.displayName = component.displayName \|\| component.name \|\| 'Component';
		// copy display name to enhanced component
		RadiumEnhancer.displayName = origComponent.displayName \|\| origComponent.name \|\| 'Component';

		// handle context
		RadiumEnhancer.contextTypes = _extends({}, RadiumEnhancer.contextTypes, {
		@@ -303,2 +237,88 @@ _radiumConfig: PropTypes.object,
		return RadiumEnhancer;
		}

		function createComposedFromStatelessFunc(ComposedComponent, component) {
		ComposedComponent = function (_Component) {
		_inherits(ComposedComponent, _Component);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		_createClass(ComposedComponent, [{
		key: 'render',
		value: function render() {
		return component(this.props, this.context);
		}
		}]);

		return ComposedComponent;
		}(Component);
		ComposedComponent.displayName = component.displayName \|\| component.name;
		return ComposedComponent;
		}

		function createComposedFromNativeClass(ComposedComponent) {
		ComposedComponent = function (OrigComponent) {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		var obj = Reflect.construct(OrigComponent, arguments, this.constructor);
		return obj;
		}
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);
		return NewComponent;
		}(ComposedComponent);
		return ComposedComponent;
		}

		export default function enhanceWithRadium(configOrComposedComponent) {
		var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

		if (typeof configOrComposedComponent !== 'function') {
		return createFactoryFromConfig(config, configOrComposedComponent);
		}

		var origComponent = configOrComposedComponent;
		var _ComposedComponent2 = origComponent;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(_ComposedComponent2)) {
		_ComposedComponent2 = createComposedFromNativeClass(_ComposedComponent2);
		}

		// Handle stateless components
		if (isStateless(_ComposedComponent2)) {
		_ComposedComponent2 = createComposedFromStatelessFunc(_ComposedComponent2, origComponent);
		}

		// Shallow copy composed if still original (we may mutate later).
		if (_ComposedComponent2 === origComponent) {
		_ComposedComponent2 = function (_ComposedComponent3) {
		_inherits(ComposedComponent, _ComposedComponent3);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		return ComposedComponent;
		}(_ComposedComponent2);
		}

		return createEnhancedComponent(origComponent, _ComposedComponent2, config);
		}

		function createFactoryFromConfig(config, configOrComposedComponent) {
		var newConfig = _extends({}, config, configOrComposedComponent);
		return function (configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}

258

lib/enhancer.js

		@@ -7,7 +7,7 @@ 'use strict';

		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
		var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

		@@ -74,122 +74,51 @@ exports.default = enhanceWithRadium;

		function enhanceWithRadium(configOrComposedComponent) {
		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		function copyArrowFuncs(enhancedSelf, ComposedComponent) {
		RADIUM_METHODS.forEach(function (name) {
		var thisDesc = Object.getOwnPropertyDescriptor(enhancedSelf, name);
		var thisMethod = (thisDesc \|\| {}).value;
		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}
		var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		var radiumProtoMethod = (radiumDesc \|\| {}).value;
		var superProtoMethod = ComposedComponent.prototype[name];
		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(ComposedComponent.prototype, name, thisDesc);
		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete enhancedSelf[name];
		}
		});
		}

		function createEnhancedComponent(origComponent, ComposedComponent, config) {
		var _class, _temp;

		var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		var RadiumEnhancer = (_temp = _class = function (_ComposedComponent) {
		_inherits(RadiumEnhancer, _ComposedComponent);

		if (typeof configOrComposedComponent !== 'function') {
		var newConfig = _extends({}, config, configOrComposedComponent);
		return function (configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}

		var component = configOrComposedComponent;
		var _ComposedComponent = component;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(_ComposedComponent)) {
		_ComposedComponent = function (OrigComponent) {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		var obj = Reflect.construct(OrigComponent, arguments, this.constructor);

		return obj;
		}

		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);

		return NewComponent;
		}(_ComposedComponent);
		}

		// Handle stateless components
		if (isStateless(_ComposedComponent)) {
		_ComposedComponent = function (_Component) {
		_inherits(ComposedComponent, _Component);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		_createClass(ComposedComponent, [{
		key: 'render',
		value: function render() {
		return component(this.props, this.context);
		}
		}]);

		return ComposedComponent;
		}(_react.Component);

		_ComposedComponent.displayName = component.displayName \|\| component.name;
		}

		// Shallow copy composed if still original (we may mutate later).
		if (_ComposedComponent === component) {
		_ComposedComponent = function (_ComposedComponent2) {
		_inherits(ComposedComponent, _ComposedComponent2);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		return ComposedComponent;
		}(_ComposedComponent);
		}

		var RadiumEnhancer = (_temp = _class = function (_ComposedComponent3) {
		_inherits(RadiumEnhancer, _ComposedComponent3);

		function RadiumEnhancer() {
		_classCallCheck(this, RadiumEnhancer);

		var _this3 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
		var _this = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));

		_this3.state = _this3.state \|\| {};
		_this3.state._radiumStyleState = {};
		_this3._radiumIsMounted = true;
		_this.state = _this.state \|\| {};
		_this.state._radiumStyleState = {};
		_this._radiumIsMounted = true;

		var self = _this3;
		var self = _this;

		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		RADIUM_METHODS.forEach(function (name) {
		var thisDesc = Object.getOwnPropertyDescriptor(self, name);
		var thisMethod = (thisDesc \|\| {}).value;

		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}

		var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		var radiumProtoMethod = radiumDesc.value;
		var superProtoMethod = _ComposedComponent.prototype[name];

		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(_ComposedComponent.prototype, name, thisDesc);

		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete self[name];
		}
		});
		return _this3;
		// Handle es7 arrow functions on React class method
		copyArrowFuncs(self, ComposedComponent);
		return _this;
		}
		@@ -243,2 +172,4 @@

		// do the style and interaction work

		var _resolveStyles = (0, _resolveStyles3.default)(this, renderedElement, currentConfig),
		@@ -257,5 +188,5 @@ extraStateKeyMap = _resolveStyles.extraStateKeyMap,
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
		value: function componentDidUpdate(prevProps, prevState, snapshot) {
		if (_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this)) {
		_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this).call(this, prevProps, prevState);
		_get(RadiumEnhancer.prototype.__proto__ \|\| Object.getPrototypeOf(RadiumEnhancer.prototype), 'componentDidUpdate', this).call(this, prevProps, prevState, snapshot);
		}
		@@ -280,3 +211,3 @@
		return RadiumEnhancer;
		}(_ComposedComponent), _class._isRadiumEnhanced = true, _temp);
		}(ComposedComponent), _class._isRadiumEnhanced = true, _temp);

		@@ -294,3 +225,3 @@ // Lazy infer the method names of the Enhancer.
		// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
		copyProperties(component, RadiumEnhancer);
		copyProperties(origComponent, RadiumEnhancer);

		@@ -301,5 +232,6 @@ if (process.env.NODE_ENV !== 'production') {
		// https://github.com/FormidableLabs/radium/issues/219.
		copyProperties(_ComposedComponent.prototype, RadiumEnhancer.prototype);
		copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
		}

		// add Radium propTypes to enhanced component's propTypes
		if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {
		@@ -311,4 +243,6 @@ RadiumEnhancer.propTypes = _extends({}, RadiumEnhancer.propTypes, {

		RadiumEnhancer.displayName = component.displayName \|\| component.name \|\| 'Component';
		// copy display name to enhanced component
		RadiumEnhancer.displayName = origComponent.displayName \|\| origComponent.name \|\| 'Component';

		// handle context
		RadiumEnhancer.contextTypes = _extends({}, RadiumEnhancer.contextTypes, {
		@@ -325,2 +259,88 @@ _radiumConfig: _propTypes2.default.object,
		return RadiumEnhancer;
		}

		function createComposedFromStatelessFunc(ComposedComponent, component) {
		ComposedComponent = function (_Component) {
		_inherits(ComposedComponent, _Component);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		_createClass(ComposedComponent, [{
		key: 'render',
		value: function render() {
		return component(this.props, this.context);
		}
		}]);

		return ComposedComponent;
		}(_react.Component);
		ComposedComponent.displayName = component.displayName \|\| component.name;
		return ComposedComponent;
		}

		function createComposedFromNativeClass(ComposedComponent) {
		ComposedComponent = function (OrigComponent) {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		var obj = Reflect.construct(OrigComponent, arguments, this.constructor);
		return obj;
		}
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);
		return NewComponent;
		}(ComposedComponent);
		return ComposedComponent;
		}

		function enhanceWithRadium(configOrComposedComponent) {
		var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

		if (typeof configOrComposedComponent !== 'function') {
		return createFactoryFromConfig(config, configOrComposedComponent);
		}

		var origComponent = configOrComposedComponent;
		var _ComposedComponent2 = origComponent;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(_ComposedComponent2)) {
		_ComposedComponent2 = createComposedFromNativeClass(_ComposedComponent2);
		}

		// Handle stateless components
		if (isStateless(_ComposedComponent2)) {
		_ComposedComponent2 = createComposedFromStatelessFunc(_ComposedComponent2, origComponent);
		}

		// Shallow copy composed if still original (we may mutate later).
		if (_ComposedComponent2 === origComponent) {
		_ComposedComponent2 = function (_ComposedComponent3) {
		_inherits(ComposedComponent, _ComposedComponent3);

		function ComposedComponent() {
		_classCallCheck(this, ComposedComponent);

		return _possibleConstructorReturn(this, (ComposedComponent.__proto__ \|\| Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
		}

		return ComposedComponent;
		}(_ComposedComponent2);
		}

		return createEnhancedComponent(origComponent, _ComposedComponent2, config);
		}

		function createFactoryFromConfig(config, configOrComposedComponent) {
		var newConfig = _extends({}, config, configOrComposedComponent);
		return function (configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}

14

package.json

		{
		"name": "radium",
		"version": "0.25.0",
		"version": "0.25.1",
		"description": "A set of tools to manage inline styles on React elements",
		@@ -65,2 +65,3 @@ "main": "index.js",
		"babel-eslint": "^7.1.1",
		"babel-plugin-istanbul": "^5.1.0",
		"caniuse-api": "^2.0.0",
		@@ -81,6 +82,5 @@ "chai": "^3.5.0",
		"inject-loader": "^3.0.1",
		"isparta-loader": "^2.0.0",
		"jsdom": "^12.0.0",
		"jsdom-global": "^3.0.2",
		"karma": "^2.0.0",
		"karma": "^3.0.0",
		"karma-babel-preprocessor": "^6.0.1",
		@@ -98,6 +98,6 @@ "karma-chrome-launcher": "^2.2.0",
		"object-assign": "^4.1.1",
		"prettier": "^0.22.0",
		"react": "^16.2.0",
		"react-dom": "^16.2.0",
		"react-test-renderer": "^16.2.0",
		"prettier": "^1.15.3",
		"react": "^16.6.3",
		"react-dom": "^16.6.3",
		"react-test-renderer": "^16.6.3",
		"sinon": "^1.17.7",
		@@ -104,0 +104,0 @@ "sinon-chai": "^2.8.0",

6

src/__tests__/enhancer-test.js

		@@ -167,7 +167,3 @@ const resolveStyles = sinon.spy(require('resolve-styles'), 'default');
		render() {
		return (
		<div style={this.getStyles()}>
		Hello World!
		</div>
		);
		return <div style={this.getStyles()}>Hello World!</div>;
		}
		@@ -174,0 +170,0 @@ }

2

src/__tests__/get-state-key-test.js

		@@ -21,3 +21,3 @@ import React from 'react';
		render() {
		return <div key="myKey" ref={ref => this.ref = ref} />;
		return <div key="myKey" ref={ref => (this.ref = ref)} />;
		}
		@@ -24,0 +24,0 @@ }

15

src/__tests__/keyframes-test.js

		@@ -8,3 +8,4 @@ /* eslint-disable react/prop-types */

		const CHROME_14_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +
		const CHROME_14_USER_AGENT =
		'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 ' +
		'(KHTML, like Gecko) Chrome/14.0.812.0 Safari/535.1';
		@@ -247,3 +248,4 @@

		@Radium class ChildComponent extends Component {
		@Radium
		class ChildComponent extends Component {
		render() {
		@@ -254,3 +256,4 @@ return <div style={{animationName: animation}} />;

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -300,3 +303,4 @@ return (

		@Radium class ChildComponent extends Component {
		@Radium
		class ChildComponent extends Component {
		render() {
		@@ -307,3 +311,4 @@ return <div style={{animationName: [animation, animation2]}} />;

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -310,0 +315,0 @@ return (

7

src/__tests__/media-query-test.js

		@@ -399,4 +399,4 @@ /* eslint-disable react/prop-types */
		expect(catchSpy).to.have.callCount(1);
		expect(catchSpy.getCall(0).args[1]).to.have
		.property('componentStack')
		expect(catchSpy.getCall(0).args[1])
		.to.have.property('componentStack')
		.that.contains('Component');
		@@ -413,3 +413,4 @@ });
		expect(() =>
		TestUtils.renderIntoDocument(<TestComponent />)).not.to.throw();
		TestUtils.renderIntoDocument(<TestComponent />)
		).not.to.throw();
		});
		@@ -416,0 +417,0 @@

129

src/__tests__/radium-test.js

		@@ -23,3 +23,4 @@ /* eslint-disable react/prop-types */
		it('merges styles', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -39,3 +40,4 @@ return <div style={[{color: 'blue'}, {background: 'red'}]} />;
		it('merges nested styles', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -66,3 +68,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -92,3 +95,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -129,3 +133,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -163,3 +168,4 @@ return (
		it('adds hover styles', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -191,3 +197,4 @@ return (
		it('adds active styles', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -219,3 +226,4 @@ return (
		it('removes active styles on mouseup', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -279,2 +287,32 @@ return (

		it('passes snapshot to the componentDidUpdate of the component, Issue #985', () => {
		const SNAPSHOT = 'SNAPSHOT';

		class SnapshotComp extends Component {
		componentDidMount() {
		this.forceUpdate();
		}

		componentDidUpdate(props, state, snapshot) {
		expect(snapshot).to.equal(SNAPSHOT);
		}

		getSnapshotBeforeUpdate() {
		return SNAPSHOT;
		}

		render() {
		return null;
		}
		}

		sinon.spy(SnapshotComp.prototype, 'componentDidUpdate');

		const TestComponent = Radium(SnapshotComp);

		TestUtils.renderIntoDocument(<TestComponent />);

		expect(SnapshotComp.prototype.componentDidUpdate).to.have.been.calledOnce;
		});

		it('resets state for unmounted components, Issue #524', () => {
		@@ -287,3 +325,3 @@ class TestComponent extends Component {
		<button onClick={() => this.setState({showSpan: true})} />
		{this.state.showSpan &&
		{this.state.showSpan && (
		<span
		@@ -296,3 +334,4 @@ key="s"
		}}
		/>}
		/>
		)}
		</div>
		@@ -319,4 +358,4 @@ );
		spans = getElements(output, 'span');
		expect(spans).to.have
		.length(1)
		expect(spans)
		.to.have.length(1)
		.and.to.have.deep.property('[0].style.color', 'blue');
		@@ -326,3 +365,4 @@ });
		it('resolves styles on multiple elements nested far down, Issue #307', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -370,3 +410,4 @@ return (
		it('resolves styles if an element has element children and spreads props', () => {
		@Radium class Inner extends Component {
		@Radium
		class Inner extends Component {
		static propTypes = {children: PropTypes.node};
		@@ -382,3 +423,4 @@ render() {

		@Radium class Outer extends Component {
		@Radium
		class Outer extends Component {
		render() {
		@@ -402,3 +444,4 @@ return (
		it('calls toString on object values', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -472,3 +515,4 @@ return (
		it('adds active styles on space', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -504,3 +548,4 @@ return (
		it('works with children as keyed object ala React Router', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -533,10 +578,7 @@ return (
		it('preserves array children as arrays', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		expect(Array.isArray(this.props.children)).to.equal(true);
		return (
		<div>
		{this.props.children}
		</div>
		);
		return <div>{this.props.children}</div>;
		}
		@@ -561,3 +603,4 @@ }

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -583,3 +626,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -605,3 +649,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -627,3 +672,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -646,3 +692,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -661,3 +708,4 @@ return <input onBlur={handleBlur} style={{':focus': {color: 'red'}}} />;
		it('ignores callback refs', () => {
		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -689,3 +737,4 @@ return (

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -972,3 +1021,4 @@ return <div style={{}} />;

		@Radium class TestComponent extends Component {
		@Radium
		class TestComponent extends Component {
		render() {
		@@ -989,9 +1039,15 @@ return <div style={{}} />;

		@Radium class ParentComponent extends Component {
		@Radium
		class ParentComponent extends Component {
		render() {
		return <div style={{}}><ChildComponent /></div>;
		return (
		<div style={{}}>
		<ChildComponent />
		</div>
		);
		}
		}

		@Radium class ChildComponent extends Component {
		@Radium
		class ChildComponent extends Component {
		render() {
		@@ -1051,3 +1107,4 @@ return <div style={{}} />;
		it('handles matching user agent', () => {
		const iOSChrome47 = 'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4 ' +
		const iOSChrome47 =
		'Mozilla/5.0 (iPad; CPU OS 8_0_0 like Mac OS X) AppleWebKit/600.1.4 ' +
		'(KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4';
		@@ -1054,0 +1111,0 @@ const webkitFlex = '-webkit-flex';

15

src/__tests__/resolve-styles-test.js

		@@ -515,3 +515,4 @@ import React from 'react';
		const createMultiPseudoTest = function(pseudoStyles, onHandlers) {
		const name = 'applies pseudo styles in the defined order: ' +
		const name =
		'applies pseudo styles in the defined order: ' +
		pseudoStyles.map(pseudo => pseudo.name).join(', ') +
		@@ -558,3 +559,7 @@ ' when handlers called in order: ' +
		const component = genComponent(initialState);
		const renderedElement = <div><div ref="mountedDiv" /></div>;
		const renderedElement = (
		<div>
		<div ref="mountedDiv" />
		</div>
		);

		@@ -570,3 +575,7 @@ const result = resolveStyles(component, renderedElement).extraStateKeyMap;
		const component = genComponent();
		const renderedElement = <div><span /></div>;
		const renderedElement = (
		<div>
		<span />
		</div>
		);

		@@ -573,0 +582,0 @@ const result = resolveStyles(component, renderedElement).element;

3

src/__tests__/style-component-test.js

		@@ -7,3 +7,4 @@ /* eslint-disable react/prop-types */
		import {expectCSS, getElement} from 'test-helpers';
		const MSIE9_USER_AGENT = 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';
		const MSIE9_USER_AGENT =
		'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';

		@@ -10,0 +11,0 @@ describe('<Style> component', () => {

5

src/append-px-if-needed.js

		@@ -43,6 +43,5 @@ /* @flow */
		): string {
		const needsPxSuffix = !isUnitlessNumber[propertyName] &&
		typeof value === 'number' &&
		value !== 0;
		const needsPxSuffix =
		!isUnitlessNumber[propertyName] && typeof value === 'number' && value !== 0;
		return needsPxSuffix ? value + 'px' : value;
		}

21

src/camel-case-props-to-dash-case.js

		@@ -16,18 +16,15 @@ /* @flow */
		// translate the keys to dash case for rendering to CSS.
		return Object.keys(prefixedStyle).reduce(
		(result, key) => {
		let dashCaseKey = camelCaseToDashCase(key);
		return Object.keys(prefixedStyle).reduce((result, key) => {
		let dashCaseKey = camelCaseToDashCase(key);

		// Fix IE vendor prefix
		if (/^ms-/.test(dashCaseKey)) {
		dashCaseKey = `-${dashCaseKey}`;
		}
		// Fix IE vendor prefix
		if (/^ms-/.test(dashCaseKey)) {
		dashCaseKey = `-${dashCaseKey}`;
		}

		result[dashCaseKey] = prefixedStyle[key];
		return result;
		},
		{}
		);
		result[dashCaseKey] = prefixedStyle[key];
		return result;
		}, {});
		};

		export default camelCasePropsToDashCase;

4

src/components/style-root.js

		@@ -14,4 +14,4 @@ /* @flow */
		if (!instance._radiumStyleKeeper) {
		const userAgent = (instance.props.radiumConfig &&
		instance.props.radiumConfig.userAgent) \|\|
		const userAgent =
		(instance.props.radiumConfig && instance.props.radiumConfig.userAgent) \|\|
		(instance.context._radiumConfig &&
		@@ -18,0 +18,0 @@ instance.context._radiumConfig.userAgent);

69

src/components/style.js

		@@ -32,4 +32,4 @@ /* @flow */
		_buildStyles(styles: Object): string {
		const userAgent = (this.props.radiumConfig &&
		this.props.radiumConfig.userAgent) \|\|
		const userAgent =
		(this.props.radiumConfig && this.props.radiumConfig.userAgent) \|\|
		(this.context &&
		@@ -40,12 +40,9 @@ this.context._radiumConfig &&
		const {scopeSelector} = this.props;
		const rootRules = Object.keys(styles).reduce(
		(accumulator, selector) => {
		if (typeof styles[selector] !== 'object') {
		accumulator[selector] = styles[selector];
		}
		const rootRules = Object.keys(styles).reduce((accumulator, selector) => {
		if (typeof styles[selector] !== 'object') {
		accumulator[selector] = styles[selector];
		}

		return accumulator;
		},
		{}
		);
		return accumulator;
		}, {});
		const rootStyles = Object.keys(rootRules).length
		@@ -55,37 +52,33 @@ ? cssRuleSetToString(scopeSelector \|\| '', rootRules, userAgent)

		return rootStyles +
		Object.keys(styles).reduce(
		(accumulator, selector) => {
		const rules = styles[selector];
		return (
		rootStyles +
		Object.keys(styles).reduce((accumulator, selector) => {
		const rules = styles[selector];

		if (selector === 'mediaQueries') {
		accumulator += this._buildMediaQueryString(rules);
		} else if (typeof styles[selector] === 'object') {
		const completeSelector = scopeSelector
		? selector
		.split(',')
		.map(part => scopeSelector + ' ' + part.trim())
		.join(',')
		: selector;
		if (selector === 'mediaQueries') {
		accumulator += this._buildMediaQueryString(rules);
		} else if (typeof styles[selector] === 'object') {
		const completeSelector = scopeSelector
		? selector
		.split(',')
		.map(part => scopeSelector + ' ' + part.trim())
		.join(',')
		: selector;

		accumulator += cssRuleSetToString(
		completeSelector,
		rules,
		userAgent
		);
		}
		accumulator += cssRuleSetToString(completeSelector, rules, userAgent);
		}

		return accumulator;
		},
		''
		);
		return accumulator;
		}, '')
		);
		}

		_buildMediaQueryString(
		stylesByMediaQuery: {[mediaQuery: string]: Object}
		): string {
		_buildMediaQueryString(stylesByMediaQuery: {
		[mediaQuery: string]: Object
		}): string {
		let mediaQueryString = '';

		Object.keys(stylesByMediaQuery).forEach(query => {
		mediaQueryString += '@media ' +
		mediaQueryString +=
		'@media ' +
		query +
		@@ -92,0 +85,0 @@ '{' +

3

src/css-rule-set-to-string.js

		@@ -26,3 +26,4 @@ /* @flow */
		const rulesWithPx = mapObject(rules, (value, key) =>
		appendPxIfNeeded(key, value));
		appendPxIfNeeded(key, value)
		);
		const prefixedRules = getPrefixedStyle(rulesWithPx, userAgent);
		@@ -29,0 +30,0 @@ const cssPrefixedRules = camelCasePropsToDashCase(prefixedRules);

237

src/enhancer.js

		@@ -42,6 +42,8 @@ /* @flow */

		return !component.isReactComponent &&
		return (
		!component.isReactComponent &&
		!proto.isReactComponent &&
		!component.render &&
		!proto.render;
		!proto.render
		);
		}
		@@ -52,61 +54,41 @@
		function isNativeClass(component: Function): boolean {
		return typeof component === 'function' &&
		/^\s*class\s+/.test(component.toString());
		return (
		typeof component === 'function' && /^\s*class\s+/.test(component.toString())
		);
		}

		export default function enhanceWithRadium(
		configOrComposedComponent: Class<any> \| constructor \| Function \| Object,
		config?: Object = {}
		): constructor {
		if (typeof configOrComposedComponent !== 'function') {
		const newConfig = {...config, ...configOrComposedComponent};
		return function(configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}
		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		function copyArrowFuncs(enhancedSelf: Object, ComposedComponent: constructor) {
		RADIUM_METHODS.forEach(name => {
		const thisDesc = Object.getOwnPropertyDescriptor(enhancedSelf, name);
		const thisMethod = (thisDesc \|\| {}).value;
		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}
		const radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		const radiumProtoMethod = (radiumDesc \|\| {}).value;
		const superProtoMethod = ComposedComponent.prototype[name];
		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(ComposedComponent.prototype, name, thisDesc);
		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete enhancedSelf[name];
		}
		});
		}

		const component: Function = configOrComposedComponent;
		let ComposedComponent: constructor = component;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(ComposedComponent)) {
		ComposedComponent = (function(OrigComponent): constructor {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		const obj = Reflect.construct(
		OrigComponent,
		arguments,
		this.constructor
		);

		return obj;
		}

		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);

		return NewComponent;
		})(ComposedComponent);
		}

		// Handle stateless components
		if (isStateless(ComposedComponent)) {
		ComposedComponent = class extends Component<any, Object> {
		render() {
		return component(this.props, this.context);
		}
		};

		ComposedComponent.displayName = component.displayName \|\| component.name;
		}

		// Shallow copy composed if still original (we may mutate later).
		if (ComposedComponent === component) {
		ComposedComponent = class extends ComposedComponent {};
		}

		function createEnhancedComponent(
		origComponent: Function,
		ComposedComponent: constructor,
		config?: Object
		) {
		class RadiumEnhancer extends ComposedComponent {
		@@ -134,32 +116,4 @@ static _isRadiumEnhanced = true;

		// Handle es7 arrow functions on React class method names by detecting
		// and transfering the instance method to original class prototype.
		// (Using a copy of the class).
		// See: https://github.com/FormidableLabs/radium/issues/738
		RADIUM_METHODS.forEach(name => {
		const thisDesc = Object.getOwnPropertyDescriptor(self, name);
		const thisMethod = (thisDesc \|\| {}).value;

		// Only care if have instance method.
		if (!thisMethod) {
		return;
		}

		const radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
		const radiumProtoMethod = radiumDesc.value;
		const superProtoMethod = ComposedComponent.prototype[name];

		// Allow transfer when:
		// 1. have an instance method
		// 2. the super class prototype doesn't have any method
		// 3. it is not already the radium prototype's
		if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
		// Transfer dynamic render component to Component prototype (copy).
		Object.defineProperty(ComposedComponent.prototype, name, thisDesc);

		// Remove instance property, leaving us to have a contrived
		// inheritance chain of (1) radium, (2) superclass.
		delete self[name];
		}
		});
		// Handle es7 arrow functions on React class method
		copyArrowFuncs(self, ComposedComponent);
		}
		@@ -179,8 +133,8 @@
		if (this._radiumMediaQueryListenersByQuery) {
		Object.keys(this._radiumMediaQueryListenersByQuery).forEach(
		function(query) {
		this._radiumMediaQueryListenersByQuery[query].remove();
		},
		this
		);
		Object.keys(this._radiumMediaQueryListenersByQuery).forEach(function(
		query
		) {
		this._radiumMediaQueryListenersByQuery[query].remove();
		},
		this);
		}
		@@ -198,3 +152,3 @@ }

		const newContext = {...superChildContext};
		const newContext: Object = {...superChildContext};

		@@ -210,5 +164,4 @@ if (this.props.radiumConfig) {
		const renderedElement = super.render();
		let currentConfig = this.props.radiumConfig \|\|
		this.context._radiumConfig \|\|
		config;
		let currentConfig =
		this.props.radiumConfig \|\| this.context._radiumConfig \|\| config;

		@@ -222,2 +175,3 @@ if (config && currentConfig !== config) {

		// do the style and interaction work
		const {extraStateKeyMap, element} = resolveStyles(
		@@ -234,5 +188,5 @@ this,
		/* eslint-disable react/no-did-update-set-state, no-unused-vars */
		componentDidUpdate(prevProps, prevState) {
		componentDidUpdate(prevProps, prevState, snapshot) {
		if (super.componentDidUpdate) {
		super.componentDidUpdate.call(this, prevProps, prevState);
		super.componentDidUpdate.call(this, prevProps, prevState, snapshot);
		}
		@@ -266,3 +220,3 @@
		// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
		copyProperties(component, RadiumEnhancer);
		copyProperties(origComponent, RadiumEnhancer);

		@@ -276,2 +230,3 @@ if (process.env.NODE_ENV !== 'production') {

		// add Radium propTypes to enhanced component's propTypes
		if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {
		@@ -284,6 +239,7 @@ RadiumEnhancer.propTypes = {

		RadiumEnhancer.displayName = component.displayName \|\|
		component.name \|\|
		'Component';
		// copy display name to enhanced component
		RadiumEnhancer.displayName =
		origComponent.displayName \|\| origComponent.name \|\| 'Component';

		// handle context
		RadiumEnhancer.contextTypes = {
		@@ -303,1 +259,74 @@ ...RadiumEnhancer.contextTypes,
		}

		function createComposedFromStatelessFunc(
		ComposedComponent: constructor,
		component: Function
		) {
		ComposedComponent = class extends Component<any, Object> {
		render() {
		return component(this.props, this.context);
		}
		};
		ComposedComponent.displayName = component.displayName \|\| component.name;
		return ComposedComponent;
		}

		function createComposedFromNativeClass(ComposedComponent: constructor) {
		ComposedComponent = (function(OrigComponent): constructor {
		function NewComponent() {
		// Use Reflect.construct to simulate 'new'
		const obj = Reflect.construct(OrigComponent, arguments, this.constructor);
		return obj;
		}
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent.prototype, OrigComponent.prototype);
		// $FlowFixMe
		Reflect.setPrototypeOf(NewComponent, OrigComponent);
		return NewComponent;
		})(ComposedComponent);
		return ComposedComponent;
		}

		export default function enhanceWithRadium(
		configOrComposedComponent: Class<any> \| constructor \| Function \| Object,
		config?: Object = {}
		): constructor {
		if (typeof configOrComposedComponent !== 'function') {
		return createFactoryFromConfig(config, configOrComposedComponent);
		}

		const origComponent: Function = configOrComposedComponent;
		let ComposedComponent: constructor = origComponent;

		// Radium is transpiled in npm, so it isn't really using es6 classes at
		// runtime. However, the user of Radium might be. In this case we have
		// to maintain forward compatibility with native es classes.
		if (isNativeClass(ComposedComponent)) {
		ComposedComponent = createComposedFromNativeClass(ComposedComponent);
		}

		// Handle stateless components
		if (isStateless(ComposedComponent)) {
		ComposedComponent = createComposedFromStatelessFunc(
		ComposedComponent,
		origComponent
		);
		}

		// Shallow copy composed if still original (we may mutate later).
		if (ComposedComponent === origComponent) {
		ComposedComponent = class extends ComposedComponent {};
		}

		return createEnhancedComponent(origComponent, ComposedComponent, config);
		}

		function createFactoryFromConfig(
		config: Object,
		configOrComposedComponent: Object
		) {
		const newConfig = {...config, ...configOrComposedComponent};
		return function(configOrComponent) {
		return enhanceWithRadium(configOrComponent, newConfig);
		};
		}

7

src/get-radium-style-state.js

		/* @flow */

		const getRadiumStyleState = function(component: any) {
		return component._lastRadiumState \|\|
		(component.state && component.state._radiumStyleState) \|\| {};
		return (
		component._lastRadiumState \|\|
		(component.state && component.state._radiumStyleState) \|\|
		{}
		);
		};

		export default getRadiumStyleState;

6

src/get-state.js

		@@ -12,8 +12,10 @@ /* @flow */

		return !!state &&
		return (
		!!state &&
		!!state._radiumStyleState &&
		!!state._radiumStyleState[key] &&
		state._radiumStyleState[key][value];
		state._radiumStyleState[key][value]
		);
		};

		export default getState;

2

src/hash.js

		@@ -15,3 +15,3 @@ /* @flow */
		while (index) {
		hashValue = hashValue * 33 ^ text.charCodeAt(index);
		hashValue = (hashValue * 33) ^ text.charCodeAt(index);
		index -= 1;
		@@ -18,0 +18,0 @@ }

11

src/keyframes.js

		@@ -22,8 +22,9 @@ /* @flow */
		.map(percentage =>
		cssRuleSetToString(percentage, keyframeRules[percentage], userAgent))
		cssRuleSetToString(percentage, keyframeRules[percentage], userAgent)
		)
		.join('\n');
		const animationName = (name ? name + '-' : '') +
		'radium-animation-' +
		hash(rules);
		const css = '@' +
		const animationName =
		(name ? name + '-' : '') + 'radium-animation-' + hash(rules);
		const css =
		'@' +
		keyframesPrefixed +
		@@ -30,0 +31,0 @@ ' ' +

11

src/map-object.js

		@@ -7,9 +7,6 @@ /* @flow */
		): {[key: string]: TNext} {
		return Object.keys(object).reduce(
		(result, key) => {
		result[key] = mapper(object[key], key);
		return result;
		},
		{}
		);
		return Object.keys(object).reduce((result, key) => {
		result[key] = mapper(object[key], key);
		return result;
		}, {});
		}

6

src/merge-styles.js

		export function isNestedStyle(value) {
		// Don't merge objects overriding toString, since they should be converted
		// to string values.
		return value &&
		return (
		value &&
		value.constructor === Object &&
		value.toString === Object.prototype.toString;
		value.toString === Object.prototype.toString
		);
		}
		@@ -8,0 +10,0 @@

3

src/plugins/index.js

		@@ -11,4 +11,3 @@ /** @flow */
		import removeNestedStylesPlugin from './remove-nested-styles-plugin';
		import resolveInteractionStylesPlugin
		from './resolve-interaction-styles-plugin';
		import resolveInteractionStylesPlugin from './resolve-interaction-styles-plugin';
		import resolveMediaQueriesPlugin from './resolve-media-queries-plugin';
		@@ -15,0 +14,0 @@ import visitedPlugin from './visited-plugin';

35

src/plugins/keyframes-plugin.js

		@@ -16,25 +16,22 @@ /* @flow */

		const newStyle = Object.keys(style).reduce(
		(newStyleInProgress, key) => {
		let value = style[key];
		const isKeyframeArray = Array.isArray(value);
		const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
		let value = style[key];
		const isKeyframeArray = Array.isArray(value);

		if (
		key === 'animationName' &&
		value &&
		(value.__radiumKeyframes \|\| isKeyframeArray)
		) {
		if (isKeyframeArray) {
		value = value.map(processKeyframeStyle).join(', ');
		} else {
		value = processKeyframeStyle(value);
		}
		if (
		key === 'animationName' &&
		value &&
		(value.__radiumKeyframes \|\| isKeyframeArray)
		) {
		if (isKeyframeArray) {
		value = value.map(processKeyframeStyle).join(', ');
		} else {
		value = processKeyframeStyle(value);
		}
		}

		newStyleInProgress[key] = value;
		return newStyleInProgress;
		},
		{}
		);
		newStyleInProgress[key] = value;
		return newStyleInProgress;
		}, {});
		return {style: newStyle};
		}

10

src/plugins/merge-style-array-plugin.js

		@@ -7,8 +7,6 @@ /* @flow */
		// Ignores non-objects, so you can do `this.state.isCool && styles.cool`.
		const mergeStyleArrayPlugin = function(
		{
		style,
		mergeStyles
		}: PluginConfig
		): PluginResult {
		const mergeStyleArrayPlugin = function({
		style,
		mergeStyles
		}: PluginConfig): PluginResult {
		// eslint-disable-line no-shadow
		@@ -15,0 +13,0 @@ const newStyle = Array.isArray(style) ? mergeStyles(style) : style;

27

src/plugins/remove-nested-styles-plugin.js

+@@ -5,19 +5,14 @@ /** @flow */
+export default function removeNestedStyles(
+    isNestedStyle,
+    style
+  }: PluginConfig
+): PluginResult {
+export default function removeNestedStyles({
+  isNestedStyle,
+  style
+}: PluginConfig): PluginResult {
+  // eslint-disable-line no-shadow
+  const newStyle = Object.keys(style).reduce(
+    (newStyleInProgress, key) => {
+      const value = style[key];
+      if (!isNestedStyle(value)) {
+        newStyleInProgress[key] = value;
+      return newStyleInProgress;
+    },
+    {}
+  );
+  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
+    const value = style[key];
+    if (!isNestedStyle(value)) {
+      newStyleInProgress[key] = value;
+    return newStyleInProgress;
+  }, {});
+@@ -24,0 +19,0 @@ return {

33

src/plugins/resolve-interaction-styles-plugin.js

		@@ -8,5 +8,7 @@ /** @flow */
		const _isInteractiveStyleField = function(styleFieldName) {
		return styleFieldName === ':hover' \|\|
		return (
		styleFieldName === ':hover' \|\|
		styleFieldName === ':active' \|\|
		styleFieldName === ':focus';
		styleFieldName === ':focus'
		);
		};
		@@ -92,9 +94,9 @@
		() => {
		Object.keys(
		getComponentField('state')._radiumStyleState
		).forEach(key => {
		if (getState(':active', key) === 'viamousedown') {
		setState(':active', false, key);
		Object.keys(getComponentField('state')._radiumStyleState).forEach(
		key => {
		if (getState(':active', key) === 'viamousedown') {
		setState(':active', false, key);
		}
		}
		});
		);
		}
		@@ -114,11 +116,8 @@ );
		// Remove interactive styles
		newStyle = Object.keys(newStyle).reduce(
		(styleWithoutInteractions, name) => {
		if (!_isInteractiveStyleField(name) && name !== ':disabled') {
		styleWithoutInteractions[name] = newStyle[name];
		}
		return styleWithoutInteractions;
		},
		{}
		);
		newStyle = Object.keys(newStyle).reduce((styleWithoutInteractions, name) => {
		if (!_isInteractiveStyleField(name) && name !== ':disabled') {
		styleWithoutInteractions[name] = newStyle[name];
		}
		return styleWithoutInteractions;
		}, {});

		@@ -125,0 +124,0 @@ return {

181

src/plugins/resolve-media-queries-plugin.js

		@@ -9,6 +9,7 @@ /** @flow */
		if (_windowMatchMedia === undefined) {
		_windowMatchMedia = (!!ExecutionEnvironment.canUseDOM &&
		!!window &&
		!!window.matchMedia &&
		(mediaQueryString => window.matchMedia(mediaQueryString))) \|\|
		_windowMatchMedia =
		(!!ExecutionEnvironment.canUseDOM &&
		!!window &&
		!!window.matchMedia &&
		(mediaQueryString => window.matchMedia(mediaQueryString))) \|\|
		null;
		@@ -23,66 +24,60 @@ }
		): Object {
		return Object.keys(obj).filter(key => predicate(obj[key], key)).reduce((
		result,
		key
		) => {
		result[key] = obj[key];
		return result;
		}, {});
		return Object.keys(obj)
		.filter(key => predicate(obj[key], key))
		.reduce((result, key) => {
		result[key] = obj[key];
		return result;
		}, {});
		}

		function _removeMediaQueries(style) {
		return Object.keys(style).reduce(
		(styleWithoutMedia, key) => {
		if (key.indexOf('@media') !== 0) {
		styleWithoutMedia[key] = style[key];
		}
		return styleWithoutMedia;
		},
		{}
		);
		return Object.keys(style).reduce((styleWithoutMedia, key) => {
		if (key.indexOf('@media') !== 0) {
		styleWithoutMedia[key] = style[key];
		}
		return styleWithoutMedia;
		}, {});
		}

		function _topLevelRulesToCSS(
		{
		addCSS,
		appendImportantToEachValue,
		cssRuleSetToString,
		hash,
		isNestedStyle,
		style,
		userAgent
		}
		) {
		function _topLevelRulesToCSS({
		addCSS,
		appendImportantToEachValue,
		cssRuleSetToString,
		hash,
		isNestedStyle,
		style,
		userAgent
		}) {
		let className = '';
		Object.keys(style).filter(name => name.indexOf('@media') === 0).map(query => {
		const topLevelRules = appendImportantToEachValue(
		_filterObject(style[query], value => !isNestedStyle(value))
		);
		Object.keys(style)
		.filter(name => name.indexOf('@media') === 0)
		.map(query => {
		const topLevelRules = appendImportantToEachValue(
		_filterObject(style[query], value => !isNestedStyle(value))
		);

		if (!Object.keys(topLevelRules).length) {
		return;
		}
		if (!Object.keys(topLevelRules).length) {
		return;
		}

		const ruleCSS = cssRuleSetToString('', topLevelRules, userAgent);
		const ruleCSS = cssRuleSetToString('', topLevelRules, userAgent);

		// CSS classes cannot start with a number
		const mediaQueryClassName = 'rmq-' + hash(query + ruleCSS);
		const css = query + '{ .' + mediaQueryClassName + ruleCSS + '}';
		// CSS classes cannot start with a number
		const mediaQueryClassName = 'rmq-' + hash(query + ruleCSS);
		const css = query + '{ .' + mediaQueryClassName + ruleCSS + '}';

		addCSS(css);
		addCSS(css);

		className += (className ? ' ' : '') + mediaQueryClassName;
		});
		className += (className ? ' ' : '') + mediaQueryClassName;
		});
		return className;
		}

		function _subscribeToMediaQuery(
		{
		listener,
		listenersByQuery,
		matchMedia,
		mediaQueryListsByQuery,
		query
		}
		) {
		function _subscribeToMediaQuery({
		listener,
		listenersByQuery,
		matchMedia,
		mediaQueryListsByQuery,
		query
		}) {
		query = query.replace('@media ', '');
		@@ -92,3 +87,3 @@
		if (!mql && matchMedia) {
		mediaQueryListsByQuery[query] = (mql = matchMedia(query));
		mediaQueryListsByQuery[query] = mql = matchMedia(query);
		}
		@@ -108,19 +103,17 @@

		export default function resolveMediaQueries(
		{
		ExecutionEnvironment,
		addCSS,
		appendImportantToEachValue,
		config,
		cssRuleSetToString,
		getComponentField,
		getGlobalState,
		hash,
		isNestedStyle,
		mergeStyles,
		props,
		setState,
		style
		}: PluginConfig
		): PluginResult {
		export default function resolveMediaQueries({
		ExecutionEnvironment,
		addCSS,
		appendImportantToEachValue,
		config,
		cssRuleSetToString,
		getComponentField,
		getGlobalState,
		hash,
		isNestedStyle,
		mergeStyles,
		props,
		setState,
		style
		}: PluginConfig): PluginResult {
		// eslint-disable-line no-shadow
		@@ -140,9 +133,9 @@ let newStyle = _removeMediaQueries(style);
		? {
		className: mediaQueryClassNames +
		(props.className ? ' ' + props.className : '')
		className:
		mediaQueryClassNames + (props.className ? ' ' + props.className : '')
		}
		: null;

		const matchMedia: ?MatchMediaType = config.matchMedia \|\|
		_getWindowMatchMedia(ExecutionEnvironment);
		const matchMedia: ?MatchMediaType =
		config.matchMedia \|\| _getWindowMatchMedia(ExecutionEnvironment);

		@@ -161,23 +154,25 @@ if (!matchMedia) {

		Object.keys(style).filter(name => name.indexOf('@media') === 0).map(query => {
		const nestedRules = _filterObject(style[query], isNestedStyle);
		Object.keys(style)
		.filter(name => name.indexOf('@media') === 0)
		.map(query => {
		const nestedRules = _filterObject(style[query], isNestedStyle);

		if (!Object.keys(nestedRules).length) {
		return;
		}
		if (!Object.keys(nestedRules).length) {
		return;
		}

		const mql = _subscribeToMediaQuery({
		listener: () => setState(query, mql.matches, '_all'),
		listenersByQuery,
		matchMedia,
		mediaQueryListsByQuery,
		query
		const mql = _subscribeToMediaQuery({
		listener: () => setState(query, mql.matches, '_all'),
		listenersByQuery,
		matchMedia,
		mediaQueryListsByQuery,
		query
		});

		// Apply media query states
		if (mql.matches) {
		newStyle = mergeStyles([newStyle, nestedRules]);
		}
		});

		// Apply media query states
		if (mql.matches) {
		newStyle = mergeStyles([newStyle, nestedRules]);
		}
		});

		return {
		@@ -184,0 +179,0 @@ componentFields: {

51

src/plugins/visited-plugin.js

		@@ -5,35 +5,30 @@ /** @flow */

		export default function visited(
		{
		addCSS,
		appendImportantToEachValue,
		config,
		cssRuleSetToString,
		hash,
		props,
		style
		}: PluginConfig
		): PluginResult {
		export default function visited({
		addCSS,
		appendImportantToEachValue,
		config,
		cssRuleSetToString,
		hash,
		props,
		style
		}: PluginConfig): PluginResult {
		// eslint-disable-line no-shadow
		let className = props.className;

		const newStyle = Object.keys(style).reduce(
		(newStyleInProgress, key) => {
		let value = style[key];
		if (key === ':visited') {
		value = appendImportantToEachValue(value);
		const ruleCSS = cssRuleSetToString('', value, config.userAgent);
		const visitedClassName = 'rad-' + hash(ruleCSS);
		const css = '.' + visitedClassName + ':visited' + ruleCSS;
		const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
		let value = style[key];
		if (key === ':visited') {
		value = appendImportantToEachValue(value);
		const ruleCSS = cssRuleSetToString('', value, config.userAgent);
		const visitedClassName = 'rad-' + hash(ruleCSS);
		const css = '.' + visitedClassName + ':visited' + ruleCSS;

		addCSS(css);
		className = (className ? className + ' ' : '') + visitedClassName;
		} else {
		newStyleInProgress[key] = value;
		}
		addCSS(css);
		className = (className ? className + ' ' : '') + visitedClassName;
		} else {
		newStyleInProgress[key] = value;
		}

		return newStyleInProgress;
		},
		{}
		);
		return newStyleInProgress;
		}, {});

		@@ -40,0 +35,0 @@ return {

87

src/prefixer.js

		@@ -9,4 +9,3 @@ /**
		import createStaticPrefixer from 'inline-style-prefixer/static/createPrefixer';
		import createDynamicPrefixer
		from 'inline-style-prefixer/dynamic/createPrefixer';
		import createDynamicPrefixer from 'inline-style-prefixer/dynamic/createPrefixer';
		import ExecutionEnvironment from 'exenv';
		@@ -23,20 +22,17 @@
		function transformValues(style) {
		return Object.keys(style).reduce(
		(newStyle, key) => {
		let value = style[key];
		if (Array.isArray(value)) {
		value = value.join(';' + key + ':');
		} else if (
		value &&
		typeof value === 'object' &&
		typeof value.toString === 'function'
		) {
		value = value.toString();
		}
		return Object.keys(style).reduce((newStyle, key) => {
		let value = style[key];
		if (Array.isArray(value)) {
		value = value.join(';' + key + ':');
		} else if (
		value &&
		typeof value === 'object' &&
		typeof value.toString === 'function'
		) {
		value = value.toString();
		}

		newStyle[key] = value;
		return newStyle;
		},
		{}
		);
		newStyle[key] = value;
		return newStyle;
		}, {});
		}
		@@ -57,32 +53,29 @@
		function flattenStyleValues(style) {
		return Object.keys(style).reduce(
		(newStyle, key) => {
		let val = style[key];
		if (Array.isArray(val)) {
		if (ExecutionEnvironment.canUseDOM) {
		// For the browser, when faced with multiple values, we just take
		// the last one, which is the original passed in value before
		// prefixing. This _should_ work, because `inline-style-prefixer`
		// we're just passing through what would happen without ISP.
		return Object.keys(style).reduce((newStyle, key) => {
		let val = style[key];
		if (Array.isArray(val)) {
		if (ExecutionEnvironment.canUseDOM) {
		// For the browser, when faced with multiple values, we just take
		// the last one, which is the original passed in value before
		// prefixing. This _should_ work, because `inline-style-prefixer`
		// we're just passing through what would happen without ISP.

		val = val[val.length - 1].toString();
		} else {
		// For the server, we just concatenate things together and convert
		// the style object values into a hacked-up string of like `display:
		// "-webkit-flex;display:flex"` that will SSR render correctly to like
		// `"display:-webkit-flex;display:flex"` but would otherwise be
		// totally invalid values.
		val = val[val.length - 1].toString();
		} else {
		// For the server, we just concatenate things together and convert
		// the style object values into a hacked-up string of like `display:
		// "-webkit-flex;display:flex"` that will SSR render correctly to like
		// `"display:-webkit-flex;display:flex"` but would otherwise be
		// totally invalid values.

		// We convert keys to dash-case only for the serialize values and
		// leave the real key camel-cased so it's as expected to React and
		// other parts of the processing chain.
		val = val.join(`;${camelCaseToDashCase(key)}:`);
		}
		// We convert keys to dash-case only for the serialize values and
		// leave the real key camel-cased so it's as expected to React and
		// other parts of the processing chain.
		val = val.join(`;${camelCaseToDashCase(key)}:`);
		}
		}

		newStyle[key] = val;
		return newStyle;
		},
		{}
		);
		newStyle[key] = val;
		return newStyle;
		}, {});
		}
		@@ -100,4 +93,4 @@
		} {
		const actualUserAgent = userAgent \|\|
		(global && global.navigator && global.navigator.userAgent);
		const actualUserAgent =
		userAgent \|\| (global && global.navigator && global.navigator.userAgent);

		@@ -104,0 +97,0 @@ if (process.env.NODE_ENV !== 'production') {

136

src/resolve-styles.js

		@@ -54,11 +54,9 @@ /* @flow */

		const _resolveChildren = function(
		{
		children,
		component,
		config,
		existingKeyMap,
		extraStateKeyMap
		}
		) {
		const _resolveChildren = function({
		children,
		component,
		config,
		existingKeyMap,
		extraStateKeyMap
		}) {
		if (!children) {
		@@ -135,11 +133,9 @@ return children;
		// Recurse over props, just like children
		const _resolveProps = function(
		{
		component,
		config,
		existingKeyMap,
		props,
		extraStateKeyMap
		}
		) {
		const _resolveProps = function({
		component,
		config,
		existingKeyMap,
		props,
		extraStateKeyMap
		}) {
		let newProps = props;
		@@ -173,9 +169,7 @@

		const _buildGetKey = function(
		{
		componentName,
		existingKeyMap,
		renderedElement
		}
		) {
		const _buildGetKey = function({
		componentName,
		existingKeyMap,
		renderedElement
		}) {
		// We need a unique key to correlate state changes due to user interaction
		@@ -200,3 +194,4 @@ // with the rendered element, so we know to apply the proper interactive
		} else if (renderedElement.type.constructor) {
		elementName = renderedElement.type.constructor.displayName \|\|
		elementName =
		renderedElement.type.constructor.displayName \|\|
		renderedElement.type.constructor.name;
		@@ -242,11 +237,9 @@ }

		const _runPlugins = function(
		{
		component,
		config,
		existingKeyMap,
		props,
		renderedElement
		}
		) {
		const _runPlugins = function({
		component,
		config,
		existingKeyMap,
		props,
		renderedElement
		}) {
		// Don't run plugins if renderedElement is not a simple ReactDOMElement or has
		@@ -266,4 +259,4 @@ // no style.

		const componentName = component.constructor.displayName \|\|
		component.constructor.name;
		const componentName =
		component.constructor.displayName \|\| component.constructor.name;
		const getKey = _buildGetKey({
		@@ -282,4 +275,4 @@ renderedElement,
		const addCSS = css => {
		const styleKeeper = component._radiumStyleKeeper \|\|
		component.context._radiumStyleKeeper;
		const styleKeeper =
		component._radiumStyleKeeper \|\| component.context._radiumStyleKeeper;
		if (!styleKeeper) {
		@@ -305,25 +298,27 @@ if (__isTestModeEnabled) {
		plugins.forEach(plugin => {
		const result = plugin({
		ExecutionEnvironment,
		addCSS,
		appendImportantToEachValue,
		componentName,
		config,
		cssRuleSetToString,
		getComponentField,
		getGlobalState,
		getState: componentGetState,
		hash,
		mergeStyles,
		props: newProps,
		setState,
		isNestedStyle,
		style: newStyle
		}) \|\| {};
		const result =
		plugin({
		ExecutionEnvironment,
		addCSS,
		appendImportantToEachValue,
		componentName,
		config,
		cssRuleSetToString,
		getComponentField,
		getGlobalState,
		getState: componentGetState,
		hash,
		mergeStyles,
		props: newProps,
		setState,
		isNestedStyle,
		style: newStyle
		}) \|\| {};

		newStyle = result.style \|\| newStyle;

		newProps = result.props && Object.keys(result.props).length
		? {...newProps, ...result.props}
		: newProps;
		newProps =
		result.props && Object.keys(result.props).length
		? {...newProps, ...result.props}
		: newProps;

		@@ -381,15 +376,12 @@ const newComponentFields = result.componentFields \|\| {};
		const state = getRadiumStyleState(component);
		extraStateKeyMap = Object.keys(state).reduce(
		(acc, key) => {
		// 'main' is the auto-generated key when there is only one element with
		// interactive styles and if a custom key is not assigned. Because of
		// this, it is impossible to know which child is 'main', so we won't
		// count this key when generating our extraStateKeyMap.
		if (key !== 'main') {
		acc[key] = true;
		}
		return acc;
		},
		{}
		);
		extraStateKeyMap = Object.keys(state).reduce((acc, key) => {
		// 'main' is the auto-generated key when there is only one element with
		// interactive styles and if a custom key is not assigned. Because of
		// this, it is impossible to know which child is 'main', so we won't
		// count this key when generating our extraStateKeyMap.
		if (key !== 'main') {
		acc[key] = true;
		}
		return acc;
		}, {});
		}
		@@ -396,0 +388,0 @@

7

src/test-helpers.js

		@@ -20,6 +20,5 @@ import Color from 'color';
		export function getElements(output, tagName) {
		return TestUtils.scryRenderedDOMComponentsWithTag(
		output,
		tagName
		).map(component => ReactDOM.findDOMNode(component));
		return TestUtils.scryRenderedDOMComponentsWithTag(output, tagName).map(
		component => ReactDOM.findDOMNode(component)
		);
		}
		@@ -26,0 +25,0 @@

dist/radium.js

Sorry, the diff of this file is too big to display

dist/radium.min.js

Sorry, the diff of this file is too big to display

radium - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics