Skip to content

Commit

Permalink
Update benchmarks to use unitless values
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewisl9029
lewisl9029 committed Dec 7, 2021
1 parent 0d56ca9 commit 4fa587a
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 92 deletions.
48 changes: 24 additions & 24 deletions benchmarks/src/implementations/use-classes-published/Box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 }}
/>
Expand Down
22 changes: 11 additions & 11 deletions benchmarks/src/implementations/use-classes-published/Dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>
);
}
22 changes: 11 additions & 11 deletions benchmarks/src/implementations/use-classes-published/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})}
/>
);
Expand Down
18 changes: 9 additions & 9 deletions benchmarks/src/implementations/use-classes-themed/Box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useClasses } from "./useClasses.js";
const styles = {
outer: {
alignSelf: "flex-start",
padding: "4px"
padding: 4
},
row: {
flexDirection: "row"
Expand All @@ -28,8 +28,8 @@ const styles = {
backgroundColor: "#E0245E"
},
fixed: {
width: "6px",
height: "6px"
width: 6,
height: 6
}
};

Expand All @@ -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 : {}),
Expand Down
16 changes: 8 additions & 8 deletions benchmarks/src/implementations/use-classes-themed/Dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>
Expand Down
12 changes: 6 additions & 6 deletions benchmarks/src/implementations/use-classes-themed/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})}
/>
);
Expand Down
18 changes: 9 additions & 9 deletions benchmarks/src/implementations/use-classes/Box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useClasses } from "./useClasses.js";
const styles = {
outer: {
alignSelf: "flex-start",
padding: "4px"
padding: 4
},
row: {
flexDirection: "row"
Expand All @@ -28,8 +28,8 @@ const styles = {
backgroundColor: "#E0245E"
},
fixed: {
width: "6px",
height: "6px"
width: 6,
height: 6
}
};

Expand All @@ -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 : {}),
Expand Down
16 changes: 8 additions & 8 deletions benchmarks/src/implementations/use-classes/Dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>
Expand Down
12 changes: 6 additions & 6 deletions benchmarks/src/implementations/use-classes/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})}
/>
);
Expand Down

0 comments on commit 4fa587a

Please sign in to comment.