Comparing stylin with styled-components

sultan99 · Mar 17, 2024 · 789f5c3 · 789f5c3
1 parent fdcf34e
commit 789f5c3
Show file tree

Hide file tree

Showing 24 changed files with 151 additions and 0 deletions.
diff --git a/packages/benchmark/README.md b/packages/benchmark/README.md
@@ -0,0 +1,7 @@
+# Benchmarking styled-components versus stylin
+
+### Stylin memory usage
+<img src="./stylin-memory-usage.png"/>
+
+### Styled components
+<img src="./styled-components-memory-usage.png"/>
diff --git a/packages/benchmark/styled-components-memory-usage.png b/packages/benchmark/styled-components-memory-usage.png
diff --git a/packages/benchmark/styled-components/android-chrome-192x192.png b/packages/benchmark/styled-components/android-chrome-192x192.png
diff --git a/packages/benchmark/styled-components/android-chrome-512x512.png b/packages/benchmark/styled-components/android-chrome-512x512.png
diff --git a/packages/benchmark/styled-components/apple-touch-icon.png b/packages/benchmark/styled-components/apple-touch-icon.png
diff --git a/packages/benchmark/styled-components/favicon-16x16.png b/packages/benchmark/styled-components/favicon-16x16.png
diff --git a/packages/benchmark/styled-components/favicon-32x32.png b/packages/benchmark/styled-components/favicon-32x32.png
diff --git a/packages/benchmark/styled-components/favicon.ico b/packages/benchmark/styled-components/favicon.ico
diff --git a/packages/benchmark/styled-components/index.html b/packages/benchmark/styled-components/index.html
@@ -0,0 +1,19 @@
+<!doctype html><html><head><title>Styled-components the dictator of style</title><meta charset="UTF-8"><link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"><link rel="manifest" href="site.webmanifest"><link href="https://fonts.googleapis.com/css?family=Roboto:400,600" rel="stylesheet"><style>html {
+      font-family: 'Open Sans', sans-serif;
+      overflow-y: scroll;
+    }
+    body {
+      margin: 0;
+    }
+    input, select, textarea, button {
+      font-family: 'Open Sans', sans-serif;
+    }
+    * {
+      user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+    }</style><script defer="defer" src="main.4a052942f5b47d9a896b.js"></script></head><body><main id="app"></main></body></html>
diff --git a/packages/benchmark/styled-components/main.4a052942f5b47d9a896b.js b/packages/benchmark/styled-components/main.4a052942f5b47d9a896b.js
diff --git a/packages/benchmark/styled-components/main.4a052942f5b47d9a896b.js.LICENSE.txt b/packages/benchmark/styled-components/main.4a052942f5b47d9a896b.js.LICENSE.txt
@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/packages/benchmark/styled-components/site.webmanifest b/packages/benchmark/styled-components/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Stylin",
+  "short_name": "Stylin",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ff2e00",
+  "display": "standalone"
+}
diff --git a/packages/benchmark/stylin-memory-usage.png b/packages/benchmark/stylin-memory-usage.png
diff --git a/packages/benchmark/stylin/android-chrome-192x192.png b/packages/benchmark/stylin/android-chrome-192x192.png
diff --git a/packages/benchmark/stylin/android-chrome-512x512.png b/packages/benchmark/stylin/android-chrome-512x512.png
diff --git a/packages/benchmark/stylin/apple-touch-icon.png b/packages/benchmark/stylin/apple-touch-icon.png
diff --git a/packages/benchmark/stylin/favicon-16x16.png b/packages/benchmark/stylin/favicon-16x16.png
diff --git a/packages/benchmark/stylin/favicon-32x32.png b/packages/benchmark/stylin/favicon-32x32.png
diff --git a/packages/benchmark/stylin/favicon.ico b/packages/benchmark/stylin/favicon.ico
diff --git a/packages/benchmark/stylin/index.html b/packages/benchmark/stylin/index.html
@@ -0,0 +1,19 @@
+<!doctype html><html><head><title>Stylin the dictator of style</title><meta charset="UTF-8"><link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"><link rel="manifest" href="site.webmanifest"><link href="https://fonts.googleapis.com/css?family=Roboto:400,600" rel="stylesheet"><style>html {
+      font-family: 'Open Sans', sans-serif;
+      overflow-y: scroll;
+    }
+    body {
+      margin: 0;
+    }
+    input, select, textarea, button {
+      font-family: 'Open Sans', sans-serif;
+    }
+    * {
+      user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+    }</style><script defer="defer" src="main.d618bb255488347abb97.js"></script><link href="main.css" rel="stylesheet"></head><body><main id="app"></main></body></html>
diff --git a/packages/benchmark/stylin/main.css b/packages/benchmark/stylin/main.css
diff --git a/packages/benchmark/stylin/main.d618bb255488347abb97.js b/packages/benchmark/stylin/main.d618bb255488347abb97.js
diff --git a/packages/benchmark/stylin/main.d618bb255488347abb97.js.LICENSE.txt b/packages/benchmark/stylin/main.d618bb255488347abb97.js.LICENSE.txt
@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/packages/benchmark/stylin/site.webmanifest b/packages/benchmark/stylin/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Stylin",
+  "short_name": "Stylin",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ff2e00",
+  "display": "standalone"
+}