CSS modules ➡️ Stitches 🧵 (#799)

components/Wallpaper/Wallpaper.module.css

@@ -1,9 +0,0 @@
-.wallpaper {
-  width: 100%;
-  min-height: 400px;
-}
-
-.tile {
-  background-repeat: repeat;
-  background-position: center;
-}

components/Wallpaper/Wallpaper.tsx

@@ -1,21 +1,43 @@
 import { useEffect, useRef } from "react";
-import classNames from "classnames";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
+import type { VariantProps } from "@stitches/react";
 
-import styles from "./Wallpaper.module.css";
+const Wrapper = styled("main", {
+  width: "100%",
+  minHeight: "400px",
 
-export type WallpaperProps = JSX.IntrinsicElements["main"] & {
+  variants: {
+    tile: {
+      true: {
+        backgroundRepeat: "repeat",
+        backgroundPosition: "center",
+      },
+    },
+  },
+});
+
+export type WallpaperProps = ComponentProps<typeof Wrapper> & {
   image: string;
   tile?: boolean;
 };
 
-const Wallpaper = ({ image, tile, className, ...rest }: WallpaperProps) => {
-  const bgRef = useRef<HTMLDivElement>(null);
+const Wallpaper = ({ image, tile, ...rest }: WallpaperProps) => {
+  const bgRef = useRef<VariantProps<typeof Wrapper>>(null);
 
   useEffect(() => {
+    // @ts-ignore
     bgRef.current.style.backgroundImage = `url(${image})`;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return <main ref={bgRef} className={classNames(styles.wallpaper, tile && styles.tile, className)} {...rest} />;
+  return (
+    <Wrapper
+      tile={tile}
+      // @ts-ignore
+      ref={bgRef}
+      {...rest}
+    />
+  );
 };
 
 export default Wallpaper;