CSS modules ➡️ Stitches 🧵 (#799)

components/MenuItem/MenuItem.module.css

@@ -1,47 +0,0 @@
-.link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--medium-dark);
-  line-height: 1;
-  text-decoration: none;
-  padding: 0.6em;
-}
-
-.link:hover,
-.link.current {
-  border-bottom: 0.2em solid;
-  margin-bottom: -0.2em;
-}
-
-.link:hover {
-  border-color: var(--kinda-light);
-}
-
-.link.current {
-  border-color: var(--link-underline);
-}
-
-.icon {
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: -0.3em;
-}
-
-.label {
-  font-size: 0.95em;
-  font-weight: 500;
-  margin-top: 0.1em;
-  margin-left: 0.8em;
-}
-
-@media screen and (max-width: 768px) {
-  .icon {
-    width: 1.8em;
-    height: 1.8em;
-  }
-
-  /* hide text next to emojis on mobile */
-  .label {
-    display: none;
-  }
-}

components/MenuItem/MenuItem.tsx

@@ -1,7 +1,52 @@
-import Link from "next/link";
-import classNames from "classnames";
+import NextLink from "next/link";
+import { styled } from "../../lib/styles/stitches.config";
 
-import styles from "./MenuItem.module.css";
+const Link = styled("a", {
+  display: "inline-flex",
+  alignItems: "center",
+  color: "$mediumDark",
+  lineHeight: 1,
+  textDecoration: "none",
+  padding: "0.6em",
+
+  "&:hover": {
+    borderBottom: "0.2em solid",
+    marginBottom: "-0.2em",
+    borderColor: "$kindaLight",
+  },
+
+  variants: {
+    current: {
+      true: {
+        borderBottom: "0.2em solid",
+        marginBottom: "-0.2em",
+        borderColor: "$linkUnderline !important",
+      },
+    },
+  },
+});
+
+const Label = styled("span", {
+  fontSize: "0.95em",
+  fontWeight: 500,
+  marginTop: "0.1em",
+  marginLeft: "0.8em",
+
+  "@mobile": {
+    display: "none",
+  },
+});
+
+const Icon = styled("svg", {
+  width: "1.25em",
+  height: "1.25em",
+  verticalAlign: "-0.3em",
+
+  "@mobile": {
+    width: "1.8em",
+    height: "1.8em",
+  },
+});
 
 export type MenuItemProps = {
   href?: string;
@@ -14,19 +59,21 @@ export type MenuItemProps = {
   icon: any;
 };
 
-const MenuItem = ({ icon: Icon, href, text, current, className }: MenuItemProps) => {
+const MenuItem = ({ icon: ItemIcon, href, text, current, className }: MenuItemProps) => {
   const linkContent = (
     <>
-      <Icon className={classNames(styles.icon, className)} /> {text && <span className={styles.label}>{text}</span>}
+      <Icon as={ItemIcon} /> {text && <Label>{text}</Label>}
     </>
   );
 
   // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
   if (href) {
     return (
-      <Link href={href} prefetch={false}>
-        <a className={classNames(styles.link, current && styles.current, className)}>{linkContent}</a>
-      </Link>
+      <NextLink href={href} prefetch={false} passHref={true}>
+        <Link className={className} current={current}>
+          {linkContent}
+        </Link>
+      </NextLink>
     );
   } else {
     return linkContent;