Update benchmarks to use unitless values

lewisl9029 · lewisl9029 · commit 4fa587a3d630 · 2021-12-06T20:14:16.000-08:00
diff --git a/benchmarks/src/implementations/use-classes-published/Box.js b/benchmarks/src/implementations/use-classes-published/Box.js
@@ -3,34 +3,34 @@ import { useClasses } from "./useClasses.js";
 
 const styles = {
   outer: {
-    "align-self": "flex-start",
-    padding: "4px",
+    alignSelf: "flex-start",
+    padding: 4
   },
   row: {
-    "flex-direction": "row",
+    flexDirection: "row"
   },
   color0: {
-    "background-color": "#14171A",
+    backgroundColor: "#14171A"
   },
   color1: {
-    "background-color": "#AAB8C2",
+    backgroundColor: "#AAB8C2"
   },
   color2: {
-    "background-color": "#E6ECF0",
+    backgroundColor: "#E6ECF0"
   },
   color3: {
-    "background-color": "#FFAD1F",
+    backgroundColor: "#FFAD1F"
   },
   color4: {
-    "background-color": "#F45D22",
+    backgroundColor: "#F45D22"
   },
   color5: {
-    "background-color": "#E0245E",
+    backgroundColor: "#E0245E"
   },
   fixed: {
-    width: "6px",
-    height: "6px",
-  },
+    width: 6,
+    height: 6
+  }
 };
 
 export default function Box({
@@ -43,24 +43,24 @@ export default function Box({
   return (
     <div
       className={useClasses()({
-        "align-items": "stretch",
-        "border-width": "0",
-        "border-style": "solid",
-        "box-sizing": "border-box",
+        alignItems: "stretch",
+        borderWidth: 0,
+        borderStyle: "solid",
+        boxSizing: "border-box",
         display: "flex",
-        "flex-basis": "auto",
-        "flex-direction": "column",
-        "flex-shrink": "0",
-        margin: "0",
-        padding: "0",
+        flexBasis: "auto",
+        flexDirection: "column",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        "min-height": "0",
-        "min-width": "0",
+        minHeight: 0,
+        minWidth: 0,
         ...styles[`color${color}`],
         ...(fixed ? styles.fixed : {}),
         ...(layout === "row" ? styles.row : {}),
-        ...(outer ? styles.outer : {}),
+        ...(outer ? styles.outer : {})
       })}
       {...{ color, fixed, layout, outer, ...props }}
     />
diff --git a/benchmarks/src/implementations/use-classes-published/Dot.js b/benchmarks/src/implementations/use-classes-published/Dot.js
@@ -9,19 +9,19 @@ export default function Dot({ color, size, x, y }) {
       className={useClasses()({
         position: "absolute",
         cursor: "pointer",
-        width: "0",
-        height: "0",
-        "border-color": "transparent",
-        "border-style": "solid",
-        "border-top-width": "0",
+        width: 0,
+        height: 0,
+        borderColor: "transparent",
+        borderStyle: "solid",
+        borderTopWidth: 0,
         transform: "translate(50%, 50%)",
-        "border-right-width": `${size / 2}px`,
-        "border-bottom-width": `${size / 2}px`,
-        "border-left-width": `${size / 2}px`,
-        "margin-left": `${x}px`,
-        "margin-top": `${y}px`
+        borderRightWidth: size / 2,
+        borderBottomWidth: size / 2,
+        borderLeftWidth: size / 2,
+        marginLeft: x,
+        marginTop: y
       })}
-      style={{ "border-bottom-color": color }}
+      style={{ borderBottomColor: color }}
     />
   );
 }
diff --git a/benchmarks/src/implementations/use-classes-published/View.js b/benchmarks/src/implementations/use-classes-published/View.js
@@ -7,20 +7,20 @@ export default function View({ className, ...props }) {
     <div
       {...props}
       className={useClasses()({
-        "align-items": "stretch",
-        "border-width": "0",
-        "border-style": "solid",
-        "box-sizing": "border-box",
+        alignItems: "stretch",
+        borderWidth: 0,
+        borderStyle: "solid",
+        boxSizing: "border-box",
         display: "flex",
-        "flex-basis": "auto",
-        "flex-direction": "column",
-        "flex-shrink": "0",
-        margin: "0",
-        padding: "0",
+        flexBasis: "auto",
+        flexDirection: "column",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        "min-height": "0",
-        "min-width": "0",
+        minHeight: 0,
+        minWidth: 0
       })}
     />
   );
diff --git a/benchmarks/src/implementations/use-classes-themed/Box.js b/benchmarks/src/implementations/use-classes-themed/Box.js
@@ -4,7 +4,7 @@ import { useClasses } from "./useClasses.js";
 const styles = {
   outer: {
     alignSelf: "flex-start",
-    padding: "4px"
+    padding: 4
   },
   row: {
     flexDirection: "row"
@@ -28,8 +28,8 @@ const styles = {
     backgroundColor: "#E0245E"
   },
   fixed: {
-    width: "6px",
-    height: "6px"
+    width: 6,
+    height: 6
   }
 };
 
@@ -44,19 +44,19 @@ export default function Box({
     <div
       className={useClasses()({
         alignItems: "stretch",
-        borderWidth: "0",
+        borderWidth: 0,
         borderStyle: "solid",
         boxSizing: "border-box",
         display: "flex",
         flexBasis: "auto",
         flexDirection: "column",
-        flexShrink: "0",
-        margin: "0",
-        padding: "0",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        minHeight: "0",
-        minWidth: "0",
+        minHeight: 0,
+        minWidth: 0,
         backgroundColor: theme => theme[`color${color}`],
         ...(fixed ? styles.fixed : {}),
         ...(layout === "row" ? styles.row : {}),
diff --git a/benchmarks/src/implementations/use-classes-themed/Dot.js b/benchmarks/src/implementations/use-classes-themed/Dot.js
@@ -9,17 +9,17 @@ export default function Dot({ color, size, x, y }) {
       className={useClasses()({
         position: "absolute",
         cursor: "pointer",
-        width: "0",
-        height: "0",
+        width: 0,
+        height: 0,
         borderColor: "transparent",
         borderStyle: "solid",
-        borderTopWidth: "0",
+        borderTopWidth: 0,
         transform: "translate(50%, 50%)",
-        borderRightWidth: `${size / 2}px`,
-        borderBottomWidth: `${size / 2}px`,
-        borderLeftWidth: `${size / 2}px`,
-        marginLeft: `${x}px`,
-        marginTop: `${y}px`
+        borderRightWidth: size / 2,
+        borderBottomWidth: size / 2,
+        borderLeftWidth: size / 2,
+        marginLeft: x,
+        marginTop: y
       })}
       style={{ borderBottomColor: color }}
     />
diff --git a/benchmarks/src/implementations/use-classes-themed/View.js b/benchmarks/src/implementations/use-classes-themed/View.js
@@ -8,19 +8,19 @@ export default function View({ className, ...props }) {
       {...props}
       className={useClasses()({
         alignItems: "stretch",
-        borderWidth: "0",
+        borderWidth: 0,
         borderStyle: "solid",
         boxSizing: "border-box",
         display: "flex",
         flexBasis: "auto",
         flexDirection: "column",
-        flexShrink: "0",
-        margin: "0",
-        padding: "0",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        minHeight: "0",
-        minWidth: "0"
+        minHeight: 0,
+        minWidth: 0
       })}
     />
   );
diff --git a/benchmarks/src/implementations/use-classes/Box.js b/benchmarks/src/implementations/use-classes/Box.js
@@ -4,7 +4,7 @@ import { useClasses } from "./useClasses.js";
 const styles = {
   outer: {
     alignSelf: "flex-start",
-    padding: "4px"
+    padding: 4
   },
   row: {
     flexDirection: "row"
@@ -28,8 +28,8 @@ const styles = {
     backgroundColor: "#E0245E"
   },
   fixed: {
-    width: "6px",
-    height: "6px"
+    width: 6,
+    height: 6
   }
 };
 
@@ -44,19 +44,19 @@ export default function Box({
     <div
       className={useClasses()({
         alignItems: "stretch",
-        borderWidth: "0",
+        borderWidth: 0,
         borderStyle: "solid",
         boxSizing: "border-box",
         display: "flex",
         flexBasis: "auto",
         flexDirection: "column",
-        flexShrink: "0",
-        margin: "0",
-        padding: "0",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        minHeight: "0",
-        minWidth: "0",
+        minHeight: 0,
+        minWidth: 0,
         ...styles[`color${color}`],
         ...(fixed ? styles.fixed : {}),
         ...(layout === "row" ? styles.row : {}),
diff --git a/benchmarks/src/implementations/use-classes/Dot.js b/benchmarks/src/implementations/use-classes/Dot.js
@@ -9,17 +9,17 @@ export default function Dot({ color, size, x, y }) {
       className={useClasses()({
         position: "absolute",
         cursor: "pointer",
-        width: "0",
-        height: "0",
+        width: 0,
+        height: 0,
         borderColor: "transparent",
         borderStyle: "solid",
-        borderTopWidth: "0",
+        borderTopWidth: 0,
         transform: "translate(50%, 50%)",
-        borderRightWidth: `${size / 2}px`,
-        borderBottomWidth: `${size / 2}px`,
-        borderLeftWidth: `${size / 2}px`,
-        marginLeft: `${x}px`,
-        marginTop: `${y}px`
+        borderRightWidth: size / 2,
+        borderBottomWidth: size / 2,
+        borderLeftWidth: size / 2,
+        marginLeft: x,
+        marginTop: y
       })}
       style={{ borderBottomColor: color }}
     />
diff --git a/benchmarks/src/implementations/use-classes/View.js b/benchmarks/src/implementations/use-classes/View.js
@@ -8,19 +8,19 @@ export default function View({ className, ...props }) {
       {...props}
       className={useClasses()({
         alignItems: "stretch",
-        borderWidth: "0",
+        borderWidth: 0,
         borderStyle: "solid",
         boxSizing: "border-box",
         display: "flex",
         flexBasis: "auto",
         flexDirection: "column",
-        flexShrink: "0",
-        margin: "0",
-        padding: "0",
+        flexShrink: 0,
+        margin: 0,
+        padding: 0,
         position: "relative",
         // fix flexbox bugs
-        minHeight: "0",
-        minWidth: "0"
+        minHeight: 0,
+        minWidth: 0
       })}
     />
   );
