CSS modules ➡️ Stitches 🧵 (#799)

components/Content/Content.module.css

@@ -1,12 +0,0 @@
-.content {
-  font-size: 0.9em;
-  line-height: 1.7;
-  color: var(--text);
-}
-
-@media screen and (max-width: 768px) {
-  .content {
-    font-size: 0.925em;
-    line-height: 1.85;
-  }
-}

components/Content/Content.tsx

@@ -1,11 +1,14 @@
-import classNames from "classnames";
+import { styled } from "../../lib/styles/stitches.config";
 
-import styles from "./Content.module.css";
+const Content = styled("div", {
+  fontSize: "0.9em",
+  lineHeight: 1.7,
+  color: "$text",
 
-export type ContentProps = JSX.IntrinsicElements["div"];
-
-const Content = ({ className, ...rest }: ContentProps) => (
-  <div className={classNames(styles.content, className)} {...rest} />
-);
+  "@mobile": {
+    fontSize: "0.925em",
+    lineHeight: 1.85,
+  },
+});
 
 export default Content;