Update benchmark libraries

Remove the slow and rarely-used libraries from the suite of implementations.
Update the remaining packages.

Close #1838

Author: necolas

.flowconfig

@@ -5,6 +5,7 @@
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/docs/.*
+.*/node_modules/@emotion/css/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*
 
 [include]

packages/benchmarks/package.json

@@ -9,17 +9,12 @@
   "dependencies": {
     "aphrodite": "^2.4.0",
     "classnames": "^2.2.6",
-    "d3-scale-chromatic": "^1.5.0",
-    "emotion": "^10.0.27",
-    "fela": "^11.0.2",
-    "react-fela": "^11.0.2",
-    "react-jss": "^10.0.4",
+    "d3-scale-chromatic": "^2.0.0",
+    "@emotion/css": "^11.0.0",
+    "react-jss": "^10.5.0",
     "react-native-web": "0.14.9",
-    "reactxp": "^2.0.0",
-    "styled-components": "^5.0.0",
-    "styled-jsx": "^3.2.4",
-    "styletron-engine-atomic": "^1.4.4",
-    "styletron-react": "^5.2.6"
+    "styled-components": "^5.2.1",
+    "styled-jsx": "^3.3.2"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "0.14.9",

packages/benchmarks/src/implementations/emotion/Dot.js

@@ -1,16 +1,19 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const Dot = ({ size, x, y, children, color }) => (
   <div
-    className={css(styles.root, {
-      borderBottomColor: color,
-      borderRightWidth: `${size / 2}px`,
-      borderBottomWidth: `${size / 2}px`,
-      borderLeftWidth: `${size / 2}px`,
-      marginLeft: `${x}px`,
-      marginTop: `${y}px`
-    })}
+    className={css([
+      styles.root,
+      {
+        borderBottomColor: color,
+        borderRightWidth: `${size / 2}px`,
+        borderBottomWidth: `${size / 2}px`,
+        borderLeftWidth: `${size / 2}px`,
+        marginLeft: `${x}px`,
+        marginTop: `${y}px`
+      }
+    ])}
   >
     {children}
   </div>

packages/benchmarks/src/implementations/emotion/View.js

@@ -1,10 +1,10 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 class View extends React.Component {
   render() {
     const { style, ...other } = this.props;
-    return <div {...other} className={css(viewStyle, ...style)} />;
+    return <div {...other} className={css([viewStyle, ...style])} />;
   }
 }
 

packages/benchmarks/src/implementations/react-fela/Box.js

@@ -1,16 +1,16 @@
 import styled from 'styled-components';
 import View from './View';
 
-const Dot = styled(View).attrs({
-  style: props => ({
+const Dot = styled(View).attrs(props => ({
+  style: {
     marginLeft: `${props.x}px`,
     marginTop: `${props.y}px`,
     borderRightWidth: `${props.size / 2}px`,
     borderBottomWidth: `${props.size / 2}px`,
     borderLeftWidth: `${props.size / 2}px`,
     borderBottomColor: `${props.color}`
-  })
-})`
+  }
+}))`
   position: absolute;
   cursor: pointer;
   width: 0;