StyleSheet with styleq runtime

.flowconfig

@@ -1,11 +1,12 @@
 [version]
-^0.148.0
+0.148.0
 
 [ignore]
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/docs/.*
 <PROJECT_ROOT>/packages/examples/.*
+.*/node_modules/.*/.*.json
 .*/node_modules/@emotion/css/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*
 

flow-typed/npm/styleq.js

@@ -0,0 +1,34 @@
+type CompiledStyle = {
+  $$css: boolean,
+  [key: string]: string,
+};
+
+type InlineStyle = {
+  [key: string]: mixed,
+};
+
+type EitherStyle = CompiledStyle | InlineStyle;
+
+type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
+type Styles = StylesArray<CompiledStyle | InlineStyle | false>;
+type Style<+T = EitherStyle> = StylesArray<false | ?T>;
+
+type StyleqOptions = {
+  disableCache?: boolean,
+  disableMix?: boolean,
+  transform?: (CompiledStyle) => CompiledStyle,
+};
+
+type StyleqResult = [string, InlineStyle | null];
+type Styleq = (styles: Styles) => StyleqResult;
+
+type IStyleq = {
+  (...styles: $ReadOnlyArray<Styles>): StyleqResult,
+  factory: (options?: StyleqOptions) => Styleq,
+};
+
+declare module "styleq" {
+  declare module.exports: {
+    styleq: IStyleq
+  };
+}

package.json

@@ -52,19 +52,19 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "flow-bin": "^0.148.0",
+    "flow-bin": "0.148.0",
     "gen-flow-files": "^0.4.11",
     "glob": "^7.1.6",
     "husky": "^4.3.8",
     "inline-style-prefixer": "^6.0.0",
-    "jest": "^25.5.0",
+    "jest": "^27.2.4",
     "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.3",
     "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2"
   },
   "workspaces": [
     "packages/*"

packages/benchmarks/package.json

@@ -7,11 +7,9 @@
     "build": "NODE_ENV=production yarn dev"
   },
   "dependencies": {
-    "aphrodite": "^2.4.0",
-    "classnames": "^2.2.6",
-    "d3-scale-chromatic": "^2.0.0",
     "@emotion/css": "^11.1.3",
-    "react-jss": "^10.5.1",
+    "classnames": "^2.3.1",
+    "d3-scale-chromatic": "^2.0.0",
     "react-native-web": "0.17.5",
     "styled-components": "^5.2.1"
   },

packages/benchmarks/src/impl.js

@@ -10,7 +10,6 @@ type ComponentsType = {
   Box: Component,
   Dot: Component,
   Provider: Component,
-  TextBox: Component,
   View: Component
 };
 

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './dot-styles.css';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    className={styles.root}
+    style={Object.assign(
+      {},
+      {
+        borderBottomColor: color,
+        borderRightWidth: `${size / 2}px`,
+        borderBottomWidth: `${size / 2}px`,
+        borderLeftWidth: `${size / 2}px`
+      },
+      {
+        marginLeft: `${x}px`,
+        marginTop: `${y}px`
+      }
+    )}
+  >
+    {children}
+  </div>
+);
+
+export default Dot;

packages/benchmarks/src/implementations/css-modules/dot-styles.css

@@ -0,0 +1,10 @@
+.root {
+  position: absolute;
+  cursor: pointer;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-top-width: 0;
+  transform: translate(50%, 50%);
+}

packages/benchmarks/src/implementations/css-modules/index.js

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

packages/benchmarks/src/implementations/inline-styles/Dot.js

@@ -2,17 +2,20 @@ import React from 'react';
 
 const Dot = ({ size, x, y, children, color }) => (
   <div
-    style={{
-      ...styles.root,
-      ...{
+    style={Object.assign(
+      {},
+      styles.root,
+      {
         borderBottomColor: color,
         borderRightWidth: `${size / 2}px`,
         borderBottomWidth: `${size / 2}px`,
-        borderLeftWidth: `${size / 2}px`,
+        borderLeftWidth: `${size / 2}px`
+      },
+      {
         marginLeft: `${x}px`,
         marginTop: `${y}px`
       }
-    }}
+    )}
   >
     {children}
   </div>

packages/benchmarks/src/implementations/react-native-web/index.js

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