radium - npm Package Compare versions

Comparing version 0.18.1 to 0.18.2

CHANGELOG.md

 # Radium Changelog
 
+## 0.18.2 (March 15, 2017)
+
+### Improvements
+- Update `inline-style-prefixer` to v2.0.5 (#880).
+- Use `React.PureComponent` to avoid unnecessary rendering (#868).
+- Update all dependencies
+
 ## 0.18.1 (July 19, 2016)
@@ -4,0 +11,0 @@

docs/faq/README.md

@@ -92,3 +92,3 @@ # Frequently Asked Questions
 ```html
-<script src="https://npmcdn.com/radium/dist/radium.js"></script>
+<script src="https://unpkg.com/radium/dist/radium.js"></script>
 ```
@@ -95,0 +95,0 @@

docs/README.md

 ### Overview
 
-The `radium-docs` [documentation site](http://formidable.com/open-source/radium-test/) source lives here in `/docs`. The `docs/**/docs.js` components are imported into `radium-docs` and deployed from there.
+The `radium-docs` [documentation site](http://formidable.com/open-source/radium/) source lives here in `/docs`. The `docs/**/docs.js` components are imported into `radium-docs` and deployed from there.
 
@@ -5,0 +5,0 @@ ### Deployment

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

@@ -6,4 +6,2 @@ 'use strict';
 });
-
-
 var _camelCaseRegex = /([a-z])?([A-Z])/g;
@@ -10,0 +8,0 @@

lib/components/style-root.js

@@ -42,4 +42,4 @@ 'use strict';
 
-var StyleRoot = function (_Component) {
-  _inherits(StyleRoot, _Component);
+var StyleRoot = function (_PureComponent) {
+  _inherits(StyleRoot, _PureComponent);
 
@@ -49,3 +49,3 @@ function StyleRoot() {
 
-    var _this = _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
 
@@ -63,6 +63,5 @@ _getStyleKeeper(_this);
     // Pass down all props except config to the rendered div.
-    var _props = this.props;
-    var radiumConfig = _props.radiumConfig;
-
-    var otherProps = _objectWithoutProperties(_props, ['radiumConfig']);
+    var _props = this.props,
+        radiumConfig = _props.radiumConfig,
+        otherProps = _objectWithoutProperties(_props, ['radiumConfig']);
     /* eslint-enable no-unused-vars */
@@ -79,3 +78,3 @@
   return StyleRoot;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -82,0 +81,0 @@ StyleRoot.contextTypes = {

lib/components/style-sheet.js

@@ -26,4 +26,4 @@ 'use strict';
 
-var StyleSheet = (_temp = _class = function (_Component) {
-  _inherits(StyleSheet, _Component);
+var StyleSheet = (_temp = _class = function (_PureComponent) {
+  _inherits(StyleSheet, _PureComponent);
 
@@ -33,7 +33,11 @@ function StyleSheet() {
 
-    var _this = _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
 
+    _this._onChange = function () {
+      setTimeout(function () {
+        _this._isMounted && _this.setState(_this._getCSSState());
+      }, 0);
+    };
+
     _this.state = _this._getCSSState();
-
-    _this._onChange = _this._onChange.bind(_this);
     return _this;
@@ -59,10 +63,2 @@ }
 
-  StyleSheet.prototype._onChange = function _onChange() {
-    var _this2 = this;
-
-    setTimeout(function () {
-      _this2._isMounted && _this2.setState(_this2._getCSSState());
-    }, 0);
-  };
-
   StyleSheet.prototype.render = function render() {
@@ -73,3 +69,3 @@ return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: this.state.css } });
   return StyleSheet;
-}(_react.Component), _class.contextTypes = {
+}(_react.PureComponent), _class.contextTypes = {
   _radiumStyleKeeper: _react2.default.PropTypes.instanceOf(_styleKeeper2.default)
@@ -76,0 +72,0 @@ }, _temp);

lib/components/style.js

@@ -7,4 +7,6 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+var _class, _temp;
+
 var _cssRuleSetToString = require('../css-rule-set-to-string');
@@ -20,23 +22,20 @@
 
-var Style = _react2.default.createClass({
-  displayName: 'Style',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  propTypes: {
-    radiumConfig: _react.PropTypes.object,
-    rules: _react.PropTypes.object,
-    scopeSelector: _react.PropTypes.string
-  },
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  contextTypes: {
-    _radiumConfig: _react.PropTypes.object
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      scopeSelector: ''
-    };
-  },
-  _buildStyles: function _buildStyles(styles) {
-    var _this = this;
+var Style = (_temp = _class = function (_PureComponent) {
+  _inherits(Style, _PureComponent);
 
+  function Style() {
+    _classCallCheck(this, Style);
+
+    return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
+  }
+
+  Style.prototype._buildStyles = function _buildStyles(styles) {
+    var _this2 = this;
+
     var userAgent = this.props.radiumConfig && this.props.radiumConfig.userAgent || this.context && this.context._radiumConfig && this.context._radiumConfig.userAgent;
@@ -59,3 +58,3 @@
       if (selector === 'mediaQueries') {
-        accumulator += _this._buildMediaQueryString(rules);
+        accumulator += _this2._buildMediaQueryString(rules);
       } else if (_typeof(styles[selector]) === 'object') {
@@ -71,15 +70,17 @@ var completeSelector = scopeSelector ? selector.split(',').map(function (part) {
     }, '');
-  },
-  _buildMediaQueryString: function _buildMediaQueryString(stylesByMediaQuery) {
-    var _this2 = this;
+  };
 
+  Style.prototype._buildMediaQueryString = function _buildMediaQueryString(stylesByMediaQuery) {
+    var _this3 = this;
+
     var mediaQueryString = '';
 
     Object.keys(stylesByMediaQuery).forEach(function (query) {
-      mediaQueryString += '@media ' + query + '{' + _this2._buildStyles(stylesByMediaQuery[query]) + '}';
+      mediaQueryString += '@media ' + query + '{' + _this3._buildStyles(stylesByMediaQuery[query]) + '}';
     });
 
     return mediaQueryString;
-  },
-  render: function render() {
+  };
+
+  Style.prototype.render = function render() {
     if (!this.props.rules) {
@@ -92,6 +93,15 @@ return null;
     return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: styles } });
-  }
-});
+  };
 
+  return Style;
+}(_react.PureComponent), _class.propTypes = {
+  radiumConfig: _react.PropTypes.object,
+  rules: _react.PropTypes.object,
+  scopeSelector: _react.PropTypes.string
+}, _class.contextTypes = {
+  _radiumConfig: _react.PropTypes.object
+}, _class.defaultProps = {
+  scopeSelector: ''
+}, _temp);
 exports.default = Style;
 module.exports = exports['default'];

lib/enhancer.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
-
 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; };
@@ -50,15 +48,9 @@
 
-  var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
   if (typeof configOrComposedComponent !== 'function') {
-    var _ret = function () {
-      var newConfig = _extends({}, config, configOrComposedComponent);
-      return {
-        v: function v(configOrComponent) {
-          return enhanceWithRadium(configOrComponent, newConfig);
-        }
-      };
-    }();
-
-    if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+    var newConfig = _extends({}, config, configOrComposedComponent);
+    return function (configOrComponent) {
+      return enhanceWithRadium(configOrComponent, newConfig);
+    };
   }
@@ -65,0 +57,0 @@

lib/get-state-key.js

@@ -6,4 +6,2 @@ 'use strict';
 });
-
-
 var getStateKey = function getStateKey(elementKey) {
@@ -10,0 +8,0 @@ return elementKey === null || elementKey === undefined ? 'main' : elementKey.toString();

lib/keyframes.js

@@ -34,2 +34,3 @@ 'use strict';
 }
+
 module.exports = exports['default'];

lib/merge-styles.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -44,4 +44,4 @@ exports.isNestedStyle = isNestedStyle;
         var newKey = key;
+        // eslint-disable-next-line no-constant-condition
         while (true) {
-          // eslint-disable-line no-constant-condition
           newKey += ' ';
@@ -48,0 +48,0 @@ if (!result[newKey]) {

lib/plugins/check-props-plugin.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -15,46 +15,44 @@ var _checkProps = function checkProps() {};
 if (process.env.NODE_ENV !== 'production') {
-  (function () {
-    // Warn if you use longhand and shorthand properties in the same style
-    // object.
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
+  // Warn if you use longhand and shorthand properties in the same style
+  // object.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
 
-    var shorthandPropertyExpansions = {
-      'background': ['backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize'],
-      'border': ['borderBottom', 'borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopStyle', 'borderTopWidth', 'borderWidth'],
-      'borderImage': ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'],
-      'borderRadius': ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'],
-      'font': ['fontFamily', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantLigatures', 'fontWeight', 'lineHeight'],
-      'listStyle': ['listStyleImage', 'listStylePosition', 'listStyleType'],
-      'margin': ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
-      'padding': ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
-      'transition': ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction']
-    };
+  var shorthandPropertyExpansions = {
+    background: ['backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize'],
+    border: ['borderBottom', 'borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopStyle', 'borderTopWidth', 'borderWidth'],
+    borderImage: ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'],
+    borderRadius: ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'],
+    font: ['fontFamily', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantLigatures', 'fontWeight', 'lineHeight'],
+    listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
+    margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+    padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+    transition: ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction']
+  };
 
-    _checkProps = function checkProps(config) {
-      var componentName = config.componentName;
-      var style = config.style;
+  _checkProps = function checkProps(config) {
+    var componentName = config.componentName,
+        style = config.style;
 
-      if ((typeof style === 'undefined' ? 'undefined' : _typeof(style)) !== 'object' || !style) {
-        return;
-      }
+    if ((typeof style === 'undefined' ? 'undefined' : _typeof(style)) !== 'object' || !style) {
+      return;
+    }
 
-      var styleKeys = Object.keys(style);
-      styleKeys.forEach(function (styleKey) {
-        if (Array.isArray(shorthandPropertyExpansions[styleKey]) && shorthandPropertyExpansions[styleKey].some(function (sp) {
-          return styleKeys.indexOf(sp) !== -1;
-        })) {
-          if (process.env.NODE_ENV !== 'production') {
-            /* eslint-disable no-console */
-            console.warn('Radium: property "' + styleKey + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. Check the render ' + 'method of ' + componentName + '.', 'See https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.');
-            /* eslint-enable no-console */
-          }
+    var styleKeys = Object.keys(style);
+    styleKeys.forEach(function (styleKey) {
+      if (Array.isArray(shorthandPropertyExpansions[styleKey]) && shorthandPropertyExpansions[styleKey].some(function (sp) {
+        return styleKeys.indexOf(sp) !== -1;
+      })) {
+        if (process.env.NODE_ENV !== 'production') {
+          /* eslint-disable no-console */
+          console.warn('Radium: property "' + styleKey + '" in style object', style, ': do not mix longhand and ' + 'shorthand properties in the same style object. Check the render ' + 'method of ' + componentName + '.', 'See https://github.com/FormidableLabs/radium/issues/95 for more ' + 'information.');
+          /* eslint-enable no-console */
         }
-      });
+      }
+    });
 
-      styleKeys.forEach(function (k) {
-        return _checkProps(_extends({}, config, { style: style[k] }));
-      });
-      return;
-    };
-  })();
+    styleKeys.forEach(function (k) {
+      return _checkProps(_extends({}, config, { style: style[k] }));
+    });
+    return;
+  };
 }
@@ -61,0 +59,0 @@

lib/plugins/keyframes-plugin.js

@@ -7,7 +7,6 @@ 'use strict';
 exports.default = keyframesPlugin;
-function keyframesPlugin(_ref // eslint-disable-line no-shadow
-) {
-  var addCSS = _ref.addCSS;
-  var config = _ref.config;
-  var style = _ref.style;
+function keyframesPlugin(_ref) {
+  var addCSS = _ref.addCSS,
+      config = _ref.config,
+      style = _ref.style;
 
@@ -19,7 +18,6 @@ var newStyle = Object.keys(style).reduce(function (newStyleInProgress, key) {
 
-      var _keyframesValue$__pro = keyframesValue.__process(config.userAgent);
+      var _keyframesValue$__pro = keyframesValue.__process(config.userAgent),
+          animationName = _keyframesValue$__pro.animationName,
+          css = _keyframesValue$__pro.css;
 
-      var animationName = _keyframesValue$__pro.animationName;
-      var css = _keyframesValue$__pro.css;
-
       addCSS(css);
@@ -26,0 +24,0 @@ value = animationName;

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

@@ -11,4 +11,5 @@ 'use strict';
 var mergeStyleArrayPlugin = function mergeStyleArrayPlugin(_ref) {
-  var style = _ref.style;
-  var mergeStyles = _ref.mergeStyles;
+  var style = _ref.style,
+      mergeStyles = _ref.mergeStyles;
+
   // eslint-disable-line no-shadow
@@ -15,0 +16,0 @@ var newStyle = Array.isArray(style) ? mergeStyles(style) : style;

lib/plugins/mouse-up-listener.js

@@ -6,4 +6,2 @@ 'use strict';
 });
-
-
 var _callbacks = [];
@@ -10,0 +8,0 @@ var _mouseUpListenerIsActive = false;

lib/plugins/prefix-plugin.js

@@ -10,6 +10,5 @@ 'use strict';
 
-function prefixPlugin(_ref // eslint-disable-line no-shadow
-) {
-  var config = _ref.config;
-  var style = _ref.style;
+function prefixPlugin(_ref) {
+  var config = _ref.config,
+      style = _ref.style;
 
@@ -16,0 +15,0 @@ var newStyle = (0, _prefixer.getPrefixedStyle)(style, config.userAgent);

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

@@ -8,4 +8,5 @@ 'use strict';
 function removeNestedStyles(_ref) {
-  var isNestedStyle = _ref.isNestedStyle;
-  var style = _ref.style;
+  var isNestedStyle = _ref.isNestedStyle,
+      style = _ref.style;
+
   // eslint-disable-line no-shadow
@@ -24,2 +25,3 @@ var newStyle = Object.keys(style).reduce(function (newStyleInProgress, key) {
 }
+
 module.exports = exports['default'];

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

@@ -18,9 +18,9 @@ 'use strict';
 var resolveInteractionStyles = function resolveInteractionStyles(config) {
-  var ExecutionEnvironment = config.ExecutionEnvironment;
-  var getComponentField = config.getComponentField;
-  var getState = config.getState;
-  var mergeStyles = config.mergeStyles;
-  var props = config.props;
-  var setState = config.setState;
-  var style = config.style;
+  var ExecutionEnvironment = config.ExecutionEnvironment,
+      getComponentField = config.getComponentField,
+      getState = config.getState,
+      mergeStyles = config.mergeStyles,
+      props = config.props,
+      setState = config.setState,
+      style = config.style;
 
@@ -33,61 +33,55 @@
   if (style[':hover']) {
-    (function () {
-      // Always call the existing handler if one is already defined.
-      // This code, and the very similar ones below, could be abstracted a bit
-      // more, but it hurts readability IMO.
-      var existingOnMouseEnter = props.onMouseEnter;
-      newProps.onMouseEnter = function (e) {
-        existingOnMouseEnter && existingOnMouseEnter(e);
-        setState(':hover', true);
-      };
+    // Always call the existing handler if one is already defined.
+    // This code, and the very similar ones below, could be abstracted a bit
+    // more, but it hurts readability IMO.
+    var existingOnMouseEnter = props.onMouseEnter;
+    newProps.onMouseEnter = function (e) {
+      existingOnMouseEnter && existingOnMouseEnter(e);
+      setState(':hover', true);
+    };
 
-      var existingOnMouseLeave = props.onMouseLeave;
-      newProps.onMouseLeave = function (e) {
-        existingOnMouseLeave && existingOnMouseLeave(e);
-        setState(':hover', false);
-      };
-    })();
+    var existingOnMouseLeave = props.onMouseLeave;
+    newProps.onMouseLeave = function (e) {
+      existingOnMouseLeave && existingOnMouseLeave(e);
+      setState(':hover', false);
+    };
   }
 
   if (style[':active']) {
-    (function () {
-      var existingOnMouseDown = props.onMouseDown;
-      newProps.onMouseDown = function (e) {
-        existingOnMouseDown && existingOnMouseDown(e);
-        newComponentFields._lastMouseDown = Date.now();
-        setState(':active', 'viamousedown');
-      };
+    var existingOnMouseDown = props.onMouseDown;
+    newProps.onMouseDown = function (e) {
+      existingOnMouseDown && existingOnMouseDown(e);
+      newComponentFields._lastMouseDown = Date.now();
+      setState(':active', 'viamousedown');
+    };
 
-      var existingOnKeyDown = props.onKeyDown;
-      newProps.onKeyDown = function (e) {
-        existingOnKeyDown && existingOnKeyDown(e);
-        if (e.key === ' ' || e.key === 'Enter') {
-          setState(':active', 'viakeydown');
-        }
-      };
+    var existingOnKeyDown = props.onKeyDown;
+    newProps.onKeyDown = function (e) {
+      existingOnKeyDown && existingOnKeyDown(e);
+      if (e.key === ' ' || e.key === 'Enter') {
+        setState(':active', 'viakeydown');
+      }
+    };
 
-      var existingOnKeyUp = props.onKeyUp;
-      newProps.onKeyUp = function (e) {
-        existingOnKeyUp && existingOnKeyUp(e);
-        if (e.key === ' ' || e.key === 'Enter') {
-          setState(':active', false);
-        }
-      };
-    })();
+    var existingOnKeyUp = props.onKeyUp;
+    newProps.onKeyUp = function (e) {
+      existingOnKeyUp && existingOnKeyUp(e);
+      if (e.key === ' ' || e.key === 'Enter') {
+        setState(':active', false);
+      }
+    };
   }
 
   if (style[':focus']) {
-    (function () {
-      var existingOnFocus = props.onFocus;
-      newProps.onFocus = function (e) {
-        existingOnFocus && existingOnFocus(e);
-        setState(':focus', true);
-      };
+    var existingOnFocus = props.onFocus;
+    newProps.onFocus = function (e) {
+      existingOnFocus && existingOnFocus(e);
+      setState(':focus', true);
+    };
 
-      var existingOnBlur = props.onBlur;
-      newProps.onBlur = function (e) {
-        existingOnBlur && existingOnBlur(e);
-        setState(':focus', false);
-      };
-    })();
+    var existingOnBlur = props.onBlur;
+    newProps.onBlur = function (e) {
+      existingOnBlur && existingOnBlur(e);
+      setState(':focus', false);
+    };
   }
@@ -94,0 +88,0 @@

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

@@ -10,4 +10,2 @@ 'use strict';
 exports.default = resolveMediaQueries;
-
-
 var _windowMatchMedia = void 0;
@@ -42,9 +40,9 @@ function _getWindowMatchMedia(ExecutionEnvironment) {
 function _topLevelRulesToCSS(_ref) {
-  var addCSS = _ref.addCSS;
-  var appendImportantToEachValue = _ref.appendImportantToEachValue;
-  var cssRuleSetToString = _ref.cssRuleSetToString;
-  var hash = _ref.hash;
-  var isNestedStyle = _ref.isNestedStyle;
-  var style = _ref.style;
-  var userAgent = _ref.userAgent;
+  var addCSS = _ref.addCSS,
+      appendImportantToEachValue = _ref.appendImportantToEachValue,
+      cssRuleSetToString = _ref.cssRuleSetToString,
+      hash = _ref.hash,
+      isNestedStyle = _ref.isNestedStyle,
+      style = _ref.style,
+      userAgent = _ref.userAgent;
 
@@ -77,7 +75,7 @@ var className = '';
 function _subscribeToMediaQuery(_ref2) {
-  var listener = _ref2.listener;
-  var listenersByQuery = _ref2.listenersByQuery;
-  var matchMedia = _ref2.matchMedia;
-  var mediaQueryListsByQuery = _ref2.mediaQueryListsByQuery;
-  var query = _ref2.query;
+  var listener = _ref2.listener,
+      listenersByQuery = _ref2.listenersByQuery,
+      matchMedia = _ref2.matchMedia,
+      mediaQueryListsByQuery = _ref2.mediaQueryListsByQuery,
+      query = _ref2.query;
 
@@ -104,15 +102,16 @@ query = query.replace('@media ', '');
 function resolveMediaQueries(_ref3) {
-  var ExecutionEnvironment = _ref3.ExecutionEnvironment;
-  var addCSS = _ref3.addCSS;
-  var appendImportantToEachValue = _ref3.appendImportantToEachValue;
-  var config = _ref3.config;
-  var cssRuleSetToString = _ref3.cssRuleSetToString;
-  var getComponentField = _ref3.getComponentField;
-  var getGlobalState = _ref3.getGlobalState;
-  var hash = _ref3.hash;
-  var isNestedStyle = _ref3.isNestedStyle;
-  var mergeStyles = _ref3.mergeStyles;
-  var props = _ref3.props;
-  var setState = _ref3.setState;
-  var style = _ref3.style;
+  var ExecutionEnvironment = _ref3.ExecutionEnvironment,
+      addCSS = _ref3.addCSS,
+      appendImportantToEachValue = _ref3.appendImportantToEachValue,
+      config = _ref3.config,
+      cssRuleSetToString = _ref3.cssRuleSetToString,
+      getComponentField = _ref3.getComponentField,
+      getGlobalState = _ref3.getGlobalState,
+      hash = _ref3.hash,
+      isNestedStyle = _ref3.isNestedStyle,
+      mergeStyles = _ref3.mergeStyles,
+      props = _ref3.props,
+      setState = _ref3.setState,
+      style = _ref3.style;
+
   // eslint-disable-line no-shadow
@@ -119,0 +118,0 @@ var newStyle = _removeMediaQueries(style);

lib/plugins/visited-plugin.js

@@ -8,9 +8,10 @@ 'use strict';
 function visited(_ref) {
-  var addCSS = _ref.addCSS;
-  var appendImportantToEachValue = _ref.appendImportantToEachValue;
-  var config = _ref.config;
-  var cssRuleSetToString = _ref.cssRuleSetToString;
-  var hash = _ref.hash;
-  var props = _ref.props;
-  var style = _ref.style;
+  var addCSS = _ref.addCSS,
+      appendImportantToEachValue = _ref.appendImportantToEachValue,
+      config = _ref.config,
+      cssRuleSetToString = _ref.cssRuleSetToString,
+      hash = _ref.hash,
+      props = _ref.props,
+      style = _ref.style;
+
   // eslint-disable-line no-shadow
@@ -41,2 +42,3 @@ var className = props.className;
 }
+
 module.exports = exports['default'];

lib/prefixer.js

@@ -7,8 +7,8 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; /**
-                                                                                                                                                                                                                                                   * Based on https://github.com/jsstyles/css-vendor, but without having to
-                                                                                                                                                                                                                                                   * convert between different cases all the time.
-                                                                                                                                                                                                                                                   *
-                                                                                                                                                                                                                                                   * 
-                                                                                                                                                                                                                                                   */
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /**
+                                                                                                                                                                                                                                                                               * Based on https://github.com/jsstyles/css-vendor, but without having to
+                                                                                                                                                                                                                                                                               * convert between different cases all the time.
+                                                                                                                                                                                                                                                                               *
+                                                                                                                                                                                                                                                                               * 
+                                                                                                                                                                                                                                                                               */
 
@@ -15,0 +15,0 @@ exports.getPrefixedKeyframes = getPrefixedKeyframes;

lib/resolve-styles.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -63,6 +63,6 @@ var _appendImportantToEachValue = require('./append-important-to-each-value');
 var _resolveChildren = function _resolveChildren(_ref) {
-  var children = _ref.children;
-  var component = _ref.component;
-  var config = _ref.config;
-  var existingKeyMap = _ref.existingKeyMap;
+  var children = _ref.children,
+      component = _ref.component,
+      config = _ref.config,
+      existingKeyMap = _ref.existingKeyMap;
 
@@ -109,6 +109,6 @@ if (!children) {
 var _resolveProps = function _resolveProps(_ref2) {
-  var component = _ref2.component;
-  var config = _ref2.config;
-  var existingKeyMap = _ref2.existingKeyMap;
-  var props = _ref2.props;
+  var component = _ref2.component,
+      config = _ref2.config,
+      existingKeyMap = _ref2.existingKeyMap,
+      props = _ref2.props;
 
@@ -134,5 +134,5 @@ var newProps = props;
 var _buildGetKey = function _buildGetKey(_ref3) {
-  var componentName = _ref3.componentName;
-  var existingKeyMap = _ref3.existingKeyMap;
-  var renderedElement = _ref3.renderedElement;
+  var componentName = _ref3.componentName,
+      existingKeyMap = _ref3.existingKeyMap,
+      renderedElement = _ref3.renderedElement;
 
@@ -188,7 +188,7 @@ // We need a unique key to correlate state changes due to user interaction
 var _runPlugins = function _runPlugins(_ref4) {
-  var component = _ref4.component;
-  var config = _ref4.config;
-  var existingKeyMap = _ref4.existingKeyMap;
-  var props = _ref4.props;
-  var renderedElement = _ref4.renderedElement;
+  var component = _ref4.component,
+      config = _ref4.config,
+      existingKeyMap = _ref4.existingKeyMap,
+      props = _ref4.props,
+      renderedElement = _ref4.renderedElement;
 
@@ -206,3 +206,7 @@ // Don't run plugins if renderedElement is not a simple ReactDOMElement or has
   var componentName = component.constructor.displayName || component.constructor.name;
-  var getKey = _buildGetKey({ renderedElement: renderedElement, existingKeyMap: existingKeyMap, componentName: componentName });
+  var getKey = _buildGetKey({
+    renderedElement: renderedElement,
+    existingKeyMap: existingKeyMap,
+    componentName: componentName
+  });
   var getComponentField = function getComponentField(key) {
@@ -300,5 +304,6 @@ return component[key];
 renderedElement) {
-  var config = arguments.length <= 2 || arguments[2] === undefined ? DEFAULT_CONFIG : arguments[2];
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_CONFIG;
   var existingKeyMap = arguments[3];
-  var shouldCheckBeforeResolve = arguments.length <= 4 || arguments[4] === undefined ? false : arguments[4];
+  var shouldCheckBeforeResolve = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
   // ReactElement
@@ -312,3 +317,2 @@ existingKeyMap = existingKeyMap || {};
   renderedElement.props && renderedElement.props['data-radium'] ||
-
   // Bail if this element is a radium enhanced element, because if it is,
@@ -315,0 +319,0 @@ // then it will take care of resolving its own styles.

lib/test-helpers.js

@@ -48,3 +48,3 @@ 'use strict';
 function expectColor(actual, expected) {
-  expect((0, _color2.default)(actual).hexString()).to.equal((0, _color2.default)(expected).hexString());
+  expect((0, _color2.default)(actual).hex()).to.equal((0, _color2.default)(expected).hex());
 }

package.json

 {
   "name": "radium",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "A set of tools to manage inline styles on React elements",
@@ -21,5 +21,7 @@ "main": "lib/index.js",
     "deps-restore": "git checkout package.json",
-    "flow": "node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check",
+    "flow": "flow check",
     "lib": "npm run babel && rimraf lib/__tests__ lib/__mocks__",
-    "lint": "eslint src examples --ext .js --ext .jsx && npm run flow",
+    "eslint": "eslint src examples --ext .js --ext .jsx",
+    "fixlint": "npm run eslint -- --fix",
+    "lint": "npm run eslint && npm run flow",
     "postinstall": "cd lib || npm run lib",
@@ -33,3 +35,3 @@ "prepublish": "npm run lib && npm run dist && not-in-publish || (npm test && npm run lint && npm run deps-fix)",
     "test-dev": "karma start --no-single-run --auto-watch",
-    "universal": "concurrent --kill-others \"npm start\" \"npm run examples\""
+    "universal": "concurrently --kill-others \"npm start\" \"npm run examples\""
   },
@@ -39,55 +41,56 @@ "license": "MIT",
     "array-find": "^1.0.0",
-    "exenv": "^1.2.0",
-    "inline-style-prefixer": "^1.0.3",
-    "rimraf": "^2.4.0"
+    "exenv": "^1.2.1",
+    "inline-style-prefixer": "^2.0.5",
+    "rimraf": "^2.6.1"
   },
   "devDependencies": {
-    "babel-eslint": "^6.1.0",
-    "babel-loader": "^6.2.0",
-    "chai": "^3.0.0",
-    "color": "^0.11.3",
-    "concurrently": "^2.2.0",
-    "coveralls": "^2.11.2",
-    "eslint": "^2.5.3",
-    "eslint-plugin-flow-vars": "^0.4.0",
-    "eslint-plugin-react": "^5.0.1",
-    "express": "^4.13.3",
-    "express-http-proxy": "^0.7.2",
-    "flow-bin": "^0.20.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.4.0",
+    "chai": "^3.5.0",
+    "color": "^1.0.3",
+    "concurrently": "^3.4.0",
+    "coveralls": "^2.12.0",
+    "eslint": "^3.17.1",
+    "eslint-plugin-flow-vars": "^0.5.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "eslint-plugin-react": "^6.10.0",
+    "express": "^4.15.2",
+    "express-http-proxy": "^0.11.0",
+    "flow-bin": "^0.41.0",
     "in-publish": "^2.0.0",
-    "inject-loader": "^2.0.0",
+    "inject-loader": "^3.0.0-beta4",
     "isparta-loader": "^2.0.0",
-    "karma": "^1.1.0",
+    "karma": "^1.5.0",
     "karma-babel-preprocessor": "^6.0.1",
-    "karma-coverage": "^1.0.0",
+    "karma-coverage": "^1.1.1",
     "karma-ie-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.0.3",
-    "karma-phantomjs-launcher": "^1.0.1",
-    "karma-phantomjs-shim": "^1.0.0",
-    "karma-sinon-chai": "^1.2.1",
-    "karma-webpack": "^1.7.0",
-    "lodash.merge": "^4.0.2",
-    "lolex": "^1.4.0",
-    "mocha": "^2.2.5",
-    "node-libs-browser": "^0.5.2",
-    "nodemon": "^1.4.1",
-    "object-assign": "^4.0.1",
-    "phantomjs-prebuilt": "^2.1.7",
-    "react": "^15.0.1",
-    "react-addons-test-utils": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "sinon": "^1.15.3",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-phantomjs-shim": "^1.4.0",
+    "karma-sinon-chai": "^1.2.4",
+    "karma-webpack": "^2.0.3",
+    "lodash.merge": "^4.6.0",
+    "mocha": "^3.2.0",
+    "node-libs-browser": "^2.0.0",
+    "nodemon": "^1.11.0",
+    "object-assign": "^4.1.1",
+    "phantomjs-prebuilt": "^2.1.14",
+    "prettier": "^0.22.0",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "sinon": "^2.0.0",
     "sinon-chai": "^2.8.0",
-    "webpack": "^1.9.11",
-    "webpack-dev-server": "^1.9.0",
-    "babel-cli": "^6.3.15",
-    "babel-core": "^6.3.15",
-    "babel-plugin-add-module-exports": "^0.2.0",
-    "babel-plugin-transform-decorators-legacy": "^1.2.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
-    "babel-preset-es2015-loose": "^6.1.3",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-1": "^6.3.13"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.2",
+    "babel-cli": "^6.24.0",
+    "babel-core": "^6.24.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-1": "^6.22.0"
   }
 }

README.md

@@ -145,3 +145,3 @@ [![Travis Status][trav_img]][trav_site]
 
-Please see [CONTRIBUTING](CONTRIBUTING.md)
+Please see [CONTRIBUTING](https://github.com/FormidableLabs/radium/blob/master/CONTRIBUTING.md)
 
@@ -148,0 +148,0 @@ [trav_img]: https://api.travis-ci.org/FormidableLabs/radium.svg

src/__mocks__/exenv.js

 export default {
   canUseDOM: true,
-  canUseEventListeners: true
+  canUseEventListeners: true,
 };

src/__mocks__/prefixer.js

 export default {
-  getPrefixedStyle: style => style
+  getPrefixedStyle: style => style,
 };

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

@@ -8,3 +8,3 @@ import camelCasePropsToDashCase from 'camel-case-props-to-dash-case.js';
       WebkitBoxSizing: 'border-box',
-      msTransform: 'rotate(90deg)'
+      msTransform: 'rotate(90deg)',
     });
@@ -15,5 +15,5 @@
       '-webkit-box-sizing': 'border-box',
-      '-ms-transform': 'rotate(90deg)'
+      '-ms-transform': 'rotate(90deg)',
     });
   });
 });

src/__tests__/enhancer-test.js

 const resolveStyles = sinon.spy(require('resolve-styles.js'));
-const Enhancer = require('inject!enhancer.js')({
-  './resolve-styles.js': resolveStyles
+const Enhancer = require('inject-loader!enhancer.js')({
+  './resolve-styles.js': resolveStyles,
 });
@@ -10,3 +10,3 @@
   it('sets up initial state', () => {
-    class Composed extends Component { }
+    class Composed extends Component {}
     const Enhanced = Enhancer(Composed);
@@ -31,5 +31,3 @@
 
-    expect(instance.state).to.deep.equal(
-      {foo: 'bar', _radiumStyleState: {}}
-    );
+    expect(instance.state).to.deep.equal({foo: 'bar', _radiumStyleState: {}});
   });
@@ -114,3 +112,3 @@
         super();
-        this._radiumMouseUpListener = { remove: removeMouseUpListener };
+        this._radiumMouseUpListener = {remove: removeMouseUpListener};
       }
@@ -129,5 +127,5 @@ render() {}
     const mediaQueryListenersByQuery = {
-      '(min-width: 1000px)': { remove: sinon.spy() },
-      '(max-width: 600px)': { remove: sinon.spy() },
-      '(min-resolution: 2dppx)': { remove: sinon.spy() }
+      '(min-width: 1000px)': {remove: sinon.spy()},
+      '(max-width: 600px)': {remove: sinon.spy()},
+      '(min-resolution: 2dppx)': {remove: sinon.spy()},
     };
@@ -154,3 +152,3 @@ class Composed extends Component {
       static staticMethod() {
-        return { bar: 'foo' };
+        return {bar: 'foo'};
       }
@@ -160,8 +158,8 @@ render() {}
 
-    Composed.defaultProps = { foo: 'bar' };
+    Composed.defaultProps = {foo: 'bar'};
 
     const Enhanced = Enhancer(Composed);
 
-    expect(Enhanced.defaultProps).to.deep.equal({ foo: 'bar' });
-    expect(Enhanced.staticMethod()).to.deep.equal({ bar: 'foo' });
+    expect(Enhanced.defaultProps).to.deep.equal({foo: 'bar'});
+    expect(Enhanced.staticMethod()).to.deep.equal({bar: 'foo'});
   });
@@ -171,5 +169,4 @@
     const Composed = React.createClass({
-
       getStyles: function() {
-        return [{ color: 'black' }];
+        return [{color: 'black'}];
       },
@@ -183,4 +180,3 @@
         );
-      }
-
+      },
     });
@@ -194,3 +190,2 @@
   });
-
 });

src/__tests__/get-state-test.js

@@ -8,3 +8,3 @@ import getState from 'get-state.js';
       0,
-      ':hover'
+      ':hover',
     );
@@ -11,0 +11,0 @@ expect(result).to.equal(true);

src/__tests__/keyframes-test.js

@@ -28,3 +28,5 @@ /* eslint-disable react/prop-types */
 
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       @-webkit-keyframes slide-radium-animation-1bdcc98d {
@@ -34,10 +36,14 @@ from {left: 0;}
       }
-    `);
+    `,
+    );
   });
 
   it('renders keyframes in root style component', () => {
-    const animation = keyframes({
-      from: {left: '-1000px'},
-      to: {left: 0}
-    }, 'SlideFromLeft');
+    const animation = keyframes(
+      {
+        from: {left: '-1000px'},
+        to: {left: 0},
+      },
+      'SlideFromLeft',
+    );
 
@@ -54,3 +60,5 @@ class TestComponent extends Component {
 
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       @keyframes SlideFromLeft-radium-animation-1b668a10 {
@@ -64,10 +72,14 @@ from{
       }
-    `);
+    `,
+    );
   });
 
   it('adds px suffix when property is not unitless', () => {
-    const animation = keyframes({
-      from: {left: -1000},
-      to: {left: 10}
-    }, 'SlideFromLeft');
+    const animation = keyframes(
+      {
+        from: {left: -1000},
+        to: {left: 10},
+      },
+      'SlideFromLeft',
+    );
 
@@ -84,3 +96,5 @@ class TestComponent extends Component {
 
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       @keyframes SlideFromLeft-radium-animation-ab5ed129 {
@@ -94,13 +108,16 @@ from{
       }
-    `);
+    `,
+    );
   });
 
   it('renders keyframes from child component', () => {
-    const animation = keyframes({
-      from: {left: '-1000px'},
-      to: {left: 0}
-    }, 'SlideFromLeft');
+    const animation = keyframes(
+      {
+        from: {left: '-1000px'},
+        to: {left: 0},
+      },
+      'SlideFromLeft',
+    );
 
-    @Radium
-    class ChildComponent extends Component {
+    @Radium class ChildComponent extends Component {
       render() {
@@ -111,4 +128,3 @@ return <div style={{animationName: animation}} />;
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -127,3 +143,5 @@ return (
 
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       @keyframes SlideFromLeft-radium-animation-1b668a10 {
@@ -137,5 +155,5 @@ from{
       }
-    `);
+    `,
+    );
   });
-
 });

src/__tests__/media-query-test.js

@@ -7,3 +7,8 @@ /* eslint-disable react/prop-types */
 import TestUtils from 'react-addons-test-utils';
-import {expectColor, expectCSS, getRenderOutput, getElement} from 'test-helpers';
+import {
+  expectColor,
+  expectCSS,
+  getRenderOutput,
+  getElement,
+} from 'test-helpers';
 
@@ -27,5 +32,7 @@ describe('Media query tests', () => {
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -49,5 +56,7 @@ }
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -76,7 +85,11 @@ }
               key="first"
-              style={{'@media (max-width: 400px)': {':hover': {color: 'blue'}}}}
+              style={{
+                '@media (max-width: 400px)': {':hover': {color: 'blue'}},
+              }}
             />
             <div
               key="second"
-              style={{'@media (max-width: 400px)': {':hover': {color: 'blue'}}}}
+              style={{
+                '@media (max-width: 400px)': {':hover': {color: 'blue'}},
+              }}
             />
@@ -99,3 +112,3 @@ </div>
         addListener: () => {},
-        removeListener: () => {}
+        removeListener: () => {},
       };
@@ -108,5 +121,7 @@ };
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -128,3 +143,3 @@ }
         addListener: () => {},
-        removeListener: () => {}
+        removeListener: () => {},
       };
@@ -137,7 +152,13 @@ };
         return (
-          <div style={[
-            {':hover': {background: 'green', color: 'green'}},
-            {'@media (max-width: 400px)': {':hover': {background: 'yellow'}}},
-            {'@media (max-width: 400px)': {':hover': {color: 'white'}}}
-          ]} />
+          <div
+            style={[
+              {':hover': {background: 'green', color: 'green'}},
+              {
+                '@media (max-width: 400px)': {
+                  ':hover': {background: 'yellow'},
+                },
+              },
+              {'@media (max-width: 400px)': {':hover': {color: 'white'}}},
+            ]}
+          />
         );
@@ -165,5 +186,7 @@ }
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -195,5 +218,7 @@ }
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -213,14 +238,14 @@ }
       addListener: () => {},
-      matches: true
+      matches: true,
     }));
 
