chore: add v6 benchmark

packages/benchmarks/package.json

@@ -20,6 +20,7 @@
     "react-native-web": "0.17.1",
     "styled-components": "workspace:*",
     "styled-components-v5": "npm:styled-components@5.3.9",
+    "styled-components-v6": "npm:styled-components@6.1.8",
     "styled-jsx": "5.1.2",
     "styletron-engine-atomic": "1.5.0",
     "styletron-react": "6.1.0"

packages/benchmarks/src/implementations/styled-components-v6/Box.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components-v6';
+import View from './View';
+
+const getColor = color => {
+  switch (color) {
+    case 0:
+      return '#14171A';
+    case 1:
+      return '#AAB8C2';
+    case 2:
+      return '#E6ECF0';
+    case 3:
+      return '#FFAD1F';
+    case 4:
+      return '#F45D22';
+    case 5:
+      return '#E0245E';
+    default:
+      return 'transparent';
+  }
+};
+
+const Box = styled(View)`
+  align-self: flex-start;
+  flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
+  padding: ${props => (props.outer ? '4px' : '0')};
+  ${props => props.fixed && 'height:6px;'} ${props =>
+    props.fixed && 'width:6px;'} background-color: ${props => getColor(props.color)};
+`;
+
+export default Box;

packages/benchmarks/src/implementations/styled-components-v6/Dot.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components-v6';
+import View from './View';
+
+const Dot = styled(View).attrs(p => ({ style: { borderBottomColor: p.color } }))`
+  position: absolute;
+  cursor: pointer;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-top-width: 0;
+  transform: translate(50%, 50%);
+  margin-left: ${props => `${props.x}px`};
+  margin-top: ${props => `${props.y}px`};
+  border-right-width: ${props => `${props.size / 2}px`};
+  border-bottom-width: ${props => `${props.size / 2}px`};
+  border-left-width: ${props => `${props.size / 2}px`};
+`;
+
+export default Dot;

packages/benchmarks/src/implementations/styled-components-v6/Provider.js

@@ -0,0 +1,3 @@
+import View from './View';
+
+export default View;

packages/benchmarks/src/implementations/styled-components-v6/View.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components-v6';
+
+const View = styled.div`
+  align-items: stretch;
+  border-width: 0;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+`;
+
+export default View;

packages/benchmarks/src/implementations/styled-components-v6/index.js

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

yarn.lock

@@ -2621,6 +2621,7 @@ __metadata:
     style-loader: "npm:3.3.1"
     styled-components: "workspace:*"
     styled-components-v5: "npm:styled-components@5.3.9"
+    styled-components-v6: "npm:styled-components@6.1.8"
     styled-jsx: "npm:5.1.2"
     styletron-engine-atomic: "npm:1.5.0"
     styletron-react: "npm:6.1.0"
@@ -9978,7 +9979,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@workspace:*, styled-components@workspace:packages/styled-components":
+"styled-components-v6@npm:styled-components@6.1.8, styled-components@workspace:*, styled-components@workspace:packages/styled-components":
   version: 0.0.0-use.local
   resolution: "styled-components@workspace:packages/styled-components"
   dependencies: