StyleSheet with styleq runtime

.eslintrc

@@ -118,7 +118,7 @@
     "no-with": 2,
     "prefer-const": 2,
     "prefer-rest-params": 2,
-    "quotes": [2, "single", "avoid-escape"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
     "radix": 2,
     "use-isnan": 2,
     "valid-typeof": 2,

.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

@@ -19,7 +19,9 @@
     "flow": "flow",
     "fmt": "prettier --write \"**/*.js\"",
     "fmt:report": "prettier --check \"**/*.js\"",
-    "jest": "jest --config ./scripts/jest/config.js",
+    "jest": "npm-run-all \"jest:* {@}\" --",
+    "jest:dom": "jest --config ./scripts/jest/config.js",
+    "jest:node": "jest --config ./scripts/jest/config.node.js",
     "lint": "yarn lint:report --fix",
     "lint:report": "eslint packages scripts",
     "prerelease": "yarn test && yarn compile",
@@ -52,19 +54,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,13 +7,9 @@
     "build": "NODE_ENV=production yarn dev"
   },
   "dependencies": {
-    "aphrodite": "^2.4.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "d3-scale-chromatic": "^2.0.0",
-    "@emotion/css": "^11.1.3",
-    "react-jss": "^10.5.1",
-    "react-native-web": "0.17.5",
-    "styled-components": "^5.2.1"
+    "react-native-web": "0.17.5"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "0.17.5",

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,20 @@
+import React from 'react';
+import styles from './dot-styles.css';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    className={styles.root}
+    style={{
+      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/css-modules/view-styles.css

@@ -1,15 +1,18 @@
 .initial {
   align-items: stretch;
+  background-color: transparent;
   border-width: 0;
   border-style: solid;
   box-sizing: border-box;
   display: flex;
   flex-basis: auto;
   flex-direction: column;
   flex-shrink: 0;
+  list-style: none;
   margin: 0;
-  padding: 0;
-  position: relative;
   min-height: 0;
   min-width: 0;
+  padding: 0;
+  position: relative;
+  z-index: 0;
 }

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

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

@@ -17,19 +17,20 @@ class View extends React.Component {
 
 const viewStyle = {
   alignItems: 'stretch',
-  borderWidth: 0,
-  borderStyle: 'solid',
+  backgroundColor: 'transparent',
+  border: '0 solid black',
   boxSizing: 'border-box',
   display: 'flex',
   flexBasis: 'auto',
   flexDirection: 'column',
   flexShrink: 0,
+  listStyle: 'none',
   margin: 0,
+  minHeight: 0,
+  minWidth: 0,
   padding: 0,
   position: 'relative',
-  // fix flexbox bugs
-  minHeight: 0,
-  minWidth: 0
+  zIndex: 0
 };
 
 export default View;