CSS modules ➡️ Stitches 🧵 (#799)

components/Link/Link.module.css

@@ -1,16 +0,0 @@
-.link {
-  color: var(--link);
-  background-image: linear-gradient(var(--link-underline), var(--link-underline));
-  background-position: 0% 100%;
-  background-repeat: no-repeat;
-  background-size: 0% var(--link-underline-size);
-  text-decoration: none;
-  padding-bottom: 0.2rem;
-
-  /* background-size is for hover animation, color & border are for theme fading: */
-  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
-}
-
-.link:hover {
-  background-size: 100% var(--link-underline-size);
-}

components/Link/Link.tsx

@@ -1,11 +1,28 @@
 import NextLink from "next/link";
-import classNames from "classnames";
 import isAbsoluteUrl from "is-absolute-url";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 import type { LinkProps as NextLinkProps } from "next/link";
 
-import styles from "./Link.module.css";
+const FancyLink = styled("a", {
+  color: "$link",
+  textDecoration: "none",
+  transition: "background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease",
 
-export type CustomLinkProps = Omit<JSX.IntrinsicElements["a"], "href"> &
+  backgroundPosition: "0% 100%",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "0% $underline",
+  paddingBottom: "0.2rem",
+
+  // sets psuedo linear-gradient() for cool underline effect
+  backgroundGradientHack: {},
+
+  "&:hover": {
+    backgroundSize: "100% $underline",
+  },
+});
+
+export type CustomLinkProps = Omit<ComponentProps<typeof FancyLink>, "href"> &
   NextLinkProps & {
     forceNewWindow?: boolean;
   };
@@ -17,25 +34,18 @@ const CustomLink = ({
   target,
   rel,
   forceNewWindow,
-  className,
   ...rest
 }: CustomLinkProps) => {
   // this component auto-detects whether or not we should use a normal HTML anchor externally or next/link internally,
   // can be overridden with `forceNewWindow={true}`.
   if (forceNewWindow || isAbsoluteUrl(href.toString())) {
     return (
-      <a
-        href={href.toString()}
-        target={target || "_blank"}
-        rel={rel || "noopener noreferrer"}
-        className={classNames(styles.link, className)}
-        {...rest}
-      />
+      <FancyLink href={href.toString()} target={target || "_blank"} rel={rel || "noopener noreferrer"} {...rest} />
     );
   } else {
     return (
       <NextLink href={href} prefetch={prefetch} passHref={passHref}>
-        <a className={classNames(styles.link, className)} {...rest} />
+        <FancyLink {...rest} />
       </NextLink>
     );
   }