CSS modules ➡️ Stitches 🧵 (#799)

components/HorizontalRule/HorizontalRule.module.css

@@ -1,6 +0,0 @@
-.hr {
-  margin: 1.5em auto;
-  height: 0.175em;
-  border: 0;
-  background-color: var(--light);
-}

components/HorizontalRule/HorizontalRule.tsx

@@ -1,11 +1,10 @@
-import classNames from "classnames";
+import { styled } from "../../lib/styles/stitches.config";
 
-import styles from "./HorizontalRule.module.css";
-
-export type HorizontalRuleProps = JSX.IntrinsicElements["hr"];
-
-const HorizontalRule = ({ className, ...rest }: HorizontalRuleProps) => (
-  <hr className={classNames(styles.hr, className)} {...rest} />
-);
+const HorizontalRule = styled("hr", {
+  margin: "1.5em auto",
+  height: "0.175em",
+  border: 0,
+  backgroundColor: "$light",
+});
 
 export default HorizontalRule;