-    const ChildComponent = Radium(() =>
+    const ChildComponent = Radium(() => (
       <span style={{'@media print': {color: 'black'}}} />
-    );
+    ));
 
-    const TestComponent = Radium({matchMedia})(() =>
+    const TestComponent = Radium({matchMedia})(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -233,3 +258,5 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       @media print{
@@ -240,20 +267,21 @@ .${span.className}{
       }
-    `);
+    `,
+    );
   });
 
-  it('doesn\'t error on unmount', () => {
+  it("doesn't error on unmount", () => {
     const matchMedia = () => ({
       addListener: () => {},
-      matches: true
+      matches: true,
     });
 
-    const ChildComponent = Radium(() =>
+    const ChildComponent = Radium(() => (
       <span style={{'@media print': {color: 'black'}}} />
-    );
+    ));
 
-    const TestComponent = Radium({matchMedia})(() =>
+    const TestComponent = Radium({matchMedia})(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -266,16 +294,21 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
     // Use small values for media queries so they all pass.
-    const ChildComponent = Radium(() =>
-      <span style={[{
-        '@media (min-width: 10px)': {background: 'green'},
-        '@media (min-width: 20px)': {color: 'blue'}
-      }, {
-        '@media (min-width: 10px)': {color: 'white'}
-      }]} />
-    );
+    const ChildComponent = Radium(() => (
+      <span
+        style={[
+          {
+            '@media (min-width: 10px)': {background: 'green'},
+            '@media (min-width: 20px)': {color: 'blue'},
+          },
+          {
+            '@media (min-width: 10px)': {color: 'white'},
+          },
+        ]}
+      />
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -291,12 +324,10 @@ const root = document.createElement('div');
 
-  it('doesn\'t add className if no media styles', () => {
-    const ChildComponent = Radium(() =>
-      <span style={{color: 'black'}} />
-    );
+  it("doesn't add className if no media styles", () => {
+    const ChildComponent = Radium(() => <span style={{color: 'black'}} />);
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -310,11 +341,11 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
   it('retains original className', () => {
-    const ChildComponent = Radium(() =>
+    const ChildComponent = Radium(() => (
       <span className="original" style={{'@media print': {color: 'black'}}} />
-    );
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -328,20 +359,21 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
   it('throws without StyleRoot', () => {
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <span style={{'@media (min-width: 10px)': {background: 'green'}}} />
-    );
+    ));
     expect(() => TestUtils.renderIntoDocument(<TestComponent />)).to.throw();
   });
 
-  it('doesn\'t throw without StyleRoot when in test mode', () => {
+  it("doesn't throw without StyleRoot when in test mode", () => {
     Radium.TestMode.enable();
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <div>
         <span style={{'@media (min-width: 10px)': {background: 'green'}}} />
       </div>
-    );
-    expect(() => TestUtils.renderIntoDocument(<TestComponent/>)).not.to.throw();
+    ));
+    expect(() =>
+      TestUtils.renderIntoDocument(<TestComponent />)).not.to.throw();
   });
 
   /* eslint-disable no-console */
-  it('doesn\'t try to setState if not mounted', () => {
+  it("doesn't try to setState if not mounted", () => {
     sinon.stub(console, 'error');
@@ -355,3 +387,3 @@ sinon.stub(console, 'warn');
         addListener: addListener,
-        removeListener() {}
+        removeListener() {},
       };
@@ -364,5 +396,7 @@ };
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -372,5 +406,3 @@ }
 
-    const output = TestUtils.renderIntoDocument(
-      <TestComponent/>
-    );
+    const output = TestUtils.renderIntoDocument(<TestComponent />);
 
@@ -377,0 +409,0 @@ expect(addListener).to.have.been.called;

src/__tests__/radium-test.js

@@ -12,11 +12,5 @@ /* eslint-disable react/prop-types */
   it('merges styles', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
-        return (
-          <div style={[
-            {color: 'blue'},
-            {background: 'red'}
-          ]} />
-        );
+        return <div style={[{color: 'blue'}, {background: 'red'}]} />;
       }
@@ -27,16 +21,18 @@ }
 
-    expect(output.props.style).to.deep.equal(
-      {color: 'blue', background: 'red'}
-    );
+    expect(output.props.style).to.deep.equal({
+      color: 'blue',
+      background: 'red',
+    });
   });
 
   it('merges nested styles', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <div style={[
-            [{color: 'blue'}, [{height: '2px', padding: '9px'}]],
-            {background: 'red'}
-          ]} />
+          <div
+            style={[
+              [{color: 'blue'}, [{height: '2px', padding: '9px'}]],
+              {background: 'red'},
+            ]}
+          />
         );
@@ -48,5 +44,8 @@ }
 
-    expect(output.props.style).to.deep.equal(
-      {color: 'blue', background: 'red', height: '2px', padding: '9px'}
-    );
+    expect(output.props.style).to.deep.equal({
+      color: 'blue',
+      background: 'red',
+      height: '2px',
+      padding: '9px',
+    });
   });
@@ -57,9 +56,8 @@
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <InnerComponent header={
-            <div style={[{color: 'blue'}, {background: 'red'} ]}/>
-          } />
+          <InnerComponent
+            header={<div style={[{color: 'blue'}, {background: 'red'}]} />}
+          />
         );
@@ -71,5 +69,6 @@ }
 
-    expect(output.props.header.props.style).to.deep.equal(
-      {color: 'blue', background: 'red'}
-    );
+    expect(output.props.header.props.style).to.deep.equal({
+      color: 'blue',
+      background: 'red',
+    });
   });
@@ -84,12 +83,15 @@
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <InnerComponent stuff={
-            <div style={[
-              {color: 'blue'},
-              {background: 'red', ':active': {color: 'green'}}
-            ]} />
-          } />
+          <InnerComponent
+            stuff={
+              <div
+                style={[
+                  {color: 'blue'},
+                  {background: 'red', ':active': {color: 'green'}},
+                ]}
+              />
+            }
+          />
         );
@@ -118,14 +120,17 @@ }
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <InnerComponent>{arg =>
-            <div style={[
-              {color: 'blue'},
-              {background: 'red', ':active': {color: 'green'}}
-            ]}>
-              {arg}
-            </div>
-          }</InnerComponent>
+          <InnerComponent>
+            {arg => (
+              <div
+                style={[
+                  {color: 'blue'},
+                  {background: 'red', ':active': {color: 'green'}},
+                ]}
+              >
+                {arg}
+              </div>
+            )}
+          </InnerComponent>
         );
