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,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;