CSS modules ➡️ Stitches 🧵 (#799)

components/OctocatLink/OctocatLink.module.css

@@ -1,15 +0,0 @@
-.link {
-  margin: 0 0.4em;
-  color: var(--text);
-  text-decoration: none;
-}
-
-.link:hover {
-  color: var(--link);
-}
-
-.icon {
-  width: 1.2em;
-  height: 1.2em;
-  vertical-align: -0.2em;
-}

components/OctocatLink/OctocatLink.tsx

@@ -1,16 +1,32 @@
-import classNames from "classnames";
 import { OctocatOcticon } from "../Icons";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
-import styles from "./OctocatLink.module.css";
+const Link = styled("a", {
+  margin: "0 0.4em",
+  color: "$text",
+  textDecoration: "none",
 
-export type OctocatLinkProps = JSX.IntrinsicElements["a"] & {
+  "&:hover": {
+    color: "$link",
+  },
+});
+
+const Octocat = styled(OctocatOcticon, {
+  width: "1.2em",
+  height: "1.2em",
+  verticalAlign: "-0.2em",
+  fill: "currentColor",
+});
+
+export type OctocatLinkProps = ComponentProps<typeof Link> & {
   repo: string;
 };
 
 const OctocatLink = ({ repo, className, ...rest }: OctocatLinkProps) => (
-  <a className={styles.link} href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer" {...rest}>
-    <OctocatOcticon fill="currentColor" className={classNames(styles.icon, className)} />
-  </a>
+  <Link href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer" {...rest}>
+    <Octocat className={className} />
+  </Link>
 );
 
 export default OctocatLink;