color looper i'll probably get rid of

Former-commit-id: 5015c6a96964c23154509bc26633c18ce36aa9ff

6 files changed, 322 insertions, 17 deletions

diff --git a/demos/simple-react/src/button.css b/demos/simple-react/src/button.css
index 15cca59e0..60db46096 100644
--- a/demos/simple-react/src/button.css
+++ b/demos/simple-react/src/button.css
@@ -1,6 +1,6 @@
 body {
-  background-color: green;
-  border: 10px solid pink;
+  background-color: red;
+  border: 10px solid red;
   color: pink;
   box-shadow: 10px 10px 32px red;
 }
diff --git a/demos/simple-react/src/colors.css b/demos/simple-react/src/colors.css
new file mode 100644
index 000000000..d45bf4ffc
--- /dev/null
+++ b/demos/simple-react/src/colors.css
@@ -0,0 +1,14 @@
+:root {
+  --timestamp: "12812";
+  --interval: "8";
+  --progress-bar: 11.83299999999997%;
+  --spinner-1-muted: rgb(142, 6, 182);
+  --spinner-1-primary: rgb(177, 8, 227);
+  --spinner-2-muted: rgb(110, 148, 190);
+  --spinner-2-primary: rgb(138, 185, 238);
+  --spinner-3-muted: rgb(75, 45, 64);
+  --spinner-3-primary: rgb(94, 56, 80);
+  --spinner-4-muted: rgb(155, 129, 108);
+  --spinner-4-primary: rgb(194, 161, 135);
+  --spinner-rotate: 213deg;
+}
\ No newline at end of file
diff --git a/demos/simple-react/src/font.css b/demos/simple-react/src/font.css
new file mode 100644
index 000000000..448775ef0
--- /dev/null
+++ b/demos/simple-react/src/font.css
@@ -0,0 +1 @@
+@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap";
diff --git a/demos/simple-react/src/index.css b/demos/simple-react/src/index.css
index cbcf1e654..0917f6c7a 100644
--- a/demos/simple-react/src/index.css
+++ b/demos/simple-react/src/index.css
@@ -1,5 +1,236 @@
-@import "./button.css";
+@import "./colors.css";
+
+:root {
+  --heading-font: "Space Mono", system-ui;
+  --body-font: "IBM Plex Sans", system-ui;
+
+  --color-brand: #02ff00;
+  --color-brand-muted: rgb(2, 150, 0);
+
+  --padding-horizontal: 90px;
+
+  --page-background: black;
+  --page-background-alpha: rgba(0, 0, 0, 0.8);
+
+  --result__background-color: black;
+  --result__primary-color: var(--color-brand);
+  --result__foreground-color: white;
+  --result__muted-color: rgb(165, 165, 165);
+
+  --card-width: 352px;
+
+  --page-width: 1152px;
+
+  --snippets_container-background-unfocused: #171717;
+  --snippets_container-background-focused: #0017e9;
+  --snippets_container-background: var(
+    --snippets_container-background-unfocused
+  );
+  --snippets_container-muted-color: rgb(153, 153, 153);
+}
 
 body {
-  background-color: orange;
+  color: white;
+  margin: 0;
+
+  padding: 0;
+  font-family: var(--body-font);
+  background-color: var(--page-background);
+  color: var(--result__muted-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.Subtitle {
+  text-align: center;
+  font-size: 4em;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 0.25em;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+#reactroot,
+#__next,
+body,
+html {
+  height: 100%;
+}
+
+.Title {
+  color: var(--color-brand);
+  font-family: var(--heading-font);
+  font-weight: 700;
+  margin-top: 48px;
+  font-size: 48px;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.Description {
+  text-align: center;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+header,
+.main {
+  width: 650px;
+  margin: 0 auto;
+}
+
+section {
+  width: 650px;
+}
+
+header {
+  margin-bottom: 48px;
+}
+
+footer {
+  flex-shrink: 0;
+}
+
+#reactroot,
+#__next {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+section {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.timer {
+  font-weight: normal;
+}
+
+.ProgressBar-container {
+  width: 100%;
+  display: block;
+  position: relative;
+  border: 1px solid var(--color-brand-muted);
+  border-radius: 4px;
+
+  height: 92px;
+}
+
+.ProgressBar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: var(--color-brand);
+  transform-origin: top left;
+  border-radius: 4px;
+  transform: scaleX(var(--progress-bar, 0%));
+}
+
+.Bundler-container {
+  background-color: var(--snippets_container-background-focused);
+  font-size: 64px;
+  font-weight: bold;
+  color: white;
+  left: 0;
+  right: 0;
+  padding: 0.8em 0.8em;
+}
+
+.Bundler-updateRate {
+  font-size: 0.8em;
+  font-weight: normal;
+  display: flex;
+  color: var(--result__muted-color);
+}
+
+.interval:before {
+  content: var(--interval, "16");
+}
+
+.highlight {
+  color: white;
+}
+
+.timer:after {
+  content: var(--timestamp);
+  font-variant-numeric: tabular-nums;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  display: inline;
+  font-weight: 500;
+  color: white;
+  width: 100%;
+}
+
+.SectionLabel {
+  font-weight: 300;
+  font-family: var(--heading-font);
+  text-align: center;
+  width: 100%;
+  font-weight: 700;
+  margin-top: 24px;
+}
+
+.FooterLabel {
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.Spinner-container {
+  --spinner-muted: rgb(0, 255, 0);
+  --spinner-primary: rgb(0, 60, 255);
+
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  background-color: var(--page-background);
+  border-top: 1.1em solid var(--spinner-muted);
+  border-right: 1.1em solid var(--spinner-muted);
+  border-bottom: 1.1em solid var(--spinner-muted);
+  border-left: 1.1em solid var(--spinner-primary);
+
+  transform: rotate(var(--spinner-rotate, 12deg));
+}
+
+.Spinners {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.Spinner-1.Spinner-container {
+  --spinner-muted: var(--spinner-1-muted);
+  --spinner-primary: var(--spinner-1-primary);
+}
+
+.Spinner-2.Spinner-container {
+  --spinner-muted: var(--spinner-2-muted);
+  --spinner-primary: var(--spinner-2-primary);
+}
+
+.Spinner-3.Spinner-container {
+  --spinner-muted: var(--spinner-3-muted);
+  --spinner-primary: var(--spinner-3-primary);
+}
+
+.Spinner-4.Spinner-container {
+  --spinner-muted: var(--spinner-4-muted);
+  --spinner-primary: var(--spinner-4-primary);
 }
diff --git a/demos/simple-react/src/index.tsx b/demos/simple-react/src/index.tsx
index 41b0d56ac..3db53a67f 100644
--- a/demos/simple-react/src/index.tsx
+++ b/demos/simple-react/src/index.tsx
@@ -1,21 +1,11 @@
 import ReactDOM from "react-dom";
 import React from "react";
-import { Button } from "./components/button";
+import { Main } from "./main";
 import classNames from "classnames";
 
 const Base = ({}) => {
-  return (
-    <main className={classNames("main")}>
-      <h3 className={classNames("hi")}>Here is some text</h3>
-      <h3 className={classNames("extremely")}></h3>
-      <>Fargment!1239899s</>
-
-      <Button
-        label="Do notencoding! cl1ick."
-        onClick={() => alert("I told u not to click!")}
-      ></Button>
-    </main>
-  );
+  const name = decodeURIComponent(location.search.substring(1));
+  return <Main productName={name || "Bundler"} />;
 };
 
 function startReact() {
diff --git a/demos/simple-react/src/main.tsx b/demos/simple-react/src/main.tsx
new file mode 100644
index 000000000..1a9948fe8
--- /dev/null
+++ b/demos/simple-react/src/main.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+export const Main = ({ productName }) => {
+  return (
+    <>
+      <header>
+        <div className="Title">CSS HMR Stress Test</div>
+        <p className="Description">
+          This page visually tests how quickly a bundler can update CSS over Hot
+          Module Reloading.
+        </p>
+      </header>
+      <main className="main">
+        <section className="ProgressSection">
+          <p className="Subtitle">
+            <span className="Subtitle-part">
+              Ran:&nbsp;<span className="timer"></span>
+            </span>
+          </p>
+
+          <div className="ProgressBar-container">
+            <div className="ProgressBar"></div>
+          </div>
+          <div className="SectionLabel">
+            The progress bar should move from left to right smoothly.
+          </div>
+        </section>
+
+        <section>
+          <div className="Spinners">
+            <div className="Spinner-container Spinner-1">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-2">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-3">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-4">
+              <div className="Spinner"></div>
+            </div>
+          </div>
+          <div className="SectionLabel">
+            The spinners should rotate &amp; change color smoothly.
+          </div>
+        </section>
+      </main>
+      <footer>
+        <div className="SectionLabel FooterLabel">
+          There are no CSS animations on this page.
+        </div>
+
+        <div className="Bundler-container">
+          <div className="Bundler">{productName}</div>
+          <div className="Bundler-updateRate">
+            Saving a css file every&nbsp;
+            <span className="highlight">
+              <span className="interval"></span>ms
+            </span>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+};