CSS modules ➡️ Stitches 🧵 (#799)

components/NotesList/NotesList.module.css

@@ -1,51 +0,0 @@
-.section {
-  font-size: 1.1em;
-  line-height: 1.1;
-  margin: 2.4em 0;
-}
-
-.section:first-of-type {
-  margin-top: 0;
-}
-
-.section:last-of-type {
-  margin-bottom: 0;
-}
-
-.year {
-  font-size: 2.2em;
-  margin-top: 0;
-  margin-bottom: 0.5em;
-}
-
-.list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.row {
-  display: flex;
-  line-height: 1.75;
-  margin-bottom: 1em;
-}
-
-.row:last-of-type {
-  margin-bottom: 0;
-}
-
-.date {
-  width: 5.25em;
-  flex-shrink: 0;
-  color: var(--medium);
-}
-
-@media screen and (max-width: 768px) {
-  .section {
-    margin: 1.8em 0;
-  }
-
-  .year {
-    font-size: 2em;
-  }
-}

components/NotesList/NotesList.tsx

@@ -1,8 +1,57 @@
 import { format } from "date-fns";
 import Link from "../Link/Link";
+import { styled } from "../../lib/styles/stitches.config";
 import type { NoteType } from "../../types";
 
-import styles from "./NotesList.module.css";
+const Section = styled("section", {
+  fontSize: "1.1em",
+  lineHeight: 1.1,
+  margin: "2.4em 0",
+
+  "&:first-of-type": {
+    marginTop: 0,
+  },
+
+  "&:last-of-type": {
+    marginBottom: 0,
+  },
+
+  "@mobile": {
+    margin: "1.8em 0",
+  },
+});
+
+const Year = styled("h2", {
+  fontSize: "2.2em",
+  marginTop: 0,
+  marginBottom: "0.5em",
+
+  "@mobile": {
+    fontSize: "2em",
+  },
+});
+
+const List = styled("ul", {
+  listStyleType: "none",
+  margin: 0,
+  padding: 0,
+});
+
+const Post = styled("li", {
+  display: "flex",
+  lineHeight: 1.75,
+  marginBottom: "1em",
+
+  "&:last-of-type": {
+    marginBottom: 0,
+  },
+});
+
+const PostDate = styled("span", {
+  width: "5.25em",
+  flexShrink: 0,
+  color: "$medium",
+});
 
 export type NotesListProps = {
   notesByYear: Record<string, NoteType["frontMatter"][]>;
@@ -13,12 +62,12 @@ const NotesList = ({ notesByYear }: NotesListProps) => {
 
   Object.entries(notesByYear).forEach(([year, notes]: [string, NoteType["frontMatter"][]]) => {
     sections.push(
-      <section key={year} className={styles.section}>
-        <h2 className={styles.year}>{year}</h2>
-        <ul className={styles.list}>
+      <Section key={year}>
+        <Year>{year}</Year>
+        <List>
           {notes.map(({ slug, date, htmlTitle }) => (
-            <li key={slug} className={styles.row}>
-              <span className={styles.date}>{format(new Date(date), "MMM d")}</span>
+            <Post key={slug}>
+              <PostDate>{format(new Date(date), "MMM d")}</PostDate>
               <span>
                 <Link
                   href={{
@@ -28,10 +77,10 @@ const NotesList = ({ notesByYear }: NotesListProps) => {
                   dangerouslySetInnerHTML={{ __html: htmlTitle }}
                 />
               </span>
-            </li>
+            </Post>
           ))}
-        </ul>
-      </section>
+        </List>
+      </Section>
     );
   });