CSS modules ➡️ Stitches 🧵 (#799)

components/IFrame/IFrame.module.css

@@ -1,7 +0,0 @@
-.frame {
-  width: 100%;
-  display: block;
-  margin: 1em auto;
-  border: 2px solid var(--kinda-light);
-  border-radius: var(--rounded-edge-radius);
-}

components/IFrame/IFrame.tsx

@@ -1,8 +1,15 @@
-import classNames from "classnames";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
-import styles from "./IFrame.module.css";
+const RoundedIFrame = styled("iframe", {
+  width: "100%",
+  display: "block",
+  margin: "1em auto",
+  border: "2px solid $kindaLight",
+  borderRadius: "$rounded",
+});
 
-export type IFrameProps = JSX.IntrinsicElements["iframe"] & {
+export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {
   src: string;
   height: number;
   width?: number; // defaults to 100%
@@ -10,17 +17,16 @@ export type IFrameProps = JSX.IntrinsicElements["iframe"] & {
   noScroll?: boolean;
 };
 
-const IFrame = ({ src, title, height, width, allowScripts, noScroll, className, ...rest }: IFrameProps) => (
-  <iframe
-    className={classNames(styles.frame, className)}
+const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }: IFrameProps) => (
+  <RoundedIFrame
     src={src}
     title={title}
     sandbox={allowScripts ? "allow-same-origin allow-scripts allow-popups" : undefined}
     scrolling={noScroll ? "no" : undefined}
     loading="lazy"
-    style={{
+    css={{
       height: `${height}px`,
-      maxWidth: width ? `${width}px` : undefined,
+      maxWidth: width ? `${width}px` : null,
     }}
     {...rest}
   />