Update benchmarks dependencies

Remove styled-jsx as it now throws "_JSXStyle is not defined". Library isn't
particularly fast and each update causes issues. Drop it.

packages/benchmarks/package.json

@@ -10,19 +10,18 @@
     "aphrodite": "^2.4.0",
     "classnames": "^2.2.6",
     "d3-scale-chromatic": "^2.0.0",
-    "@emotion/css": "^11.0.0",
-    "react-jss": "^10.5.0",
+    "@emotion/css": "^11.1.3",
+    "react-jss": "^10.5.1",
     "react-native-web": "0.14.13",
-    "styled-components": "^5.2.1",
-    "styled-jsx": "^3.3.2"
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "0.14.13",
-    "css-loader": "^3.4.2",
-    "style-loader": "^1.1.3",
-    "url-loader": "^3.0.0",
-    "webpack": "^4.41.5",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
+    "css-loader": "^5.0.2",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.21.2",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0"
   }
 }

packages/benchmarks/src/implementations/styled-jsx/Box.js

@@ -1,45 +0,0 @@
-import classnames from 'classnames';
-import React from 'react';
-import View from './View';
-
-const getColor = (color) => {
-  switch (color) {
-    case 0:
-      return '#14171A';
-    case 1:
-      return '#AAB8C2';
-    case 2:
-      return '#E6ECF0';
-    case 3:
-      return '#FFAD1F';
-    case 4:
-      return '#F45D22';
-    case 5:
-      return '#E0245E';
-    default:
-      return 'transparent';
-  }
-};
-
-const Box = (props) => {
-  const { className, children: styles } = (
-    <scope className={classnames('Box', props.fixed && 'fixed')}>
-      <style jsx>{`
-        .Box {
-          align-self: flex-start;
-          flex-direction: ${props.layout === 'column' ? 'column' : 'row'};
-          padding: ${props.outer ? '4px' : '0'};
-          background-color: ${getColor(props.color)};
-        }
-        .fixed {
-          height: 6px;
-          width: 6px;
-        }
-      `}</style>
-    </scope>
-  ).props;
-
-  return <View className={className}>{[props.children, styles]}</View>;
-};
-
-export default Box;

packages/benchmarks/src/implementations/styled-jsx/Dot.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import View from './View';
-
-const Dot = (props) => {
-  const { className, children: styles } = (
-    <scope className="Dot">
-      <style jsx>{`
-        .Dot {
-          position: absolute;
-          cursor: pointer;
-          width: 0;
-          height: 0;
-          border-color: transparent;
-          border-style: solid;
-          border-top-width: 0;
-          transform: translate(50%, 50%);
-        }
-      `}</style>
-      <style jsx>{`
-        .Dot {
-          margin-left: ${props.x}px;
-          margin-top: ${props.y}px;
-          border-right-width: ${props.size / 2}px;
-          border-bottom-width: ${props.size / 2}px;
-          border-left-width: ${props.size / 2}px;
-          border-bottom-color: ${props.color};
-        }
-      `}</style>
-    </scope>
-  ).props;
-
-  return <View className={className}>{[props.children, styles]}</View>;
-};
-
-export default Dot;

packages/benchmarks/src/implementations/styled-jsx/Provider.js

@@ -1,2 +0,0 @@
-import View from './View';
-export default View;

packages/benchmarks/src/implementations/styled-jsx/View.js

@@ -1,31 +0,0 @@
-import React from 'react';
-
-class View extends React.Component {
-  render() {
-    const { children, className, ...props } = this.props;
-    return (
-      <div {...props} className={`initial ${className}`}>
-        {children}
-        <style jsx>{`
-          .initial {
-            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;
-            min-height: 0;
-            min-width: 0;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default View;

packages/benchmarks/src/implementations/styled-jsx/index.js

@@ -1,11 +0,0 @@
-import Box from './Box';
-import Dot from './Dot';
-import Provider from './Provider';
-import View from './View';
-
-export default {
-  Box,
-  Dot,
-  Provider,
-  View
-};

packages/benchmarks/webpack.config.js

@@ -38,8 +38,7 @@ module.exports = {
           loader: 'babel-loader',
           options: {
             cacheDirectory: false,
-            presets: [babelPreset],
-            plugins: ['styled-jsx/babel']
+            presets: [babelPreset]
           }
         }
       }