CSS modules ➡️ Stitches 🧵 (#799)

components/CodeBlock/CodeBlock.tsx

@@ -1,9 +1,109 @@
-import classNames from "classnames";
 import CopyButton from "../CopyButton/CopyButton";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
-import styles from "./CodeBlock.module.css";
+const Code = styled("code", {
+  fontSize: "0.925em",
+  color: "$codeText",
+  pageBreakInside: "avoid",
+  backgroundColor: "$codeBackground",
+  border: "1px solid $kindaLight",
+  borderRadius: "$rounded",
 
-export type CodeBlockProps = JSX.IntrinsicElements["code"] & {
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",
+
+  variants: {
+    highlight: {
+      // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
+      true: {
+        // leave room for clipboard button to the right of the first line
+        ".code-line:first-of-type": {
+          marginRight: "3em",
+        },
+        ".line-number::before": {
+          display: "inline-block",
+          width: "1.5em",
+          marginRight: "1.5em",
+          textAlign: "right",
+          color: "$codeComment",
+          content: "attr(line)", // added to spans by prism
+          userSelect: "none",
+        },
+        ".token": {
+          "&.comment, &.prolog, &.cdata": {
+            color: "$codeComment",
+          },
+          "&.delimiter, &.boolean, &.keyword, &.selector, &.important, &.doctype, &.atrule, &.url": {
+            color: "$codeKeyword",
+          },
+          "&.tag, &.builtin, &.regex": {
+            color: "$codeNamespace",
+          },
+          "&.property, &.constant, &.variable, &.attr-value, &.class-name, &.string, &.char": {
+            color: "$codeVariable",
+          },
+          "&.literal-property, &.attr-name": {
+            color: "$codeAttribute",
+          },
+          "&.function": {
+            color: "$codeLiteral",
+          },
+          "&.tag .punctuation, &.attr-value .punctuation": {
+            color: "$codePunctuation",
+          },
+          "&.inserted": {
+            color: "$codeAddition",
+          },
+          "&.deleted": {
+            color: "$codeDeletion",
+          },
+          "&.url": { textDecoration: "underline" },
+          "&.bold": { fontWeight: "bold" },
+          "&.italic": { fontStyle: "italic" },
+        },
+      },
+    },
+  },
+});
+
+const InlineCode = styled(Code, {
+  padding: "0.2em 0.3em",
+});
+
+const Block = styled("div", {
+  position: "relative",
+  width: "100%",
+  margin: "1em auto",
+
+  [`& ${Code}`]: {
+    display: "block",
+    overflowX: "auto",
+    padding: "1em",
+    tabSize: 2,
+  },
+});
+
+const CornerCopyButton = styled(CopyButton, {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  padding: "0.65em",
+  color: "$mediumDark",
+  backgroundColor: "$backgroundInner",
+  border: "1px solid $kindaLight",
+  borderTopRightRadius: "$radii$rounded",
+  borderEndStartRadius: "$radii$rounded",
+
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",
+
+  "&:hover": {
+    color: "$link",
+  },
+});
+
+export type CodeBlockProps = ComponentProps<typeof Code> & {
   forceBlock?: boolean;
 };
 
@@ -15,26 +115,19 @@ const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps)
     // full multi-line code blocks with copy-to-clipboard button
     // automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
     return (
-      <div className={styles.block}>
-        <CopyButton source={children} className={styles.copy_btn} />
-        <code
-          className={classNames(
-            styles.code,
-            prismEnabled && styles.highlight,
-            className?.replace("code-highlight", "").trim()
-          )}
-          {...rest}
-        >
+      <Block>
+        <CornerCopyButton source={children} />
+        <Code highlight={prismEnabled} className={className?.replace("code-highlight", "").trim()} {...rest}>
           {children}
-        </code>
-      </div>
+        </Code>
+      </Block>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)
     return (
-      <code className={classNames(styles.code, styles.inline, className)} {...rest}>
+      <InlineCode className={className} {...rest}>
         {children}
-      </code>
+      </InlineCode>
     );
   }
 };