css-jss case

Author: kof

packages/benchmarks/package.json

@@ -15,7 +15,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-fela": "^10.2.1",
-    "react-jss": "/Users/isonen/work/cssinjs/jss/packages/react-jss/",
+    "react-jss": "^10.0.0-alpha.20",
     "react-native-web": "0.11.4",
     "reactxp": "^1.6.0-rc.3",
     "styled-components": "^4.1.3",

packages/benchmarks/src/implementations/css-jss/Box.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import View from './View';
+import css from 'css-jss';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    className={css({
+      ...styles[`color${color}`],
+      ...(fixed && styles.fixed),
+      ...(layout === 'row' && styles.row),
+      ...(outer && styles.outer)
+    })}
+  />
+);
+
+const styles = {
+  outer: {
+    alignSelf: 'flex-start',
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#14171A'
+  },
+  color1: {
+    backgroundColor: '#AAB8C2'
+  },
+  color2: {
+    backgroundColor: '#E6ECF0'
+  },
+  color3: {
+    backgroundColor: '#FFAD1F'
+  },
+  color4: {
+    backgroundColor: '#F45D22'
+  },
+  color5: {
+    backgroundColor: '#E0245E'
+  },
+  fixed: {
+    width: 6,
+    height: 6
+  }
+};
+
+export default Box;

packages/benchmarks/src/implementations/css-jss/Dot.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import css from 'css-jss';
+
+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`
+    })}
+  >
+    {children}
+  </div>
+);
+
+const styles = {
+  root: css({
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    transform: 'translate(50%, 50%)'
+  })
+};
+
+export default Dot;

packages/benchmarks/src/implementations/react-jss/Provider.js renamed to packages/benchmarks/src/implementations/css-jss/Provider.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import React from 'react';
+import css from 'css-jss';
+
+class View extends React.Component {
+  render() {
+    const { className, ...other } = this.props;
+    return <div {...other} className={classnames(css(styles.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',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+};
+
+export default View;

packages/benchmarks/src/implementations/css-jss/View.js

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

packages/benchmarks/src/implementations/react-jss/index.js renamed to packages/benchmarks/src/implementations/css-jss/index.js

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