CSS modules ➡️ Stitches 🧵 (#799)

components/Heading/Heading.module.css

@@ -1,48 +0,0 @@
-.heading {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-
-  /**
-   * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
-   * note: use rem so it isn't based on the heading's font size.
-   */
-  scroll-margin-top: 5.5rem;
-}
-
-/* special bottom border for <h2>s */
-.h2 {
-  padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--kinda-light);
-}
-
-/* sub-heading anchor styles */
-.anchor {
-  margin: 0 0.25em;
-  padding: 0 0.25em;
-  color: var(--medium-light);
-  font-weight: 300;
-  text-decoration: none;
-  opacity: 0; /* overridden on hover below (except on small screens) */
-}
-.anchor::before {
-  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
-}
-.anchor:hover {
-  color: var(--link);
-}
-/* make anchor link show up on hover over its corresponding heading */
-.heading:hover .anchor {
-  opacity: 1;
-}
-
-@media screen and (max-width: 768px) {
-  .heading {
-    scroll-margin-top: 6.5rem;
-  }
-
-  /* don't require hover to show anchor link on small (likely touch) screens */
-  .anchor {
-    opacity: 1;
-  }
-}

components/Heading/Heading.tsx

@@ -1,29 +1,71 @@
-import classNames from "classnames";
 import innerText from "react-innertext";
-import type { HTMLAttributes } from "react";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
-import styles from "./Heading.module.css";
+const Anchor = styled("a", {
+  margin: "0 0.25em",
+  padding: "0 0.25em",
+  color: "$mediumLight",
+  fontWeight: 300,
+  textDecoration: "none",
+  opacity: 0, // overridden on hover below (except on small screens)
 
-export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+  "&::before": {
+    // pound sign `#`, done here to keep content DOM cleaner
+    content: "\\0023",
+  },
+
+  "&:hover": {
+    color: "$link",
+  },
+
+  // don't require hover to show anchor link on small (likely touch) screens
+  "@mobile": {
+    opacity: 1,
+  },
+});
+
+const H = styled("h1", {
+  marginTop: "1em",
+  marginBottom: "0.5em",
+  lineHeight: 1.5,
+
+  // offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
+  // note: use rem so it isn't based on the heading's font size.
+  scrollMarginTop: "5.5rem",
+
+  "@mobile": {
+    scrollMarginTop: "6.5rem",
+  },
+
+  [`&:hover ${Anchor}`]: {
+    opacity: 1,
+  },
+
+  variants: {
+    underline: {
+      true: {
+        paddingBottom: "0.25em",
+        borderBottom: "1px solid $kindaLight",
+      },
+    },
+  },
+});
+
+export type HeadingProps = ComponentProps<typeof H> & {
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 };
 
-const Heading = ({ as: Component, id, className, children, ...rest }: HeadingProps) => {
+const Heading = ({ as, id, children, ...rest }: HeadingProps) => {
   return (
-    <Component className={classNames(styles.heading, styles[Component], className)} id={id} {...rest}>
+    <H as={as} underline={as === "h2"} id={id} {...rest}>
       {children}
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
-      {id && (Component === "h2" || Component === "h3") && (
-        <a
-          className={styles.anchor}
-          href={`#${id}`}
-          title={`Jump to "${innerText(children)}"`}
-          tabIndex={-1}
-          aria-hidden={true}
-        />
+      {id && (as === "h2" || as === "h3") && (
+        <Anchor href={`#${id}`} title={`Jump to "${innerText(children)}"`} tabIndex={-1} aria-hidden={true} />
       )}
-    </Component>
+    </H>
   );
 };