CSS modules ➡️ Stitches 🧵 (#799)

components/Figure/Figure.tsx

@@ -1,10 +1,25 @@
 import Image from "../Image/Image";
 import innerText from "react-innertext";
-import classNames from "classnames";
+import { styled } from "../../lib/styles/stitches.config";
 import type { PropsWithChildren } from "react";
 import type { ImageProps as NextImageProps } from "next/image";
 
-import styles from "./Figure.module.css";
+const Wrapper = styled("figure", {
+  margin: "1em auto",
+  textAlign: "center",
+});
+
+const Caption = styled("figcaption", {
+  fontSize: "0.9em",
+  lineHeight: 1.5,
+  color: "$medium",
+  marginTop: "-0.4em",
+
+  /* some figcaptions contain paragraphs, some don't, so reset all of them */
+  "& p": {
+    margin: "0 !important",
+  },
+});
 
 export type FigureProps = Omit<NextImageProps, "alt"> &
   PropsWithChildren<{
@@ -13,10 +28,10 @@ export type FigureProps = Omit<NextImageProps, "alt"> &
 
 const Figure = ({ children, alt, className, ...imageProps }: FigureProps) => {
   return (
-    <figure className={classNames(styles.figure, className)}>
+    <Wrapper className={className}>
       <Image alt={alt || innerText(children)} {...imageProps} />
-      <figcaption className={styles.caption}>{children}</figcaption>
-    </figure>
+      <Caption>{children}</Caption>
+    </Wrapper>
   );
 };