remove all styled-jsx from components

components/loading/Loading.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+  display: inline-block;
+  text-align: center;
+}
+
+.box {
+  display: inline-block;
+  height: 100%;
+  animation: loading 1.5s infinite ease-in-out both;
+  background-color: var(--medium-light);
+}
+
+@keyframes loading {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(0.6);
+  }
+}

components/loading/Loading.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
-import css from "styled-jsx/css";
+
+import styles from "./Loading.module.css";
 
 type Props = {
   width: number; // of entire container, in pixels
@@ -11,51 +12,31 @@ const Loading = ({ width, boxes = 3, timing = 0.1 }: Props) => {
   // each box is just an empty div
   const divs = [];
 
-  // box styles (extracted here so they're not defined for each individual box)
-  const { className: boxClassName, styles: boxStyles } = css.resolve`
-    div {
-      display: inline-block;
-      width: ${width / (boxes + 1)}px;
-      height: 100%;
-      animation: loading 1.5s infinite ease-in-out both;
-      background-color: var(--medium-light);
-    }
-
-    @keyframes loading {
-      0%,
-      80%,
-      100% {
-        transform: scale(0);
-      }
-      40% {
-        transform: scale(0.6);
-      }
-    }
-  `;
-
   // allow a custom number of pulsing boxes (defaults to 3)
   for (let i = 0; i < boxes; i++) {
     // width of each box correlates with number of boxes (with a little padding)
     // each individual box's animation has a staggered start in corresponding order
     divs.push(
-      <div key={i} className={boxClassName} style={{ animationDelay: `${i * timing}s` }}>
-        {boxStyles}
-      </div>
+      <div
+        key={i}
+        className={styles.box}
+        style={{
+          width: `${width / (boxes + 1)}px`,
+          animationDelay: `${i * timing}s`,
+        }}
+      />
     );
   }
 
   return (
-    <div>
+    <div
+      className={styles.wrapper}
+      style={{
+        width: `${width}px`,
+        height: `${width / 2}px`,
+      }}
+    >
       {divs}
-
-      <style jsx>{`
-        div {
-          width: ${width}px;
-          height: ${width / 2}px;
-          display: inline-block;
-          text-align: center;
-        }
-      `}</style>
     </div>
   );
 };

components/notes/Comments.module.css

@@ -0,0 +1,6 @@
+.wrapper :global(.giscus) {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 2px solid var(--light);
+  min-height: 350px;
+}

components/notes/Comments.tsx

@@ -3,6 +3,8 @@ import { Giscus } from "@giscus/react";
 import { giscusConfig } from "../../lib/config";
 import type { GiscusProps } from "@giscus/react";
 
+import styles from "./Comments.module.css";
+
 type Props = {
   title: string;
 };
@@ -11,10 +13,7 @@ const Comments = ({ title }: Props) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div
-      id="comments"
-      style={{ marginTop: "2em", paddingTop: "1em", borderTop: "2px solid var(--light)", minHeight: "350px" }}
-    >
+    <div className={styles.wrapper}>
       <Giscus
         {...(giscusConfig as GiscusProps)}
         term={title}

components/notes/Meta.module.css

@@ -21,7 +21,7 @@
 
 .meta > div:last-of-type {
   /* fix potential layout shift when number of hits loads */
-  min-width: 6.5em;
+  min-width: 7em;
   margin-right: 0;
 }
 

components/projects/RepoCard.tsx

@@ -15,13 +15,7 @@ const RepoCard = (props: RepoType) => (
     <div className={styles.meta}>
       {props.language && (
         <div className={styles.meta_item}>
-          <span className={styles.language_color}>
-            <style jsx>{`
-              span {
-                background-color: ${props.language.color};
-              }
-            `}</style>
-          </span>
+          <span className={styles.language_color} style={{ backgroundColor: props.language.color }} />
           <span>{props.language.name}</span>
         </div>
       )}