CSS modules ➡️ Stitches 🧵 (#799)

components/Terminal/Terminal.module.css

@@ -1,28 +0,0 @@
-.terminal {
-  width: 100%;
-  height: 100%;
-  padding: 1em;
-
-  background-color: #000000;
-  color: #cccccc;
-
-  font-size: 0.925em;
-  font-weight: 500;
-  line-height: 2;
-  white-space: pre-wrap;
-  user-select: none;
-}
-
-.blink {
-  display: inline-block;
-  vertical-align: text-bottom;
-  width: 10px;
-  border-bottom: 2px solid #cccccc;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}

components/Terminal/Terminal.tsx

@@ -1,17 +1,46 @@
 import { forwardRef } from "react";
-import classNames from "classnames";
-import type { Ref } from "react";
+import { keyframes, styled } from "../../lib/styles/stitches.config";
+import type { Ref, ComponentProps } from "react";
 
-import styles from "./Terminal.module.css";
+const BlackBox = styled("div", {
+  width: "100%",
+  height: "100%",
+  padding: "1.25em",
+  backgroundColor: "#000000",
+  color: "#cccccc",
+});
 
-export type TerminalProps = JSX.IntrinsicElements["div"];
+const Monospace = styled("pre", {
+  display: "block",
+  margin: 0,
+  lineHeight: 1.75,
+  fontSize: "0.925em",
+  fontWeight: 500,
+  whiteSpace: "pre-wrap",
+  userSelect: "none",
+});
+
+// flashing terminal cursor underscore-looking thingy
+const Underscore = styled("span", {
+  display: "inline-block",
+  verticalAlign: "text-bottom",
+  width: "10px",
+  borderBottom: "2px solid #cccccc",
+
+  // blink every second for 0.4s
+  animation: `${keyframes({ "40%": { opacity: 0 } })} 1s step-end infinite`,
+});
+
+export type TerminalProps = ComponentProps<typeof BlackBox>;
 
 // a DOS-style terminal box with dynamic text
-const Terminal = forwardRef(function Terminal({ className, ...rest }: TerminalProps, ref: Ref<HTMLSpanElement>) {
+const Terminal = forwardRef(function Terminal({ ...rest }: TerminalProps, ref: Ref<HTMLSpanElement>) {
   return (
-    <div className={classNames("monospace", className, styles.terminal)} {...rest}>
-      <span ref={ref} /> <span className={styles.blink} />
-    </div>
+    <BlackBox {...rest}>
+      <Monospace>
+        <span ref={ref} /> <Underscore />
+      </Monospace>
+    </BlackBox>
   );
 });