perf: add media query to benchmark

styled-components · Mar 15, 2021 · af10f5a · af10f5a
1 parent aa1f518
commit af10f5a
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/benchmarks/styled-components.js b/benchmarks/styled-components.js
@@ -6,32 +6,37 @@ const styled = require('styled-components')
 
 const suite = new Benchmark.Suite('styled')
 
+const md = '1024px'
 const primary = 'primary'
 const sp3 = '3px'
 const sp1 = '1px'
 
 function runXstyled() {
   const Component = xstyled.default.div`
-    background: transparent;
-    border-radius: 3px;
-    border: 2px solid;
-    border-color: primary;
-    color: primary;
-    margin: 0 3;
-    padding: 1 3;
+    @media (min-width: 1024px) {
+      background: transparent;
+      border-radius: 3px;
+      border: 2px solid;
+      border-color: primary;
+      color: primary;
+      margin: 0 3;
+      padding: 1 3;
+    }
   `
   React.createElement(Component, {})
 }
 
 function runStyled() {
   const Component = styled.default.div`
-    background: transparent;
-    border-radius: 3px;
-    border: 2px solid;
-    border-color: ${() => primary};
-    color: ${() => primary};
-    margin: 0 ${() => sp3};
-    padding: ${() => sp1} ${() => sp3};
+    @media (min-width: ${() => md}) {
+      background: transparent;
+      border-radius: 3px;
+      border: 2px solid;
+      border-color: ${() => primary};
+      color: ${() => primary};
+      margin: 0 ${() => sp3};
+      padding: ${() => sp1} ${() => sp3};
+    }
   `
   React.createElement(Component, {})
 }