[Core] Initial style refactor

src/DropDownMenu/DropDownMenu.jsx

@@ -8,7 +8,7 @@ import ClearFix from '../clearfix';
 import ThemeManager from '../styles/theme-manager';
 import Popover from '../popover/popover';
 import PopoverAnimationFromTop from '../popover/popover-animation-from-top';
-import styleUtils from '../utils/styles';
+import {mergeStyles, prepareStyles} from '../utils/styles';
 import warning from 'warning';
 import deprecated from '../utils/deprecatedPropType';
 
@@ -405,14 +405,14 @@ const DropDownMenu = React.createClass({
         {...other}
         ref="root"
         className={className}
-        style={styleUtils.prepareStyles(muiTheme, styles.root, open && styles.rootWhenOpen, style)}
+        style={prepareStyles(muiTheme, mergeStyles(styles.root, open && styles.rootWhenOpen, style))}
       >
-        <ClearFix style={styleUtils.merge(styles.control)} onTouchTap={this._onControlTouchTap}>
-          <div style={styleUtils.prepareStyles(muiTheme, styles.label, open && styles.labelWhenOpen, labelStyle)}>
+        <ClearFix style={mergeStyles(styles.control)} onTouchTap={this._onControlTouchTap}>
+          <div style={prepareStyles(muiTheme, mergeStyles(styles.label, open && styles.labelWhenOpen, labelStyle))}>
             {displayValue}
           </div>
-          <DropDownArrow style={styleUtils.merge(styles.icon, iconStyle)}/>
-          <div style={styleUtils.prepareStyles(muiTheme, styles.underline, underlineStyle)}/>
+          <DropDownArrow style={mergeStyles(styles.icon, iconStyle)}/>
+          <div style={prepareStyles(muiTheme, mergeStyles(styles.underline, underlineStyle))}/>
         </ClearFix>
         <Popover
           anchorOrigin={{horizontal: 'left', vertical: 'top'}}

src/TextField/TextFieldHint.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import styleUtils from '../utils/styles';
+import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -55,7 +55,7 @@ const TextFieldHint = (props) => {
 
   return (
     <div
-      style={styleUtils.prepareStyles(muiTheme, styles.root, style)}>{text}
+      style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}>{text}
     </div>
   );
 };

src/TextField/TextFieldLabel.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import styleUtils from '../utils/styles';
+import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -82,7 +82,7 @@ const TextFieldLabel = (props) => {
   return (
     <label
       className={className}
-      style={styleUtils.prepareStyles(muiTheme, styles.root, style)}
+      style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}
       htmlFor={htmlFor}
       onTouchTap={onTouchTap}
     >

src/TextField/TextFieldUnderline.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Transitions from '../styles/transitions';
-import styleUtils from '../utils/styles';
+import {mergeStyles, prepareStyles} from '../utils/styles';
 
 const propTypes = {
   /**
@@ -108,17 +108,17 @@ const TextFieldUnderline = (props) => {
     },
   };
 
-  let underline = styleUtils.merge(styles.root, style);
-  let focusedUnderline = styleUtils.merge(underline, styles.focus, focusStyle);
+  let underline = mergeStyles(styles.root, style);
+  let focusedUnderline = mergeStyles(underline, styles.focus, focusStyle);
 
-  if (disabled) underline = styleUtils.merge(underline, styles.disabled, disabledStyle);
-  if (focus) focusedUnderline = styleUtils.merge(focusedUnderline, {transform: 'scaleX(1)'});
-  if (error) focusedUnderline = styleUtils.merge(focusedUnderline, styles.error);
+  if (disabled) underline = mergeStyles(underline, styles.disabled, disabledStyle);
+  if (focus) focusedUnderline = mergeStyles(focusedUnderline, {transform: 'scaleX(1)'});
+  if (error) focusedUnderline = mergeStyles(focusedUnderline, styles.error);
 
   return (
     <div>
-      <hr style={styleUtils.prepareStyles(muiTheme, underline)}/>
-      <hr style={styleUtils.prepareStyles(muiTheme, focusedUnderline)}/>
+      <hr style={prepareStyles(muiTheme, underline)}/>
+      <hr style={prepareStyles(muiTheme, focusedUnderline)}/>
     </div>
   );
 };

src/divider.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import muiThemeable from './muiThemeable';
-import styleUtils from './utils/styles';
+import {mergeStyles, prepareStyles} from './utils/styles';
 
 const propTypes = {
   /**
@@ -36,7 +36,7 @@ let Divider = ({inset, muiTheme, style, ...other}) => {
   };
 
   return (
-    <hr {...other} style={styleUtils.prepareStyles(muiTheme, styles.root, style)} />
+    <hr {...other} style={prepareStyles(muiTheme, mergeStyles(styles.root, style))} />
   );
 };
 

src/flat-button.jsx

@@ -3,7 +3,7 @@ import ContextPure from './mixins/context-pure';
 import Transitions from './styles/transitions';
 import Children from './utils/children';
 import ColorManipulator from './utils/color-manipulator';
-import ImmutabilityHelper from './utils/immutability-helper';
+import {mergeStyles} from './utils/styles';
 import Typography from './styles/typography';
 import EnhancedButton from './enhanced-button';
 import FlatButtonLabel from './buttons/flat-button-label';
@@ -245,7 +245,7 @@ const FlatButton = React.createClass({
     const buttonBackgroundColor = backgroundColor || buttonColor;
     const hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
 
-    const mergedRootStyles = ImmutabilityHelper.merge({
+    const mergedRootStyles = mergeStyles({
       color: defaultTextColor,
       transition: Transitions.easeOut(),
       fontSize: Typography.fontStyleButtonFontSize,

src/lists/nested-list.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ImmutabilityHelper from '../utils/immutability-helper';
+import {mergeStyles} from '../utils/styles';
 import List from './list';
 
 
@@ -39,7 +39,7 @@ const NestedList = React.createClass({
     };
 
     return (
-      <List style={ImmutabilityHelper.merge(styles.root, style)}>
+      <List style={mergeStyles(styles.root, style)}>
         {
           React.Children.map(children, (child) => {
             return React.isValidElement(child) ? (

src/menus/menu-divider.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Divider from '../divider';
-import styleUtils from '../utils/styles';
+import {mergeStyles} from '../utils/styles';
 import warning from 'warning';
 
 const MenuDivider = React.createClass({
@@ -34,7 +34,7 @@ const MenuDivider = React.createClass({
 
     const styles = this.getStyles();
 
-    return <Divider {...this.props} style={styleUtils.merge(styles.root, style)} />;
+    return <Divider {...this.props} style={mergeStyles(styles.root, style)} />;
   },
 });
 

src/mixins/style-propable.js

@@ -1,42 +1,27 @@
 import React from 'react';
-import ImmutabilityHelper from '../utils/immutability-helper';
-import Styles from '../utils/styles';
-import warning from 'warning';
-
-// This mixin isn't necessary and will be removed
+import {mergeStyles, mergeAndPrefix, prepareStyles as prepare} from '../utils/styles';
 
 /**
- *	@params:
- *	styles = Current styles.
- *  props = New style properties that will override the current style.
+ * This mixin isn't necessary and will be removed soon. DO NOT USE!
+ *
+ * All internal components that use this mixin should be switched to the
+ * `styleUtils` that this mixin now wraps. Notice the method signature of
+ * the `prepareStyles()` function of this mixin is different than the method
+ * signature of the `prepareStyles()` function in `styleUtils`.
+ *
+ * See `../utils/styles.js` for more details.
  */
 export default {
 
   propTypes: {
     style: React.PropTypes.object,
   },
 
-  //Moved this function to ImmutabilityHelper.merge
-  mergeStyles() {
-    return ImmutabilityHelper.merge.apply(this, arguments);
-  },
+  mergeStyles,
 
-  //Moved this function to /utils/styles.js
-  mergeAndPrefix() {
-    warning(false, 'Use of mergeAndPrefix() has been deprecated. ' +
-      'Please use mergeStyles() for merging styles, and then prepareStyles() for prefixing and ensuring direction.');
-    return Styles.mergeAndPrefix.apply(this, arguments);
-  },
+  mergeAndPrefix,
 
-  // prepareStyles is used to merge multiple styles, make sure they are flipped to rtl
-  // if needed, and then autoprefix them. It should probably always be used instead of
-  // mergeAndPrefix.
-  //
-  // Never call this on the same style object twice. As a rule of thumb,
-  // only call it when passing style attribute to html elements.
-  // If you call it twice you'll get a warning anyway.
   prepareStyles(...args) {
-    return Styles.prepareStyles.apply(Styles,
-      [(this.state && this.state.muiTheme) || this.context.muiTheme].concat(args));
+    return prepare((this.state && this.state.muiTheme) || this.context.muiTheme, ...args);
   },
 };

src/ripples/touch-ripple.jsx

@@ -4,8 +4,17 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ReactTransitionGroup from 'react-addons-transition-group';
 import StylePropable from '../mixins/style-propable';
 import Dom from '../utils/dom';
-import ImmutabilityHelper from '../utils/immutability-helper';
 import CircleRipple from './circle-ripple';
+import update from 'react-addons-update';
+
+function push(array, obj) {
+  const newObj = Array.isArray(obj) ? obj : [obj];
+  return update(array, {$push: newObj});
+}
+
+function shift(array) {
+  return update(array, {$splice: [[0, 1]]});
+}
 
 const TouchRipple = React.createClass({
 
@@ -52,7 +61,7 @@ const TouchRipple = React.createClass({
     let ripples = this.state.ripples;
 
     //Add a ripple to the ripples array
-    ripples = ImmutabilityHelper.push(ripples, (
+    ripples = push(ripples, (
       <CircleRipple
         key={this.state.nextKey}
         style={!this.props.centerRipple ? this._getRippleStyle(e) : {}}
@@ -72,7 +81,7 @@ const TouchRipple = React.createClass({
   end() {
     const currentRipples = this.state.ripples;
     this.setState({
-      ripples: ImmutabilityHelper.shift(currentRipples),
+      ripples: shift(currentRipples),
     });
   },
 

src/utils/index.js

@@ -2,7 +2,6 @@ import ColorManipulator from './color-manipulator';
 import CssEvent from './css-event';
 import Dom from './dom';
 import Events from './events';
-import ImmutabilityHelper from './immutability-helper';
 import KeyCode from './key-code';
 import KeyLine from './key-line';
 import UniqueId from './unique-id';
@@ -12,7 +11,6 @@ export {ColorManipulator};
 export {CssEvent};
 export {Dom};
 export {Events};
-export {ImmutabilityHelper};
 export {KeyCode};
 export {KeyLine};
 export {UniqueId};
@@ -23,7 +21,6 @@ export default {
   CssEvent,
   Dom,
   Events,
-  ImmutabilityHelper,
   KeyCode,
   KeyLine,
   UniqueId,