Add more comparative benchmarks

Add "aphrodite", "react-jss", and "reactxp" renderers. "react-addons-perf" is required due to: https://github.com/Microsoft/reactxp/issues/11
2026-05-16 08:30:06 +08:00 · 2017-04-08 18:42:57 -07:00
parent aa85876eb2
commit 547c375bd6
56 changed files with 599 additions and 131 deletions
--- a/performance/README.md
+++ b/performance/README.md
@@ -13,15 +13,26 @@ The components used in the render benchmarks are simple enough to be
 implemented by multiple UI or style libraries. The implementations are not
 equivalent in functionality.

+`react-native-web/stylesheet` is a comparative baseline that implements a
+simple `View` without much of React Native's functionality.
+
 ## Benchmark results

 Typical render timings*: mean ± two standard deviations

-| Implementation               | Deep tree (ms)    | Wide tree (ms)    |
-| :--- | ---: | ---: |
-| `css-modules`                |  `76.66` `±18.46` | `157.03` `±19.79` |
-| `react-native-web@0.0.78`    |  `90.13` `±20.91` | `198.72` `±24.44` |
-| `styled-components@2.0.0-7`  | `263.06` `±31.87` | `564.53` `±27.62` |
-| `glamor@3.0.0-1`             | `267.49` `±35.12` | `451.99` `±37.32` |
+| Implementation                       | Deep tree (ms)    | Wide tree (ms)    | Tweet (ms)        |
+| :--- | ---: | ---: | ---: |
+| `css-modules`                        |  `87.68` `±13.29` | `171.96` `±14.91` | |
+| `react-native-web/stylesheet@0.0.81` |  `90.59` `±12.03` | `190.37` `±19.65` | |
+| `react-native-web@0.0.81`            | `105.20` `±17.86` | `226.54` `±29.50` | `12.12` `±6.94ms` |
+
+Other libraries
+
+| Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
+| `aphrodite@1.2.0`                    | `101.25` `±18.78`  | `224.59` `±22.28` |
+| `glamor@3.0.0-1`                     | `143.39` `±23.05` | `275.21` `±21.10` |
+| `react-jss@5.4.1                     | `142.27` `±16.62` | `318.62` `±26.19` |
+| `reactxp@0.34.3`                     | `221.36` `±23.35` | `472.61` `±40.86` |
+| `styled-components@2.0.0-7`          | `301.92` `±39.43` | `647.80` `±102.1` |

 *MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.
--- a/performance/components/Box/index.platform.js
+++ b/performance/components/Box/index.platform.js
@@ -1,17 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import React from 'react';
-import View from '../View/index.platform';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    className={classnames(`color${color}`, {
-      fixed: fixed,
-      outer: outer,
-      row: layout === 'row'
-    })}
-  />
-);
-
-module.exports = Box;
--- a/performance/components/View/index.platform.js
+++ b/performance/components/View/index.platform.js
@@ -1,7 +0,0 @@
-/* eslint-disable react/prop-types */
-import classnames from 'classnames';
-import React from 'react';
-
-const View = props => <div {...props} className={classnames('view', props.className)} />;
-
-module.exports = View;
--- a/performance/components/css-modules.js
+++ b/performance/components/css-modules.js
@@ -1,7 +0,0 @@
-import Box from './Box/index.css-modules';
-import View from './View/index.css-modules';
-
-export default {
-  Box,
-  View
-};
--- a/performance/components/glamor.js
+++ b/performance/components/glamor.js
@@ -1,7 +0,0 @@
-import Box from './Box/index.glamor';
-import View from './View/index.glamor';
-
-export default {
-  Box,
-  View
-};
--- a/performance/components/platform.js
+++ b/performance/components/platform.js
@@ -1,7 +0,0 @@
-import Box from './Box/index.platform';
-import View from './View/index.platform';
-
-export default {
-  Box,
-  View
-};
--- a/performance/components/react-native-web.js
+++ b/performance/components/react-native-web.js
@@ -1,9 +0,0 @@
-import Box from './Box';
-import Tweet from './Tweet';
-import { View } from 'react-native';
-
-export default {
-  Box,
-  Tweet,
-  View
-};
--- a/performance/components/styled-components.js
+++ b/performance/components/styled-components.js
@@ -1,7 +0,0 @@
-import Box from './Box/index.styled';
-import View from './View/index.styled';
-
-export default {
-  Box,
-  View
-};
--- a/performance/index.html
+++ b/performance/index.html
@@ -2,40 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <title>Title</title>
-  <!-- "platform" implementation -->
-  <style>
-    .view {
-      align-items: stretch;
-      border-width: 0;
-      border-style: solid;
-      box-sizing: border-box;
-      display: flex;
-      flex-basis: auto;
-      flex-direction: column;
-      flex-shrink: 0;
-      margin: 0;
-      padding: 0;
-      position: relative;
-      background-color: transparent;
-      color: inherit;
-      font: inherit;
-      text-align: inherit;
-      text-decoration: none;
-      list-style: none;
-      min-height: 0;
-      min-width: 0;
-    }
-    .outer { padding: 4px; }
-    .row { flex-direction: row; }
-    .color0 { background-color: #222; }
-    .color1 { background-color: #666; }
-    .color2 { background-color: #999; }
-    .color3 { background-color: blue; }
-    .color4 { background-color: orange; }
-    .color5 { background-color: red; }
-    .fixed { width: 20px; height: 20px; }
-</style>
+  <title>Performance tests</title>
 </head>
 <body>
  <div class="root"></div>
--- a/performance/index.js
+++ b/performance/index.js
@@ -1,29 +1,46 @@
-import cssModules from './components/css-modules';
-import glamor from './components/glamor';
-import platform from './components/platform';
-import reactNative from './components/react-native-web';
-import styledComponents from './components/styled-components';
+import aphrodite from './src/aphrodite';
+import cssModules from './src/css-modules';
+import glamor from './src/glamor';
+import jss from './src/jss';
+import reactNative from './src/react-native';
+import reactNativeStyleSheet from './src/react-native-stylesheet';
+import styledComponents from './src/styled-components';
+import xp from './src/reactxp';

 import renderDeepTree from './tests/renderDeepTree';
 import renderTweet from './tests/renderTweet';
 import renderWideTree from './tests/renderWideTree';

-const tests = [
-  // tweet
+const testAll = window.location.search === '?all';
+
+const coreTests = [
  () => renderTweet('react-native-web', reactNative),
-  // deep tree
-  () => renderDeepTree('platform', platform),
+
  () => renderDeepTree('css-modules', cssModules),
-  () => renderDeepTree('react-native-web', reactNative),
-  () => renderDeepTree('styled-components', styledComponents),
-  () => renderDeepTree('glamor', glamor),
-  // wide tree
-  () => renderWideTree('platform', platform),
  () => renderWideTree('css-modules', cssModules),
-  () => renderWideTree('react-native-web', reactNative),
-  () => renderWideTree('styled-components', styledComponents),
-  () => renderWideTree('glamor', glamor)
+  () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet),
+  () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet),
+  () => renderDeepTree('react-native-web', reactNative),
+  () => renderWideTree('react-native-web', reactNative)
 ];

+/**
+ * Optionally run tests using other libraries
+ */
+const extraTests = [
+  () => renderDeepTree('aphrodite', aphrodite),
+  () => renderWideTree('aphrodite', aphrodite),
+  () => renderDeepTree('glamor', glamor),
+  () => renderWideTree('glamor', glamor),
+  () => renderDeepTree('jss', jss),
+  () => renderWideTree('jss', jss),
+  () => renderDeepTree('reactxp', xp),
+  () => renderWideTree('reactxp', xp),
+  () => renderDeepTree('styled-components', styledComponents),
+  () => renderWideTree('styled-components', styledComponents)
+];
+
+const tests = testAll ? coreTests.concat(extraTests) : coreTests;
+
 // run benchmarks
 tests.reduce((promise, test) => promise.then(test()), Promise.resolve());
--- a/performance/package.json
+++ b/performance/package.json
@@ -2,13 +2,17 @@
  "name": "performance",
  "private": true,
  "dependencies": {
+    "aphrodite": "^1.2.0",
    "classnames": "^2.2.5",
    "glamor": "3.0.0-1",
    "marky": "^1.1.3",
+    "react-jss": "^5.4.1",
+    "reactxp": "^0.34.3",
    "styled-components": "2.0.0-7"
  },
  "devDependencies": {
    "css-loader": "^0.26.2",
+    "react-addons-perf": "^15.4.2",
    "style-loader": "^0.13.2"
  }
 }
--- a/performance/src/aphrodite.js
+++ b/performance/src/aphrodite.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/aphrodite';
+import View from './components/View/aphrodite';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/components/AppText/index.js
+++ b/performance/src/components/AppText/index.js
--- a/performance/src/components/AspectRatio/index.js
+++ b/performance/src/components/AspectRatio/index.js
--- a/performance/src/components/Box/aphrodite.js
+++ b/performance/src/components/Box/aphrodite.js
@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from '../View/aphrodite';
+import { StyleSheet } from 'aphrodite';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;
--- a/performance/components/Box/index.css-modules.js
+++ b/performance/components/Box/index.css-modules.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
-import View from '../View/index.css-modules';
+import View from '../View/css-modules';
 import styles from './styles.css';

 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
--- a/performance/components/Box/index.glamor.js
+++ b/performance/components/Box/index.glamor.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import View from '../View/index.glamor';
+import View from '../View/glamor';

 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
  <View
--- a/performance/src/components/Box/jss.js
+++ b/performance/src/components/Box/jss.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import injectSheet from 'react-jss';
+import React from 'react';
+import View from '../View/jss';
+
+const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    className={classnames({
+      [classes[`color${color}`]]: true,
+      [classes.fixed]: fixed,
+      [classes.row]: layout === 'row',
+      [classes.outer]: outer
+    })}
+  />
+);
+
+const styles = {
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+};
+
+module.exports = injectSheet(styles)(Box);
--- a/performance/src/components/Box/react-native-stylesheet.js
+++ b/performance/src/components/Box/react-native-stylesheet.js
@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import View from '../View/react-native-stylesheet';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outer: {
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#222'
+  },
+  color1: {
+    backgroundColor: '#666'
+  },
+  color2: {
+    backgroundColor: '#999'
+  },
+  color3: {
+    backgroundColor: 'blue'
+  },
+  color4: {
+    backgroundColor: 'orange'
+  },
+  color5: {
+    backgroundColor: 'red'
+  },
+  fixed: {
+    width: 20,
+    height: 20
+  }
+});
+
+module.exports = Box;
--- a/performance/src/components/Box/react-native.js
+++ b/performance/src/components/Box/react-native.js
--- a/performance/src/components/Box/reactxp.js
+++ b/performance/src/components/Box/reactxp.js
@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Styles, View } from 'reactxp';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: Styles.createViewStyle({
+    padding: 4
+  }),
+  row: Styles.createViewStyle({
+    flexDirection: 'row'
+  }),
+  color0: Styles.createViewStyle({
+    backgroundColor: '#222'
+  }),
+  color1: Styles.createViewStyle({
+    backgroundColor: '#666'
+  }),
+  color2: Styles.createViewStyle({
+    backgroundColor: '#999'
+  }),
+  color3: Styles.createViewStyle({
+    backgroundColor: 'blue'
+  }),
+  color4: Styles.createViewStyle({
+    backgroundColor: 'orange'
+  }),
+  color5: Styles.createViewStyle({
+    backgroundColor: 'red'
+  }),
+  fixed: Styles.createViewStyle({
+    width: 20,
+    height: 20
+  })
+};
+
+module.exports = Box;
--- a/performance/src/components/Box/styled-components.js
+++ b/performance/src/components/Box/styled-components.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import View from '../View/index.styled';
+import View from '../View/styled-components';

 const getColor = color => {
  switch (color) {
--- a/performance/src/components/Box/styles.css
+++ b/performance/src/components/Box/styles.css
--- a/performance/src/components/GridView/index.js
+++ b/performance/src/components/GridView/index.js
--- a/performance/src/components/Icons/DirectMessage.js
+++ b/performance/src/components/Icons/DirectMessage.js
--- a/performance/src/components/Icons/Heart.js
+++ b/performance/src/components/Icons/Heart.js
--- a/performance/src/components/Icons/Reply.js
+++ b/performance/src/components/Icons/Reply.js
--- a/performance/src/components/Icons/Retweet.js
+++ b/performance/src/components/Icons/Retweet.js
--- a/performance/src/components/Icons/styles.js
+++ b/performance/src/components/Icons/styles.js
--- a/performance/src/components/NestedTree/index.js
+++ b/performance/src/components/NestedTree/index.js
--- a/performance/src/components/Tweet/index.js
+++ b/performance/src/components/Tweet/index.js
--- a/performance/src/components/TweetAction/index.js
+++ b/performance/src/components/TweetAction/index.js
--- a/performance/src/components/TweetActionsBar/index.js
+++ b/performance/src/components/TweetActionsBar/index.js
--- a/performance/src/components/TweetText/index.js
+++ b/performance/src/components/TweetText/index.js
--- a/performance/src/components/TweetTextPart/index.js
+++ b/performance/src/components/TweetTextPart/index.js
--- a/performance/src/components/UserAvatar/index.js
+++ b/performance/src/components/UserAvatar/index.js
--- a/performance/src/components/UserNames/index.js
+++ b/performance/src/components/UserNames/index.js
--- a/performance/src/components/View/aphrodite.js
+++ b/performance/src/components/View/aphrodite.js
@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { css, StyleSheet } from 'aphrodite';
+
+const View = ({ style, ...other }) => <div {...other} className={css(styles.root, style)} />;
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // button and anchor reset
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    textDecoration: 'none',
+    // list reset
+    listStyle: 'none',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+module.exports = View;
--- a/performance/components/View/index.css-modules.js
+++ b/performance/components/View/index.css-modules.js
--- a/performance/components/View/index.glamor.js
+++ b/performance/components/View/index.glamor.js
@@ -2,7 +2,7 @@
 import { css } from 'glamor';
 import React from 'react';

-const View = ({ style, ...props}) => <div {...props} className={css(viewStyle, ...style)} />;
+const View = ({ style, ...other }) => <div {...other} className={css(viewStyle, ...style)} />;

 const viewStyle = {
  alignItems: 'stretch',
--- a/performance/src/components/View/jss.js
+++ b/performance/src/components/View/jss.js
@@ -0,0 +1,37 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import injectSheet from 'react-jss';
+import React from 'react';
+
+const View = ({ classes, className, ...other }) => (
+  <div {...other} className={classnames(classes.root, className)} />
+);
+
+const styles = {
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // button and anchor reset
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    textDecorationLine: 'none',
+    // list reset
+    listStyle: 'none',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+};
+
+module.exports = injectSheet(styles)(View);
--- a/performance/src/components/View/react-native-stylesheet.js
+++ b/performance/src/components/View/react-native-stylesheet.js
@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StyleSheet from 'react-native/apis/StyleSheet';
+import registry from 'react-native/apis/StyleSheet/registry';
+import createDOMProps from 'react-native/modules/createDOMProps';
+
+const View = props => (
+  <div {...createDOMProps(props, style => registry.resolve([styles.root, style]))} />
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // button and anchor reset
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'inherit',
+    textDecoration: 'none',
+    // list reset
+    listStyle: 'none',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+module.exports = View;
--- a/performance/src/components/View/styled-components.js
+++ b/performance/src/components/View/styled-components.js
--- a/performance/src/components/View/styles.css
+++ b/performance/src/components/View/styles.css
--- a/performance/src/components/theme.js
+++ b/performance/src/components/theme.js
--- a/performance/src/css-modules.js
+++ b/performance/src/css-modules.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/css-modules';
+import View from './components/View/css-modules';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/glamor.js
+++ b/performance/src/glamor.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/glamor';
+import View from './components/View/glamor';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/jss.js
+++ b/performance/src/jss.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/jss';
+import View from './components/View/jss';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/react-native-stylesheet.js
+++ b/performance/src/react-native-stylesheet.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/react-native-stylesheet';
+import View from './components/View/react-native-stylesheet';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/react-native.js
+++ b/performance/src/react-native.js
@@ -0,0 +1,9 @@
+import Box from './components/Box/react-native';
+import Tweet from './components/Tweet';
+import { View } from 'react-native';
+
+export default {
+  Box,
+  Tweet,
+  View
+};
--- a/performance/src/reactxp.js
+++ b/performance/src/reactxp.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/reactxp';
+import { View } from 'reactxp';
+
+export default {
+  Box,
+  View
+};
--- a/performance/src/styled-components.js
+++ b/performance/src/styled-components.js
@@ -0,0 +1,7 @@
+import Box from './components/Box/styled-components';
+import View from './components/View/styled-components';
+
+export default {
+  Box,
+  View
+};
--- a/performance/tests/renderDeepTree.js
+++ b/performance/tests/renderDeepTree.js
@@ -1,5 +1,5 @@
 import createRenderBenchmark from '../createRenderBenchmark';
-import NestedTree from '../components/NestedTree';
+import NestedTree from '../src/components/NestedTree';
 import React from 'react';

 const renderDeepTree = (label, components) => createRenderBenchmark({
--- a/performance/tests/renderTweet.js
+++ b/performance/tests/renderTweet.js
@@ -1,5 +1,5 @@
 import createRenderBenchmark from '../createRenderBenchmark';
-import Tweet from '../components/Tweet';
+import Tweet from '../src/components/Tweet';
 import React from 'react';

 const tweet1 = {
--- a/performance/tests/renderWideTree.js
+++ b/performance/tests/renderWideTree.js
@@ -1,5 +1,5 @@
 import createRenderBenchmark from '../createRenderBenchmark';
-import NestedTree from '../components/NestedTree';
+import NestedTree from '../src/components/NestedTree';
 import React from 'react';

 const renderWideTree = (label, components) => createRenderBenchmark({
--- a/performance/yarn.lock
+++ b/performance/yarn.lock
@@ -14,16 +14,30 @@ ansi-styles@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"

+aphrodite@^1.2.0:
+  version "1.2.0"
+  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/aphrodite/-/aphrodite-1.2.0.tgz#c2f30bd1cdf6a550f4a29a0f1cf22ed10e825764"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^3.0.1"
+    string-hash "^1.1.3"
+
 argparse@^1.0.7:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
  dependencies:
    sprintf-js "~1.0.2"

-asap@~2.0.3:
+asap@^2.0.3, asap@~2.0.3:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"

+assert@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
 autoprefixer@^6.3.1:
  version "6.7.5"
  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.5.tgz#50848f39dc08730091d9495023487e7cc21f518d"
@@ -62,7 +76,7 @@ big.js@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"

-bowser@^1.0.0:
+bowser@^1.0.0, bowser@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d"

@@ -175,6 +189,12 @@ css-color-names@0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"

+css-in-js-utils@^1.0.3:
+  version "1.0.3"
+  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+
 css-loader@^0.26.2:
  version "0.26.2"
  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.2.tgz#a9cd4c2b1a559b45d8efc04fc311ab5d2aaccb9d"
@@ -216,6 +236,12 @@ css-to-react-native@2.0.1:
    fbjs "^0.8.5"
    postcss-value-parser "^3.3.0"

+css-vendor@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
+  dependencies:
+    is-in-browser "^1.0.2"
+
 cssesc@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -302,7 +328,7 @@ fastparse@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"

-fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9:
+fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9:
  version "0.8.9"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
  dependencies:
@@ -354,11 +380,15 @@ has@^1.0.1:
  dependencies:
    function-bind "^1.0.2"

+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 html-comment-regex@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"

-hyphenate-style-name@^1.0.1:
+hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"

@@ -374,10 +404,18 @@ ieee754@^1.1.4:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"

+ifvisible.js@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/ifvisible.js/-/ifvisible.js-1.0.6.tgz#52eb151ce89c56f15316226462e892d1f8451261"
+
 indexes-of@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"

+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
 inline-style-prefixer@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
@@ -385,6 +423,13 @@ inline-style-prefixer@^2.0.5:
    bowser "^1.0.0"
    hyphenate-style-name "^1.0.1"

+inline-style-prefixer@^3.0.1:
+  version "3.0.2"
+  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/inline-style-prefixer/-/inline-style-prefixer-3.0.2.tgz#989865e0c5de7a946acbea71e16e02741efe0dd7"
+  dependencies:
+    bowser "^1.6.0"
+    css-in-js-utils "^1.0.3"
+
 is-absolute-url@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -393,6 +438,10 @@ is-function@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"

+is-in-browser@1.0.2, is-in-browser@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.0.2.tgz#f688bea8f1e5aadc3244ebc870d188cfb9b613cf"
+
 is-plain-obj@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -447,6 +496,71 @@ json5@^0.5.0:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"

+jss-camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-3.0.0.tgz#46aa18eb149e95afce074532ad47df1c2a7d45cb"
+
+jss-compose@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-2.1.0.tgz#3751d613fb61c715e3d91140dea5f1794968847d"
+  dependencies:
+    warning "^3.0.0"
+
+jss-default-unit@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-5.0.3.tgz#b9450f31c37feaed3151554b2938363974780af1"
+
+jss-expand@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-2.1.0.tgz#dc0f458304a9f597b524dd4ae773ea29adcb3d27"
+
+jss-extend@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-3.0.1.tgz#aeb5846f1650d7590c686b5c1932b44a3721742d"
+  dependencies:
+    warning "^3.0.0"
+
+jss-global@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-0.4.1.tgz#41862c78528de4d333853004eb71adecde1a5fda"
+
+jss-nested@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-3.0.1.tgz#14c10265c8fc5bd61b450b48f1e9fb36d90ae569"
+  dependencies:
+    warning "^3.0.0"
+
+jss-preset-default@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-1.3.1.tgz#8a4b7f9a41ec412d19fb1d23e6dc80ebef040d5a"
+  dependencies:
+    jss-camel-case "^3.0.0"
+    jss-compose "^2.0.0"
+    jss-default-unit "^5.0.2"
+    jss-expand "^2.0.3"
+    jss-extend "^3.0.0"
+    jss-global "^0.4.1"
+    jss-nested "^3.0.1"
+    jss-props-sort "^3.0.0"
+    jss-vendor-prefixer "^4.0.0"
+
+jss-props-sort@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-3.0.0.tgz#19544610109b1fa953f22799eecb080240d8dc00"
+
+jss-vendor-prefixer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-4.0.0.tgz#df16a8fcc6ecb4567394174e6ab90145cf8b34a3"
+  dependencies:
+    css-vendor "^0.3.8"
+
+jss@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-6.5.0.tgz#9294a367b658daa2036c36f563ff6bfb0c7b12a1"
+  dependencies:
+    is-in-browser "1.0.2"
+    warning "3.0.0"
+
 loader-utils@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.2.tgz#a9f923c865a974623391a8602d031137fad74830"
@@ -467,6 +581,10 @@ lodash.uniq@^4.3.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

+lodash@^4.17.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 loose-envify@^1.0.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@@ -782,6 +900,35 @@ query-string@^4.1.0:
    object-assign "^4.1.0"
    strict-uri-encode "^1.0.0"

+react-addons-perf@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
+react-jss@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-5.4.1.tgz#96670fdab022c1e79928e530a482f67b0d82fc5b"
+  dependencies:
+    hoist-non-react-statics "^1.2.0"
+    jss "^6.5.0"
+    jss-preset-default "^1.0.0"
+
+reactxp@^0.34.3:
+  version "0.34.3"
+  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.34.3.tgz#6481992e57758ae6ffffbfde3d497527bb495032"
+  dependencies:
+    assert "^1.3.0"
+    ifvisible.js "^1.0.6"
+    lodash "^4.17.1"
+    rebound "^0.0.13"
+    synctasks "^0.2.9"
+
+rebound@^0.0.13:
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/rebound/-/rebound-0.0.13.tgz#4a225254caf7da756797b19c5817bf7a7941fac1"
+
 reduce-css-calc@^1.2.6:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -852,6 +999,10 @@ strict-uri-encode@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"

+string-hash@^1.1.3:
+  version "1.1.3"
+  resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+
 strip-ansi@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -879,8 +1030,8 @@ styled-components@2.0.0-7:
    supports-color "^3.2.3"

 stylis@^1.2.0:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-1.2.6.tgz#d7e72d3c8de52684a4f6cc82b3086e3634dc3c13"
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-1.2.8.tgz#feba55055a8a1bf8a76a659084a91d729920fa92"

 supports-color@^2.0.0:
  version "2.0.0"
@@ -904,6 +1055,10 @@ svgo@^0.7.0:
    sax "~1.2.1"
    whet.extend "~0.9.9"

+synctasks@^0.2.9:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.2.17.tgz#38852f008878de2e941b6e458ddf552245268da1"
+
 ua-parser-js@^0.7.9:
  version "0.7.12"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
@@ -922,10 +1077,22 @@ uniqs@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"

+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
 vendors@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"

+warning@3.0.0, warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 whatwg-fetch@>=0.10.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"