@@ -149,11 +154,12 @@ }
   it('adds hover styles', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <div style={{
-            background: 'red',
-            color: 'blue',
-            ':hover': {color: 'green'}
-          }} />
+          <div
+            style={{
+              background: 'red',
+              color: 'blue',
+              ':hover': {color: 'green'},
+            }}
+          />
         );
@@ -176,11 +182,12 @@ }
   it('adds active styles', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <div style={{
-            background: 'red',
-            color: 'blue',
-            ':active': {color: 'green'}
-          }} />
+          <div
+            style={{
+              background: 'red',
+              color: 'blue',
+              ':active': {color: 'green'},
+            }}
+          />
         );
@@ -203,22 +210,30 @@ }
   it('removes active styles on mouseup', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
           <div>
-            <span key="a" style={{
-              background: 'red',
-              color: 'blue',
-              ':active': {color: 'green'}
-            }} />
-            <button key="b" style={{
-              background: 'red',
-              color: 'blue',
-              ':active': {color: 'green'}
-            }} />
-            <nav key="c" style={{
-              background: 'red',
-              color: 'blue',
-              ':active': {color: 'green'}
-            }} />
+            <span
+              key="a"
+              style={{
+                background: 'red',
+                color: 'blue',
+                ':active': {color: 'green'},
+              }}
+            />
+            <button
+              key="b"
+              style={{
+                background: 'red',
+                color: 'blue',
+                ':active': {color: 'green'},
+              }}
+            />
+            <nav
+              key="c"
+              style={{
+                background: 'red',
+                color: 'blue',
+                ':active': {color: 'green'},
+              }}
+            />
           </div>
@@ -256,4 +271,3 @@ );
   it('resolves styles on multiple elements nested far down, Issue #307', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -264,10 +278,16 @@ return (
               <section>
-                <header key="header" style={{
-                  color: 'yellow',
-                  ':hover': { color: 'blue' }
-                }} />
-                <footer key="footer" style={{
-                  color: 'green',
-                  ':hover': { color: 'red' }
-                }} />
+                <header
+                  key="header"
+                  style={{
+                    color: 'yellow',
+                    ':hover': {color: 'blue'},
+                  }}
+                />
+                <footer
+                  key="footer"
+                  style={{
+                    color: 'green',
+                    ':hover': {color: 'red'},
+                  }}
+                />
               </section>
@@ -296,5 +316,4 @@ </section>
   it('resolves styles if an element has element children and spreads props', () => {
-    @Radium
-    class Inner extends Component {
-      static propTypes = { children: PropTypes.node };
+    @Radium class Inner extends Component {
+      static propTypes = {children: PropTypes.node};
       render() {
@@ -309,4 +328,3 @@ return (
 
-    @Radium
-    class Outer extends Component {
+    @Radium class Outer extends Component {
       render() {
@@ -330,9 +348,10 @@ return (
   it('calls toString on object values', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <div style={{
-            background: {toString: () => 'red'}
-          }} />
+          <div
+            style={{
+              background: {toString: () => 'red'},
+            }}
+          />
         );
@@ -353,3 +372,3 @@ }
         addListener: function() {},
-        removeListener: function() {}
+        removeListener: function() {},
       };
@@ -359,3 +378,3 @@ };
     @Radium({
-      matchMedia: truthyMatchMedia
+      matchMedia: truthyMatchMedia,
     })
@@ -365,5 +384,7 @@ class TestComponent extends Component {
         return (
-          <div style={{
-            '@media (min-width: 600px)': {':hover': {color: 'blue'}}
-          }} />
+          <div
+            style={{
+              '@media (min-width: 600px)': {':hover': {color: 'blue'}},
+            }}
+          />
         );
@@ -385,5 +406,7 @@ }
         return (
-          <div style={{
-            height: ['100%', '100vh']
-          }} />
+          <div
+            style={{
+              height: ['100%', '100vh'],
+            }}
+          />
         );
@@ -395,17 +418,16 @@ }
 
-    expect(output.props.style).to.deep.equal(
-      {height: '100%;height:100vh'}
-    );
+    expect(output.props.style).to.deep.equal({height: '100%;height:100vh'});
   });
 
   it('adds active styles on space', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <div style={{
-            background: 'red',
-            color: 'blue',
-            ':active': {color: 'green'}
-          }} />
+          <div
+            style={{
+              background: 'red',
+              color: 'blue',
+              ':active': {color: 'green'},
+            }}
+          />
         );
@@ -432,4 +454,3 @@ }
   it('works with children as keyed object ala React Router', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -449,5 +470,5 @@ return (
           nav: <nav>nav</nav>,
-          main: <main>main</main>
+          main: <main>main</main>,
         }}
-      </TestComponent>
+      </TestComponent>,
     );
@@ -463,4 +484,3 @@
   it('preserves array children as arrays', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -478,7 +498,4 @@ expect(Array.isArray(this.props.children)).to.equal(true);
       <TestComponent>
-        {[
-          <nav key="nav">nav</nav>,
-          <main key="main">main</main>
-        ]}
-      </TestComponent>
+        {[<nav key="nav">nav</nav>, <main key="main">main</main>]}
+      </TestComponent>,
     );
@@ -496,4 +513,3 @@
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -519,4 +535,3 @@ return (
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -542,4 +557,3 @@ return (
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -565,10 +579,6 @@ return (
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
         return (
-          <input
-            onFocus={handleFocus}
-            style={{':focus': {color: 'red'}}}
-          />
+          <input onFocus={handleFocus} style={{':focus': {color: 'red'}}} />
         );
@@ -588,11 +598,5 @@ }
 
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
-        return (
-          <input
-            onBlur={handleBlur}
-            style={{':focus': {color: 'red'}}}
-          />
-        );
+        return <input onBlur={handleBlur} style={{':focus': {color: 'red'}}} />;
       }
@@ -609,4 +613,3 @@ }
   it('ignores callback refs', () => {
-    @Radium
-    class TestComponent extends Component {
+    @Radium class TestComponent extends Component {
       render() {
@@ -638,4 +641,3 @@ return (
 
-      @Radium
-      class TestComponent extends Component {
+      @Radium class TestComponent extends Component {
         render() {
@@ -647,3 +649,3 @@ return <div style={{}} />;
       const output = TestUtils.renderIntoDocument(
-        <TestComponent radiumConfig={{plugins: [makeItRedPlugin]}} />
+        <TestComponent radiumConfig={{plugins: [makeItRedPlugin]}} />,
       );
@@ -657,3 +659,3 @@ const div = getElement(output, 'div');
   /* eslint-disable no-console */
-  it('doesn\'t try to setState if not mounted', () => {
+  it("doesn't try to setState if not mounted", () => {
     sinon.stub(console, 'error');
@@ -674,3 +676,3 @@ sinon.stub(console, 'warn');
 
-    const output = TestUtils.renderIntoDocument(<TestComponent/>);
+    const output = TestUtils.renderIntoDocument(<TestComponent />);
 
@@ -703,3 +705,3 @@ ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(output).parentNode);
     const output = TestUtils.renderIntoDocument(
-      <MyStatelessComponent>hello world</MyStatelessComponent>
+      <MyStatelessComponent>hello world</MyStatelessComponent>,
     );
@@ -735,3 +737,3 @@ const div = getElement(output, 'div');
     MyStatelessComponent.contextTypes = {
-      hoverColor: PropTypes.string
+      hoverColor: PropTypes.string,
     };
@@ -743,3 +745,3 @@ MyStatelessComponent = Radium(MyStatelessComponent);
         return {
-          hoverColor: 'green'
+          hoverColor: 'green',
         };
@@ -752,3 +754,3 @@ }
     ContextGivingWrapper.childContextTypes = {
-      hoverColor: PropTypes.string
+      hoverColor: PropTypes.string,
     };
@@ -759,3 +761,3 @@
         <MyStatelessComponent>hello world</MyStatelessComponent>
-      </ContextGivingWrapper>
+      </ContextGivingWrapper>,
     );
@@ -795,5 +797,3 @@ const div = getElement(output, 'div');
 
-    TestUtils.renderIntoDocument(
-      <TestComponent style={[]} />
-    );
+    TestUtils.renderIntoDocument(<TestComponent style={[]} />);
 
@@ -812,4 +812,3 @@ expect(console.error).not.to.have.been.called;
 
-      @Radium
-      class TestComponent extends Component {
+      @Radium class TestComponent extends Component {
         render() {
@@ -821,3 +820,3 @@ return <div style={{}} />;
       TestUtils.renderIntoDocument(
-        <TestComponent radiumConfig={{plugins: [plugin]}} />
+        <TestComponent radiumConfig={{plugins: [plugin]}} />,
       );
@@ -831,4 +830,3 @@
 
-      @Radium
-      class ParentComponent extends Component {
+      @Radium class ParentComponent extends Component {
         render() {
@@ -839,4 +837,3 @@ return <div style={{}}><ChildComponent /></div>;
 
-      @Radium
-      class ChildComponent extends Component {
+      @Radium class ChildComponent extends Component {
         render() {
@@ -848,3 +845,3 @@ return <div style={{}} />;
       TestUtils.renderIntoDocument(
-        <ParentComponent radiumConfig={{plugins: [plugin]}} />
+        <ParentComponent radiumConfig={{plugins: [plugin]}} />,
       );
@@ -851,0 +848,0 @@

src/__tests__/remove-nested-styles-test.js

@@ -10,11 +10,11 @@ /* eslint-disable react/prop-types */
   it('removes nested style objects', () => {
-    const ChildComponent = Radium(() =>
-      <span style={{ color: 'red', foo: { color: 'blue' }}} />
-    );
+    const ChildComponent = Radium(() => (
+      <span style={{color: 'red', foo: {color: 'blue'}}} />
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -27,13 +27,13 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
   it('should not remove style objects that have a toString function defined', () => {
-    const styleObject = { color: 'blue' };
+    const styleObject = {color: 'blue'};
     styleObject.toString = () => 'bar';
-    const ChildComponent = Radium(() =>
-      <span style={{ color: 'red', foo: styleObject }} />
-    );
+    const ChildComponent = Radium(() => (
+      <span style={{color: 'red', foo: styleObject}} />
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -40,0 +40,0 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);

src/__tests__/resolve-styles-test.js

 import React from 'react';
 import MouseUpListener from 'plugins/mouse-up-listener.js';
 import objectAssign from 'object-assign';
-const resolveStyles = require('inject!resolve-styles.js')({
-  'exenv': require('__mocks__/exenv.js'),
-  './prefixer': require('__mocks__/prefixer.js')
+const resolveStyles = require('inject-loader!resolve-styles.js')({
+  exenv: require('__mocks__/exenv.js'),
 });
@@ -15,3 +14,3 @@
     state: {},
-    _radiumIsMounted: true
+    _radiumIsMounted: true,
   };
@@ -47,3 +46,2 @@ };
 describe('resolveStyles', function() {
-
   beforeEach(() => {
@@ -54,3 +52,2 @@ MouseUpListener.subscribe = sinon.spy();
   describe('no-op behavior', function() {
-
     it('handles null rendered element', function() {
@@ -62,3 +59,3 @@ const component = genComponent();
 
-    it('doesn\'t explode', function() {
+    it("doesn't explode", function() {
       const component = genComponent();
@@ -96,3 +93,3 @@ const renderedElement = <div />;
 
-    it('doesn\'t wrap string children in spans', function() {
+    it("doesn't wrap string children in spans", function() {
       const component = genComponent();
@@ -105,3 +102,3 @@ const renderedElement = <div>Hello</div>;
 
-    it('doesn\'t wrap number children in spans', function() {
+    it("doesn't wrap number children in spans", function() {
       const component = genComponent();
@@ -118,5 +115,7 @@ const renderedElement = <div>{88347}</div>;
       // JSX won't let this through, so do it with a plain object instead
-      const renderedElement = {props: {
-        children: [null]
-      }};
+      const renderedElement = {
+        props: {
+          children: [null],
+        },
+      };
 
@@ -134,6 +133,3 @@ const result = resolveStyles(component, renderedElement);
       const renderedElement = (
-        <div style={[
-          {background: 'white'},
-          {color: 'blue'}
-        ]} />
+        <div style={[{background: 'white'}, {color: 'blue'}]} />
       );
@@ -146,3 +142,3 @@
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
@@ -154,14 +150,9 @@
     });
-
   });
 
   describe('style array', function() {
-
     it('merges an array of style objects', function() {
       const component = genComponent();
       const renderedElement = (
-        <div style={[
-          {background: 'white'},
-          {color: 'blue'}
-        ]} />
+        <div style={[{background: 'white'}, {color: 'blue'}]} />
       );
@@ -173,3 +164,3 @@
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
@@ -181,11 +172,13 @@ });
       const renderedElement = (
-        <div style={[
-          {background: 'white'},
-          false,
-          null,
-          ''.someUndefinedVar,
-          '',
-          [1, 2, 3],
-          {color: 'blue'}
-        ]} />
+        <div
+          style={[
+            {background: 'white'},
+            false,
+            null,
+            ''.someUndefinedVar,
+            '',
+            [1, 2, 3],
+            {color: 'blue'},
+          ]}
+        />
       );
@@ -197,3 +190,3 @@
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
@@ -205,6 +198,3 @@ });
       const renderedElement = (
-        <div style={[
-          {background: 'white'},
-          {background: 'blue'}
-        ]} />
+        <div style={[{background: 'white'}, {background: 'blue'}]} />
       );
@@ -215,3 +205,3 @@
       expect(result.props.style).to.deep.equal({
-        background: 'blue'
+        background: 'blue',
       });
@@ -223,6 +213,8 @@ });
       const renderedElement = (
-        <div style={[
-          {':hover': { background: 'white'}},
-          {':hover': {color: 'blue'}}
-        ]} />
+        <div
+          style={[
+            {':hover': {background: 'white'}},
+            {':hover': {color: 'blue'}},
+          ]}
+        />
       );
@@ -236,10 +228,12 @@
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
     });
-
   });
 
-  const createPseduoStyleTests = function(pseudo, onHandlerName, offHandlerName) {
-
+  const createPseduoStyleTests = function(
+    pseudo,
+    onHandlerName,
+    offHandlerName,
+  ) {
     it('strips special styles if not applied', function() {
@@ -397,3 +391,3 @@ const component = genComponent();
 
-      it('doesn\'t mutate state', function() {
+      it("doesn't mutate state", function() {
         const component = genComponent();
@@ -421,3 +415,2 @@ const style = {background: 'blue'};
     }
-
   };
@@ -449,3 +442,3 @@
         background: 'blue',
-        ':active': {background: 'red'}
+        ':active': {background: 'red'},
       };
@@ -459,3 +452,2 @@ const renderedElement = <div style={style} />;
 
-
       result = resolveStyles(component, renderedElement);
@@ -469,3 +461,3 @@ expect(result.props.style.background).to.equal('red');
         background: 'blue',
-        ':active': {background: 'red'}
+        ':active': {background: 'red'},
       };
@@ -492,3 +484,3 @@ const renderedElement = <div style={style} />;
         background: 'blue',
-        ':active': {background: 'red'}
+        ':active': {background: 'red'},
       };
@@ -513,10 +505,7 @@ const renderedElement = <div style={style} />;
         background: 'blue',
-        ':active': {background: 'red'}
+        ':active': {background: 'red'},
       };
       const originalOnMouseDown = sinon.spy();
       const renderedElement = (
-        <div
-          onMouseDown={originalOnMouseDown}
-          style={style}
-        />
+        <div onMouseDown={originalOnMouseDown} style={style} />
       );
@@ -536,3 +525,2 @@
   describe('multiple states triggered at once', function() {
-
     describe('applies pseudo styles in the defined order', function() {
@@ -543,3 +531,3 @@ const component = genComponent();
         {name: ':focus', style: {background: 'yellow'}},
-        {name: ':hover', style: {background: 'blue'}}
+        {name: ':hover', style: {background: 'blue'}},
       ]);
@@ -549,3 +537,3 @@ const onHandlerPermutations = permutate([
         'onMouseDown',
-        'onMouseEnter'
+        'onMouseEnter',
       ]);
@@ -556,3 +544,4 @@
           pseudoStyles.map(pseudo => pseudo.name).join(', ') +
-          ' when handlers called in order: ' + onHandlers.join(', ');
+          ' when handlers called in order: ' +
+          onHandlers.join(', ');
         it(name, function() {
@@ -574,3 +563,3 @@ const style = {};
           expect(result.props.style.background).to.equal(
-            pseudoStyles[pseudoStyles.length - 1].style.background
+            pseudoStyles[pseudoStyles.length - 1].style.background,
           );
@@ -589,3 +578,3 @@ });
   describe('React.Children.only', function() {
-    it('doesn\'t break React.Children.only', function() {
+    it("doesn't break React.Children.only", function() {
       const component = genComponent();
@@ -599,3 +588,3 @@ const renderedElement = <div><span /></div>;
 
-    it('doesn\'t break when only child isn\'t ReactElement', function() {
+    it("doesn't break when only child isn't ReactElement", function() {
       const component = genComponent();
@@ -609,3 +598,3 @@ const renderedElement = <div>Foo</div>;
   describe('ReactComponentElement children', function() {
-    it('doesn\'t resolve ReactComponentElement children', function() {
+    it("doesn't resolve ReactComponentElement children", function() {
       const component = genComponent();
@@ -616,3 +605,3 @@ class CustomComponent extends React.Component {}
         <div>
-          <CustomComponent style={style}/>
+          <CustomComponent style={style} />
         </div>
@@ -629,6 +618,3 @@ );
       class CustomComponent extends React.Component {}
-      const style = [
-        {background: 'white'},
-        {color: 'blue'}
-      ];
+      const style = [{background: 'white'}, {color: 'blue'}];
       const renderedElement = (
@@ -645,3 +631,3 @@ <div style={style}>
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
@@ -655,3 +641,3 @@
         background: 'white',
-        color: 'blue'
+        color: 'blue',
       });
@@ -728,6 +714,8 @@ });
       const renderedElement = (
-        <div style={{
-          border: '1px solid black',
-          borderWidth: '0 1px 1px 1px'
-        }} />
+        <div
+          style={{
+            border: '1px solid black',
+            borderWidth: '0 1px 1px 1px',
+          }}
+        />
       );
@@ -738,4 +726,5 @@
       expect(console.warn).to.have.been.called;
-      expect(console.warn.firstCall.args[0].indexOf('border'))
-        .to.be.greaterThan(0);
+      expect(
+        console.warn.firstCall.args[0].indexOf('border'),
+      ).to.be.greaterThan(0);
     });
@@ -746,8 +735,10 @@
       const renderedElement = (
-        <div style={{
-          ':hover': {
-            border: '1px solid black',
-            borderWidth: '0 1px 1px 1px'
-          }
-        }} />
+        <div
+          style={{
+            ':hover': {
+              border: '1px solid black',
+              borderWidth: '0 1px 1px 1px',
+            },
+          }}
+        />
       );
@@ -758,4 +749,5 @@
       expect(console.warn).to.have.been.called;
-      expect(console.warn.firstCall.args[0].indexOf('border'))
-        .to.be.greaterThan(0);
+      expect(
+        console.warn.firstCall.args[0].indexOf('border'),
+      ).to.be.greaterThan(0);
     });
@@ -766,6 +758,8 @@
       const renderedElement = (
-        <div style={{
-          border: '1px solid black',
-          borderRadius: '5px'
-        }} />
+        <div
+          style={{
+            border: '1px solid black',
+            borderRadius: '5px',
+          }}
+        />
       );
@@ -780,3 +774,3 @@
       const component = genComponent();
-      const renderedElement = <div style={{height: null }} />;
+      const renderedElement = <div style={{height: null}} />;
 
@@ -783,0 +777,0 @@ expect(() => {

src/__tests__/style-component-test.js

@@ -7,30 +7,35 @@ /* 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)';
 
 describe('<Style> component', () => {
-  it('adds px suffix to properties that don\'t accept unitless values', () => {
+  it("adds px suffix to properties that don't accept unitless values", () => {
     const output = TestUtils.renderIntoDocument(
-      <Style rules={{div: {height: 10}}} />
+      <Style rules={{div: {height: 10}}} />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       div {
         height: 10px;
       }
-    `);
+    `,
+    );
   });
 
-  it('doesn\'t add px suffix to properties that accept unitless values', () => {
+  it("doesn't add px suffix to properties that accept unitless values", () => {
     const output = TestUtils.renderIntoDocument(
-      <Style rules={{div: {zIndex: 10}}} />
+      <Style rules={{div: {zIndex: 10}}} />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       div {
         z-index: 10;
       }
-    `);
+    `,
+    );
   });
@@ -43,11 +48,14 @@
         rules={{div: {transform: 'rotate(90)'}}}
-      />
+      />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       div {
         -ms-transform: rotate(90);
       }
-    `);
+    `,
+    );
   });
@@ -60,13 +68,16 @@
         rules={{div: {transform: 'rotate(90)'}}}
-      />
+      />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       div{
-        transform:rotate(90);
         -webkit-transform:rotate(90);
         -ms-transform:rotate(90);
+        transform:rotate(90);
       }
-    `);
+    `,
+    );
   });
@@ -79,10 +90,12 @@
           div: {color: 'red'},
-          span: {color: 'blue'}
+          span: {color: 'blue'},
         }}
         scopeSelector=".scope"
-      />
+      />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       .scope div {
@@ -94,3 +107,4 @@ color: red;
       }
-    `);
+    `,
+    );
   });
@@ -100,14 +114,14 @@
     const output = TestUtils.renderIntoDocument(
-      <Style
-        rules={{'div, span': {color: 'red'}}}
-        scopeSelector=".scope"
-      />
+      <Style rules={{'div, span': {color: 'red'}}} scopeSelector=".scope" />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       .scope div, .scope span {
         color: red;
       }
-    `);
+    `,
+    );
   });
@@ -123,11 +137,13 @@
             color: 'blue',
-            backgroundColor: 'black'
-          }
+            backgroundColor: 'black',
+          },
         }}
         scopeSelector=".scope"
-      />
+      />,
     );
 
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       .scope {
@@ -141,4 +157,5 @@ color: red;
       }
-    `);
+    `,
+    );
   });
 });

src/__tests__/visited-test.js

@@ -10,11 +10,11 @@ /* eslint-disable react/prop-types */
   it('renders visited styles as css', () => {
-    const ChildComponent = Radium(() =>
+    const ChildComponent = Radium(() => (
       <span style={{':visited': {color: 'purple'}}} />
-    );
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -27,19 +27,22 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);
     const style = getElement(output, 'style');
-    expectCSS(style, `
+    expectCSS(
+      style,
+      `
       .${span.className}:visited {
         color: purple !important;
       }
-    `);
+    `,
+    );
   });
 
   it('retains original className', () => {
-    const ChildComponent = Radium(() =>
+    const ChildComponent = Radium(() => (
       <span className="original" style={{':visited': {color: 'purple'}}} />
-    );
+    ));
 
-    const TestComponent = Radium(() =>
+    const TestComponent = Radium(() => (
       <StyleRoot>
         <ChildComponent />
       </StyleRoot>
-    );
+    ));
 
@@ -46,0 +49,0 @@ const output = TestUtils.renderIntoDocument(<TestComponent />);

src/append-important-to-each-value.js

@@ -9,4 +9,4 @@ /* @flow */
     style,
-    (result, key) => appendPxIfNeeded(key, style[key]) + ' !important'
+    (result, key) => appendPxIfNeeded(key, style[key]) + ' !important',
   );
 }

src/append-px-if-needed.js

@@ -36,3 +36,3 @@ /* @flow */
   strokeOpacity: true,
-  strokeWidth: true
+  strokeWidth: true,
 };
@@ -42,3 +42,3 @@
   propertyName: string,
-  value: any
+  value: any,
 ): string {
@@ -48,3 +48,3 @@ const needsPxSuffix = !isUnitlessNumber[propertyName] &&
     value !== 0;
-  return  needsPxSuffix ? value + 'px' : value;
+  return needsPxSuffix ? value + 'px' : value;
 }

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

@@ -16,15 +16,18 @@ /* @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;

src/components/style-root.js

 /* @flow */
 
-import React, {Component, PropTypes} from 'react';
+import React, {PureComponent, PropTypes} from 'react';
 
@@ -11,7 +11,6 @@ import Enhancer from '../enhancer';
   if (!instance._radiumStyleKeeper) {
-    const userAgent = (
-      instance.props.radiumConfig && instance.props.radiumConfig.userAgent
-    ) || (
-      instance.context._radiumConfig && instance.context._radiumConfig.userAgent
-    );
+    const userAgent = (instance.props.radiumConfig &&
+      instance.props.radiumConfig.userAgent) ||
+      (instance.context._radiumConfig &&
+        instance.context._radiumConfig.userAgent);
     instance._radiumStyleKeeper = new StyleKeeper(userAgent);
@@ -23,3 +22,3 @@ }
 
-class StyleRoot extends Component {
+class StyleRoot extends PureComponent {
   constructor() {
@@ -35,2 +34,4 @@ super(...arguments);
 
+  _radiumStyleKeeper: StyleKeeper;
+
   render() {
@@ -53,7 +54,7 @@ /* eslint-disable no-unused-vars */
   _radiumConfig: PropTypes.object,
-  _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
+  _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper),
 };
 
 StyleRoot.childContextTypes = {
-  _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
+  _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper),
 };
@@ -60,0 +61,0 @@

src/components/style-sheet.js

 /* @flow */
 
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 
 import StyleKeeper from '../style-keeper';
 
-export default class StyleSheet extends Component {
+export default class StyleSheet extends PureComponent {
   static contextTypes = {
-    _radiumStyleKeeper: React.PropTypes.instanceOf(StyleKeeper)
+    _radiumStyleKeeper: React.PropTypes.instanceOf(StyleKeeper),
   };
@@ -16,10 +16,10 @@
     this.state = this._getCSSState();
-
-    this._onChange = this._onChange.bind(this);
   }
 
+  state: {css: string};
+
   componentDidMount() {
     this._isMounted = true;
     this._subscription = this.context._radiumStyleKeeper.subscribe(
-      this._onChange
+      this._onChange,
     );
@@ -36,2 +36,5 @@ this._onChange();
 
+  _isMounted: ?boolean;
+  _subscription: ?{remove: () => void};
+
   _getCSSState(): {css: string} {
@@ -41,13 +44,14 @@ return {css: this.context._radiumStyleKeeper.getCSS()};
 
-  _onChange() {
-    setTimeout(() => {
-      this._isMounted && this.setState(this._getCSSState());
-    }, 0);
-  }
+  _onChange = () => {
+    setTimeout(
+      () => {
+        this._isMounted && this.setState(this._getCSSState());
+      },
+      0,
+    );
+  };
 
-  render(): ReactElement {
-    return (
-      <style dangerouslySetInnerHTML={{__html: this.state.css}} />
-    );
+  render(): React.Element<any> {
+    return <style dangerouslySetInnerHTML={{__html: this.state.css}} />;
   }
 }

src/components/style.js

@@ -5,64 +5,71 @@ /* @flow */
 
-import React, {PropTypes} from 'react';
+import React, {PropTypes, PureComponent} from 'react';
 
-const Style = React.createClass({
-  propTypes: {
+class Style extends PureComponent {
+  static propTypes = {
     radiumConfig: PropTypes.object,
     rules: PropTypes.object,
-    scopeSelector: PropTypes.string
-  },
+    scopeSelector: PropTypes.string,
+  };
 
-  contextTypes: {
-    _radiumConfig: PropTypes.object
-  },
+  static contextTypes = {
+    _radiumConfig: PropTypes.object,
+  };
 
-  getDefaultProps(): {scopeSelector: string} {
-    return {
-      scopeSelector: ''
-    };
-  },
+  static defaultProps: {scopeSelector: string} = {
+    scopeSelector: '',
+  };
 
   _buildStyles(styles: Object): string {
-    const userAgent = (
-      this.props.radiumConfig && this.props.radiumConfig.userAgent
-    ) || (
-      this.context &&
-      this.context._radiumConfig &&
-      this.context._radiumConfig.userAgent
-    );
+    const userAgent = (this.props.radiumConfig &&
+      this.props.radiumConfig.userAgent) ||
+      (this.context &&
+        this.context._radiumConfig &&
+        this.context._radiumConfig.userAgent);
 
     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;
-    }, {});
-    const rootStyles = Object.keys(rootRules).length ?
-      cssRuleSetToString(scopeSelector || '', rootRules, userAgent) :
-      '';
+        return accumulator;
+      },
+      {},
+    );
+    const rootStyles = Object.keys(rootRules).length
+      ? 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}
+    stylesByMediaQuery: {[mediaQuery: string]: Object},
   ): string {
@@ -72,3 +79,5 @@ let mediaQueryString = '';
     Object.keys(stylesByMediaQuery).forEach(query => {
-      mediaQueryString += '@media ' + query + '{' +
+      mediaQueryString += '@media ' +
+        query +
+        '{' +
         this._buildStyles(stylesByMediaQuery[query]) +
@@ -79,5 +88,5 @@ '}';
     return mediaQueryString;
-  },
+  }
 
-  render(): ?ReactElement {
+  render(): ?React.Element<any> {
     if (!this.props.rules) {
@@ -89,8 +98,6 @@ return null;
 
-    return (
-      <style dangerouslySetInnerHTML={{__html: styles}} />
-    );
+    return <style dangerouslySetInnerHTML={{__html: styles}} />;
   }
-});
+}
 
 export default Style;

src/config.js

@@ -9,5 +9,5 @@ /** @flow */
 type MediaQueryList = {
-  matches: bool;
-  addListener(listener: MediaQueryListListener): void;
-  removeListener(listener: MediaQueryListListener): void;
+  matches: boolean,
+  addListener(listener: MediaQueryListListener): void,
+  removeListener(listener: MediaQueryListListener): void,
 };
@@ -14,0 +14,0 @@

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

@@ -9,5 +9,7 @@ /* @flow */
 function createMarkupForStyles(style: Object): string {
-  return Object.keys(style).map(property => {
-    return property + ': ' + style[property] + ';';
-  }).join('\n');
+  return Object.keys(style)
+    .map(property => {
+      return property + ': ' + style[property] + ';';
+    })
+    .join('\n');
 }
@@ -24,6 +26,4 @@
 
-  const rulesWithPx = mapObject(
-    rules,
-    (value, key) => appendPxIfNeeded(key, value)
-  );
+  const rulesWithPx = mapObject(rules, (value, key) =>
+    appendPxIfNeeded(key, value));
   const prefixedRules = getPrefixedStyle(rulesWithPx, userAgent);
@@ -30,0 +30,0 @@ const cssPrefixedRules = camelCasePropsToDashCase(prefixedRules);

src/enhancer.js

@@ -15,3 +15,3 @@ /* @flow */
   'prototype',
-  'type'
+  'type',
 ];
@@ -32,3 +32,4 @@
 function isStateless(component: Function): boolean {
-  return !component.render && !(component.prototype && component.prototype.render);
+  return !component.render &&
+    !(component.prototype && component.prototype.render);
 }
@@ -53,2 +54,4 @@
     ComposedComponent = class extends Component {
+      state: Object;
+
       render() {
@@ -62,8 +65,12 @@ return component(this.props, this.context);
   class RadiumEnhancer extends ComposedComponent {
-    _radiumMediaQueryListenersByQuery: {[query: string]: {remove: () => void}};
+    static _isRadiumEnhanced = true;
+
+    state: Object;
+
+    _radiumMediaQueryListenersByQuery: {
+      [query: string]: {remove: () => void},
+    };
     _radiumMouseUpListener: {remove: () => void};
-    _radiumIsMounted: bool;
+    _radiumIsMounted: boolean;
 
-    static _isRadiumEnhanced = true;
-
     constructor() {
@@ -93,3 +100,3 @@ super(...arguments);
           },
-          this
+          this,
         );
@@ -100,5 +107,5 @@ }
     getChildContext() {
-      const superChildContext = super.getChildContext ?
-        super.getChildContext() :
-        {};
+      const superChildContext = super.getChildContext
+        ? super.getChildContext()
+        : {};
 
@@ -121,3 +128,4 @@ if (!this.props.radiumConfig) {
       let currentConfig = this.props.radiumConfig ||
-        this.context._radiumConfig || config;
+        this.context._radiumConfig ||
+        config;
 
@@ -127,3 +135,3 @@ if (config && currentConfig !== config) {
           ...config,
-          ...currentConfig
+          ...currentConfig,
         };
@@ -152,11 +160,7 @@ }
       ...RadiumEnhancer.propTypes,
-      style: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.object
-      ])
+      style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     };
   }
 
-  RadiumEnhancer.displayName =
-    component.displayName ||
+  RadiumEnhancer.displayName = component.displayName ||
     component.name ||
@@ -168,3 +172,3 @@ 'Component';
     _radiumConfig: PropTypes.object,
-    _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
+    _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper),
   };
@@ -175,3 +179,3 @@
     _radiumConfig: PropTypes.object,
-    _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper)
+    _radiumStyleKeeper: PropTypes.instanceOf(StyleKeeper),
   };
@@ -178,0 +182,0 @@

src/get-state-key.js

 /* @flow */
 
 const getStateKey = function(elementKey: ?string): string {
-  return elementKey === null || elementKey === undefined ?
-    'main' :
-    elementKey.toString();
+  return elementKey === null || elementKey === undefined
+    ? 'main'
+    : elementKey.toString();
 };
 
 export default getStateKey;

src/get-state.js

@@ -8,14 +8,12 @@ /* @flow */
   elementKey: string,
-  value: string
+  value: string,
 ): any {
   const key = getStateKey(elementKey);
 
-  return (
-    !!state &&
+  return !!state &&
     !!state._radiumStyleState &&
     !!state._radiumStyleState[key] &&
-    state._radiumStyleState[key][value]
-  );
+    state._radiumStyleState[key][value];
 };
 
 export default getState;

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 @@ }

src/index.js

@@ -23,3 +23,3 @@ import Enhancer from './enhancer';
     disable: __setTestMode.bind(null, false),
-    enable: __setTestMode.bind(null, true)
+    enable: __setTestMode.bind(null, true),
   };
@@ -26,0 +26,0 @@ }

src/keyframes.js

@@ -8,3 +8,3 @@ /* @flow */
 export type Keyframes = {
-  __radiumKeyframes: bool,
+  __radiumKeyframes: boolean,
   __process(userAgent?: string): {animationName: string, css: string},
@@ -14,3 +14,3 @@ };
 export default function keyframes(
-  keyframeRules: {[percentage: string]: {[key: string]: string|number}},
+  keyframeRules: {[percentage: string]: {[key: string]: string | number}},
   name?: string,
@@ -22,16 +22,19 @@ ): Keyframes {
       const keyframesPrefixed = getPrefixedKeyframes(userAgent);
-      const rules = Object.keys(keyframeRules).map(percentage =>
-        cssRuleSetToString(
-          percentage,
-          keyframeRules[percentage],
-          userAgent
-        )
-      ).join('\n');
-      const animationName = (name ? name + '-' : '') + 'radium-animation-' + hash(rules);
-      const css = '@' + keyframesPrefixed + ' ' + animationName + ' {\n' +
+      const rules = Object.keys(keyframeRules)
+        .map(percentage =>
+          cssRuleSetToString(percentage, keyframeRules[percentage], userAgent))
+        .join('\n');
+      const animationName = (name ? name + '-' : '') +
+        'radium-animation-' +
+        hash(rules);
+      const css = '@' +
+        keyframesPrefixed +
+        ' ' +
+        animationName +
+        ' {\n' +
         rules +
         '\n}\n';
       return {css, animationName};
-    }
+    },
   };
 }

src/map-object.js

@@ -5,8 +5,11 @@ /* @flow */
   object: {[key: string]: TValue},
-  mapper: (value: TValue, key: string) => TNext
+  mapper: (value: TValue, key: string) => TNext,
 ): {[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;
+    },
+    {},
+  );
 }

src/merge-styles.js

 export function isNestedStyle(value) {
   // Don't merge objects overriding toString, since they should be converted
   // to string values.
-  return value && value.constructor === Object &&
+  return value &&
+    value.constructor === Object &&
     value.toString === Object.prototype.toString;
@@ -34,3 +35,4 @@ }
         let newKey = key;
-        while (true) { // eslint-disable-line no-constant-condition
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
           newKey += ' ';
@@ -37,0 +39,0 @@ if (!result[newKey]) {

src/plugins/check-props-plugin.js

@@ -13,3 +13,3 @@ /* @flow */
   const shorthandPropertyExpansions = {
-    'background': [
+    background: [
       'backgroundAttachment',
@@ -27,5 +27,5 @@ 'backgroundBlendMode',
       'backgroundRepeatY',
-      'backgroundSize'
+      'backgroundSize',
     ],
-    'border': [
+    border: [
       'borderBottom',
@@ -49,5 +49,5 @@ 'borderBottomColor',
       'borderTopWidth',
-      'borderWidth'
+      'borderWidth',
     ],
-    'borderImage': [
+    borderImage: [
       'borderImageOutset',
@@ -57,11 +57,11 @@ 'borderImageRepeat',
       'borderImageSource',
-      'borderImageWidth'
+      'borderImageWidth',
     ],
-    'borderRadius': [
+    borderRadius: [
       'borderBottomLeftRadius',
       'borderBottomRightRadius',
       'borderTopLeftRadius',
-      'borderTopRightRadius'
+      'borderTopRightRadius',
     ],
-    'font': [
+    font: [
       'fontFamily',
@@ -75,27 +75,13 @@ 'fontKerning',
       'fontWeight',
-      'lineHeight'
+      'lineHeight',
     ],
-    'listStyle': [
-      'listStyleImage',
-      'listStylePosition',
-      'listStyleType'
-    ],
-    'margin': [
-      'marginBottom',
-      'marginLeft',
-      'marginRight',
-      'marginTop'
-    ],
-    'padding': [
-      'paddingBottom',
-      'paddingLeft',
-      'paddingRight',
-      'paddingTop'
-    ],
-    'transition': [
+    listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
+    margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+    padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+    transition: [
       'transitionDelay',
       'transitionDuration',
       'transitionProperty',
-      'transitionTimingFunction'
-    ]
+      'transitionTimingFunction',
+    ],
   };
@@ -113,3 +99,5 @@
         Array.isArray(shorthandPropertyExpansions[styleKey]) &&
-        shorthandPropertyExpansions[styleKey].some(sp => styleKeys.indexOf(sp) !== -1)
+        shorthandPropertyExpansions[styleKey].some(
+          sp => styleKeys.indexOf(sp) !== -1,
+        )
       ) {
@@ -122,6 +110,8 @@ if (process.env.NODE_ENV !== 'production') {
             ': do not mix longhand and ' +
-            'shorthand properties in the same style object. Check the render ' +
-            'method of ' + componentName + '.',
+              'shorthand properties in the same style object. Check the render ' +
+              'method of ' +
+              componentName +
+              '.',
             'See https://github.com/FormidableLabs/radium/issues/95 for more ' +
-            'information.'
+              'information.',
           );
@@ -128,0 +118,0 @@ /* eslint-enable no-console */

src/plugins/index.js

@@ -11,3 +11,4 @@ /** @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';
@@ -21,3 +22,3 @@ import visitedPlugin from './visited-plugin';
   // Helper function when adding CSS
-  appendImportantToEachValue: (style: Object) => Object;
+  appendImportantToEachValue: (style: Object) => Object,
 
@@ -53,3 +54,3 @@ // May not be readable if code has been minified
   // Returns true if the value is a nested style object
-  isNestedStyle: (value: any) => bool,
+  isNestedStyle: (value: any) => boolean,
 
@@ -75,5 +76,5 @@ // Access to the mergeStyles utility
   ExecutionEnvironment: {
-    canUseEventListeners: bool,
-    canUseDOM: bool,
-  }
+    canUseEventListeners: boolean,
+    canUseDOM: boolean,
+  },
 };
@@ -105,3 +106,3 @@
   resolveMediaQueries: resolveMediaQueriesPlugin,
-  visited: visitedPlugin
+  visited: visitedPlugin,
 };

src/plugins/keyframes-plugin.js

@@ -7,17 +7,20 @@ /* @flow */
 export default function keyframesPlugin(
-  {addCSS, config, style}: PluginConfig // eslint-disable-line no-shadow
+  {addCSS, config, style}: PluginConfig, // eslint-disable-line no-shadow
 ): PluginResult {
-  const newStyle = Object.keys(style).reduce((newStyleInProgress, key) => {
-    let value = style[key];
-    if (key === 'animationName' && value && value.__radiumKeyframes) {
-      const keyframesValue = (value: Keyframes);
-      const {animationName, css} = keyframesValue.__process(config.userAgent);
-      addCSS(css);
-      value = animationName;
-    }
+  const newStyle = Object.keys(style).reduce(
+    (newStyleInProgress, key) => {
+      let value = style[key];
+      if (key === 'animationName' && value && value.__radiumKeyframes) {
+        const keyframesValue = (value: Keyframes);
+        const {animationName, css} = keyframesValue.__process(config.userAgent);
+        addCSS(css);
+        value = animationName;
+      }
 
-    newStyleInProgress[key] = value;
-    return newStyleInProgress;
-  }, {});
+      newStyleInProgress[key] = value;
+      return newStyleInProgress;
+    },
+    {},
+  );
   return {style: newStyle};
 }

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

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

src/plugins/mouse-up-listener.js

@@ -31,3 +31,3 @@ /* @flow */
       }
-    }
+    },
   };
@@ -38,3 +38,3 @@ };
   subscribe: subscribe,
-  __triggerForTests: _handleMouseUp
+  __triggerForTests: _handleMouseUp,
 };

src/plugins/prefix-plugin.js

@@ -8,9 +8,6 @@ /* @flow */
 export default function prefixPlugin(
-  {config, style}: PluginConfig // eslint-disable-line no-shadow
+  {config, style}: PluginConfig, // eslint-disable-line no-shadow
 ): PluginResult {
-  const newStyle = getPrefixedStyle(
-    style,
-    config.userAgent,
-  );
+  const newStyle = getPrefixedStyle(style, config.userAgent);
   return {style: newStyle};
 }

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

@@ -5,17 +5,23 @@ /** @flow */
 
-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;
-  }, {});
+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;
+    },
+    {},
+  );
 
   return {
-    style: newStyle
+    style: newStyle,
   };
 }

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

@@ -21,3 +21,3 @@ /** @flow */
     setState,
-    style
+    style,
   } = config;
@@ -92,3 +92,5 @@
       () => {
-        Object.keys(getComponentField('state')._radiumStyleState).forEach(key => {
+        Object.keys(
+          getComponentField('state')._radiumStyleState,
+        ).forEach(key => {
           if (getState(':active', key) === 'viamousedown') {
@@ -98,3 +100,3 @@ setState(':active', false, key);
         });
-      }
+      },
     );
@@ -104,5 +106,7 @@ }
   // Merge the styles in the order they were defined
-  const interactionStyles = props.disabled ? [style[':disabled']] : Object.keys(style)
-    .filter(name => _isInteractiveStyleField(name) && getState(name))
-    .map(name => style[name]);
+  const interactionStyles = props.disabled
+    ? [style[':disabled']]
+    : Object.keys(style)
+        .filter(name => _isInteractiveStyleField(name) && getState(name))
+        .map(name => style[name]);
 
@@ -119,3 +123,3 @@ let newStyle = mergeStyles([style].concat(interactionStyles));
     },
-    {}
+    {},
   );
@@ -126,3 +130,3 @@
     props: newProps,
-    style: newStyle
+    style: newStyle,
   };
@@ -129,0 +133,0 @@ };

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

@@ -9,6 +9,6 @@ /** @flow */
   if (_windowMatchMedia === undefined) {
-    _windowMatchMedia = !!ExecutionEnvironment.canUseDOM &&
+    _windowMatchMedia = (!!ExecutionEnvironment.canUseDOM &&
       !!window &&
       !!window.matchMedia &&
-      (mediaQueryString => window.matchMedia(mediaQueryString)) ||
+      (mediaQueryString => window.matchMedia(mediaQueryString))) ||
       null;
@@ -21,13 +21,11 @@ }
   obj: Object,
-  predicate: (value: any, key: string) => bool
+  predicate: (value: any, key: string) => boolean,
 ): 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;
+  }, {});
 }
@@ -43,24 +41,21 @@
     },
-    {}
+    {},
   );
 }
 
-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 => {
+  Object.keys(style).filter(name => name.indexOf('@media') === 0).map(query => {
     const topLevelRules = appendImportantToEachValue(
-      _filterObject(
-        style[query],
-        value => !isNestedStyle(value),
-      )
+      _filterObject(style[query], value => !isNestedStyle(value)),
     );
@@ -72,7 +67,3 @@
 
-    const ruleCSS = cssRuleSetToString(
-      '',
-      topLevelRules,
-      userAgent
-    );
+    const ruleCSS = cssRuleSetToString('', topLevelRules, userAgent);
 
@@ -90,9 +81,11 @@ // CSS classes cannot start with a number
 
-function _subscribeToMediaQuery({
-  listener,
-  listenersByQuery,
-  matchMedia,
-  mediaQueryListsByQuery,
-  query
-}) {
+function _subscribeToMediaQuery(
+  {
+    listener,
+    listenersByQuery,
+    matchMedia,
+    mediaQueryListsByQuery,
+    query,
+  },
+) {
   query = query.replace('@media ', '');
@@ -102,3 +95,3 @@
   if (!mql && matchMedia) {
-    mediaQueryListsByQuery[query] = mql = matchMedia(query);
+    mediaQueryListsByQuery[query] = (mql = matchMedia(query));
   }
@@ -112,3 +105,3 @@
         mql.removeListener(listener);
-      }
+      },
     };
@@ -119,17 +112,20 @@ }
 
-export default function resolveMediaQueries({
-  ExecutionEnvironment,
-  addCSS,
-  appendImportantToEachValue,
-  config,
-  cssRuleSetToString,
-  getComponentField,
-  getGlobalState,
-  hash,
-  isNestedStyle,
-  mergeStyles,
-  props,
-  setState,
-  style
-}: PluginConfig): PluginResult { // eslint-disable-line no-shadow
+export default function resolveMediaQueries(
+  {
+    ExecutionEnvironment,
+    addCSS,
+    appendImportantToEachValue,
+    config,
+    cssRuleSetToString,
+    getComponentField,
+    getGlobalState,
+    hash,
+    isNestedStyle,
+    mergeStyles,
+    props,
+    setState,
+    style,
+  }: PluginConfig,
+): PluginResult {
+  // eslint-disable-line no-shadow
   let newStyle = _removeMediaQueries(style);
@@ -143,9 +139,11 @@ const mediaQueryClassNames = _topLevelRulesToCSS({
     style,
-    userAgent: config.userAgent
+    userAgent: config.userAgent,
   });
 
-  const newProps = mediaQueryClassNames ? {
-    className: mediaQueryClassNames +
-      (props.className ? ' ' + props.className : '')
-  } : null;
+  const newProps = mediaQueryClassNames
+    ? {
+        className: mediaQueryClassNames +
+          (props.className ? ' ' + props.className : ''),
+      }
+    : null;
 
@@ -158,3 +156,3 @@ const matchMedia: ?MatchMediaType = config.matchMedia ||
       props: newProps,
-      style: newStyle
+      style: newStyle,
     };
@@ -164,10 +162,7 @@ }
   const listenersByQuery = {
-    ...getComponentField('_radiumMediaQueryListenersByQuery')
+    ...getComponentField('_radiumMediaQueryListenersByQuery'),
   };
-  const mediaQueryListsByQuery =
-    getGlobalState('mediaQueryListsByQuery') || {};
+  const mediaQueryListsByQuery = getGlobalState('mediaQueryListsByQuery') || {};
 
-  Object.keys(style)
-  .filter(name => name.indexOf('@media') === 0)
-  .map(query => {
+  Object.keys(style).filter(name => name.indexOf('@media') === 0).map(query => {
     const nestedRules = _filterObject(style[query], isNestedStyle);
@@ -184,3 +179,3 @@
       mediaQueryListsByQuery,
-      query
+      query,
     });
@@ -196,8 +191,8 @@
     componentFields: {
-      _radiumMediaQueryListenersByQuery: listenersByQuery
+      _radiumMediaQueryListenersByQuery: listenersByQuery,
     },
     globalState: {mediaQueryListsByQuery},
     props: newProps,
-    style: newStyle
+    style: newStyle,
   };
 }

src/plugins/visited-plugin.js

@@ -5,34 +5,40 @@ /** @flow */
 
-export default function visited({
-  addCSS,
-  appendImportantToEachValue,
-  config,
-  cssRuleSetToString,
-  hash,
-  props,
-  style
-}: PluginConfig): PluginResult { // eslint-disable-line no-shadow
+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;
+    },
+    {},
+  );
 
   return {
     props: className === props.className ? null : {className},
-    style: newStyle
+    style: newStyle,
   };
 }

src/prefixer.js

@@ -11,17 +11,20 @@ /**
 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;
+    },
+    {},
+  );
 }
@@ -33,3 +36,8 @@
 
-function getPrefixer(userAgent: ?string): InlineStylePrefixer {
+function getPrefixer(
+  userAgent: ?string,
+): {
+  +prefix: (style: Object) => Object,
+  prefixedKeyframes: string,
+} {
   const actualUserAgent = userAgent ||
@@ -43,4 +51,4 @@ (global && global.navigator && global.navigator.userAgent);
         'Radium: userAgent should be supplied for server-side rendering. See ' +
-        'https://github.com/FormidableLabs/radium/tree/master/docs/api#radium ' +
-        'for more information.'
+          'https://github.com/FormidableLabs/radium/tree/master/docs/api#radium ' +
+          'for more information.',
       );
@@ -56,3 +64,3 @@ /* eslint-enable no-console */
         prefix: InlineStylePrefixer.prefixAll,
-        prefixedKeyframes: 'keyframes'
+        prefixedKeyframes: 'keyframes',
       };
@@ -73,6 +81,3 @@ } else {
 // and values.
-export function getPrefixedStyle(
-  style: Object,
-  userAgent?: ?string,
-): Object {
+export function getPrefixedStyle(style: Object, userAgent?: ?string): Object {
   const styleWithFallbacks = transformValues(style);
@@ -79,0 +84,0 @@ const prefixer = getPrefixer(userAgent);

src/resolve-styles.js

@@ -26,4 +26,4 @@ /* @flow */
     Plugins.prefix,
-    Plugins.checkProps
-  ]
+    Plugins.checkProps,
+  ],
 };
@@ -39,16 +39,18 @@
   config: Config,
-  existingKeyMap?: {[key: string]: bool},
-  shouldCheckBeforeResolve: true
+  existingKeyMap?: {[key: string]: boolean},
+  shouldCheckBeforeResolve: true,
 ) => any);
 
 const _shouldResolveStyles = function(component) {
-  return (component.type && !component.type._isRadiumEnhanced);
+  return component.type && !component.type._isRadiumEnhanced;
 };
 
-const _resolveChildren = function({
-  children,
-  component,
-  config,
-  existingKeyMap
-}) {
+const _resolveChildren = function(
+  {
+    children,
+    component,
+    config,
+    existingKeyMap,
+  },
+) {
   if (!children) {
@@ -83,21 +85,20 @@ return children;
 
-  return React.Children.map(
-    children,
-    function(child) {
-      if (React.isValidElement(child)) {
-        return resolveStyles(component, child, config, existingKeyMap, true);
-      }
+  return React.Children.map(children, function(child) {
+    if (React.isValidElement(child)) {
+      return resolveStyles(component, child, config, existingKeyMap, true);
+    }
 
-      return child;
-    }
-  );
+    return child;
+  });
 };
 
 // Recurse over props, just like children
-const _resolveProps = function({
-  component,
-  config,
-  existingKeyMap,
-  props
-}) {
+const _resolveProps = function(
+  {
+    component,
+    config,
+    existingKeyMap,
+    props,
+  },
+) {
   let newProps = props;
@@ -119,3 +120,3 @@
         existingKeyMap,
-        true
+        true,
       );
@@ -128,13 +129,15 @@ }
 
-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
   // with the rendered element, so we know to apply the proper interactive
   // styles.
-  const originalKey = typeof renderedElement.ref === 'string' ?
-    renderedElement.ref :
-    renderedElement.key;
+  const originalKey = typeof renderedElement.ref === 'string'
+    ? renderedElement.ref
+    : renderedElement.key;
   const key = getStateKey(originalKey);
@@ -161,8 +164,11 @@
         'Radium requires each element with interactive styles to have a unique ' +
-        'key, set using either the ref or key prop. ' +
-        (originalKey ?
-          'Key "' + originalKey + '" is a duplicate.' :
-          'Multiple elements have no key specified.') + ' ' +
-        'Component: "' + componentName + '". ' +
-        (elementName ? 'Element: "' + elementName + '".' : '')
+          'key, set using either the ref or key prop. ' +
+          (originalKey
+            ? 'Key "' + originalKey + '" is a duplicate.'
+            : 'Multiple elements have no key specified.') +
+          ' ' +
+          'Component: "' +
+          componentName +
+          '". ' +
+          (elementName ? 'Element: "' + elementName + '".' : ''),
       );
@@ -185,5 +191,5 @@ }
   const existing = component._lastRadiumState ||
-    component.state && component.state._radiumStyleState || {};
+  (component.state && component.state._radiumStyleState) || {};
 
-  const state = { _radiumStyleState: {...existing} };
+  const state = {_radiumStyleState: {...existing}};
   state._radiumStyleState[key] = {...state._radiumStyleState[key]};
@@ -196,9 +202,11 @@ state._radiumStyleState[key][stateKey] = value;
 
-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
@@ -220,3 +228,7 @@ // no style.
     component.constructor.name;
-  const getKey = _buildGetKey({renderedElement, existingKeyMap, componentName});
+  const getKey = _buildGetKey({
+    renderedElement,
+    existingKeyMap,
+    componentName,
+  });
   const getComponentField = key => component[key];
@@ -240,3 +252,5 @@ const getGlobalState = key => globalState[key];
           'please wrap your application in the StyleRoot component. Component ' +
-          'name: `' + componentName + '`.',
+          'name: `' +
+          componentName +
+          '`.',
       );
@@ -266,3 +280,3 @@ }
       isNestedStyle,
-      style: newStyle
+      style: newStyle,
     }) || {};
@@ -272,5 +286,5 @@
 
-    newProps = result.props && Object.keys(result.props).length ?
-      {...newProps, ...result.props} :
-      newProps;
+    newProps = result.props && Object.keys(result.props).length
+      ? {...newProps, ...result.props}
+      : newProps;
 
@@ -320,3 +334,4 @@ const newComponentFields = result.componentFields || {};
   shouldCheckBeforeResolve: boolean = false,
-): any { // ReactElement
+): any {
+  // ReactElement
   existingKeyMap = existingKeyMap || {};
@@ -330,3 +345,2 @@ if (
     (renderedElement.props && renderedElement.props['data-radium']) ||
-
     // Bail if this element is a radium enhanced element, because if it is,
@@ -343,3 +357,3 @@ // then it will take care of resolving its own styles.
     config,
-    existingKeyMap
+    existingKeyMap,
   });
@@ -351,3 +365,3 @@
     existingKeyMap,
-    props: renderedElement.props
+    props: renderedElement.props,
   });
@@ -360,3 +374,3 @@
     props: newProps,
-    renderedElement
+    renderedElement,
   });
@@ -377,3 +391,3 @@
     newProps !== renderedElement.props ? newProps : {},
-    newChildren
+    newChildren,
   );
@@ -380,0 +394,0 @@ };

src/style-keeper.js

@@ -6,3 +6,3 @@ /* @flow */
   _listeners: Array<() => void>;
-  _cssSet: {[id: string]: bool};
+  _cssSet: {[id: string]: boolean};
 
@@ -27,3 +27,3 @@ constructor(userAgent: string) {
         }
-      }
+      },
     };
@@ -43,3 +43,3 @@ }
         this._emitChange();
-      }
+      },
     };
@@ -46,0 +46,0 @@ }

src/test-helpers.js

@@ -13,3 +13,3 @@ import Color from 'color';
   return ReactDOM.findDOMNode(
-    TestUtils.findRenderedDOMComponentWithTag(output, tagName)
+    TestUtils.findRenderedDOMComponentWithTag(output, tagName),
   );
@@ -31,3 +31,3 @@ }
 export function expectColor(actual, expected) {
-  expect(Color(actual).hexString()).to.equal(Color(expected).hexString());
+  expect(Color(actual).hex()).to.equal(Color(expected).hex());
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

479781

increased by1.99%

Lines of code

9023

increased by2.3%

Worsened metrics

Dev dependency count

48

increased by2.13%

Number of medium supply chain risk alerts

4

increased byInfinity%

Dependency changes

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@2.0.5(transitive)

• - Removedinline-style-prefix-all@2.0.2(transitive)

• - Removedinline-style-prefixer@1.0.4(transitive)

• Updatedexenv@^1.2.1

• Updatedinline-style-prefixer@^2.0.5

• Updatedrimraf@^2.6.1