Migrate to app router (#2254)

components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,105 @@
+.codeBlock {
+  position: relative;
+  width: 100%;
+  margin: 1em auto;
+  color: var(--colors-codeText);
+}
+
+.codeBlock .code {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  font-size: 0.9em;
+  tab-size: 2px;
+  background-color: var(--colors-codeBackground);
+  border: 1px solid var(--colors-kindaLight);
+  border-radius: var(--radii-corner);
+  transition:
+    background var(--transitions-fade),
+    border var(--transitions-fade);
+}
+
+.codeBlock :global(.line-number)::before {
+  display: inline-block;
+  width: 1.5em;
+  margin-right: 1.5em;
+  text-align: right;
+  color: var(--colors-codeComment);
+  content: attr(line);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+.codeBlock :global(.code-line):first-of-type {
+  margin-right: 3em;
+}
+
+.codeBlock.highlight :global(.token.comment),
+.codeBlock.highlight :global(.token.prolog),
+.codeBlock.highlight :global(.token.cdata) {
+  color: var(--colors-codeComment);
+}
+.codeBlock.highlight :global(.token.delimiter),
+.codeBlock.highlight :global(.token.boolean),
+.codeBlock.highlight :global(.token.keyword),
+.codeBlock.highlight :global(.token.selector),
+.codeBlock.highlight :global(.token.important),
+.codeBlock.highlight :global(.token.doctype),
+.codeBlock.highlight :global(.token.atrule),
+.codeBlock.highlight :global(.token.url) {
+  color: var(--colors-codeKeyword);
+}
+.codeBlock.highlight :global(.token.tag),
+.codeBlock.highlight :global(.token.builtin),
+.codeBlock.highlight :global(.token.regex) {
+  color: var(--colors-codeNamespace);
+}
+.codeBlock.highlight :global(.token.property),
+.codeBlock.highlight :global(.token.constant),
+.codeBlock.highlight :global(.token.variable),
+.codeBlock.highlight :global(.token.attr-value),
+.codeBlock.highlight :global(.token.class-name),
+.codeBlock.highlight :global(.token.string),
+.codeBlock.highlight :global(.token.char) {
+  color: var(--colors-codeVariable);
+}
+.codeBlock.highlight :global(.token.literal-property),
+.codeBlock.highlight :global(.token.attr-name) {
+  color: var(--colors-codeAttribute);
+}
+.codeBlock.highlight :global(.token.function) {
+  color: var(--colors-codeLiteral);
+}
+.codeBlock.highlight :global(.token.tag .punctuation),
+.codeBlock.highlight :global(.token.attr-value .punctuation) {
+  color: var(--colors-codePunctuation);
+}
+.codeBlock.highlight :global(.token.inserted) {
+  color: var(--colors-codeAddition);
+}
+.codeBlock.highlight :global(.token.deleted) {
+  color: var(--colors-codeDeletion);
+}
+.codeBlock.highlight :global(.token.url) {
+  text-decoration: underline;
+}
+.codeBlock.highlight :global(.token.bold) {
+  font-weight: bold;
+}
+.codeBlock.highlight :global(.token.italic) {
+  font-style: italic;
+}
+
+.cornerCopyButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.65em;
+  background-color: var(--colors-backgroundInner);
+  border: 1px solid var(--colors-kindaLight);
+  border-top-right-radius: var(--radii-corner);
+  border-bottom-left-radius: var(--radii-corner);
+  transition:
+    background var(--transitions-fade),
+    border var(--transitions-fade);
+}

components/CodeBlock/CodeBlock.tsx

@@ -1,105 +1,22 @@
-import Code from "../Code";
+import clsx from "clsx";
 import CopyButton from "../CopyButton";
-import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentPropsWithoutRef } from "react";
 
-const Block = styled("div", {
-  position: "relative",
-  width: "100%",
-  margin: "1em auto",
-  color: theme.colors.codeText,
+import styles from "./CodeBlock.module.css";
 
-  [`& ${Code}`]: {
-    display: "block",
-    overflowX: "auto",
-    padding: "1em",
-    fontSize: "0.9em",
-    tabSize: 2,
-
-    // optional line numbers added at time of prism compilation
-    ".line-number::before": {
-      display: "inline-block",
-      width: "1.5em",
-      marginRight: "1.5em",
-      textAlign: "right",
-      color: theme.colors.codeComment,
-      content: "attr(line)", // added as spans by prism
-      fontVariantNumeric: "tabular-nums",
-      userSelect: "none",
-    },
-
-    // leave room for clipboard button to the right of the first line
-    ".code-line:first-of-type": {
-      marginRight: "3em",
-    },
-  },
-
-  variants: {
-    highlight: {
-      true: {
-        // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
-        ".token": {
-          "&.comment, &.prolog, &.cdata": {
-            color: theme.colors.codeComment,
-          },
-          "&.delimiter, &.boolean, &.keyword, &.selector, &.important, &.doctype, &.atrule, &.url": {
-            color: theme.colors.codeKeyword,
-          },
-          "&.tag, &.builtin, &.regex": {
-            color: theme.colors.codeNamespace,
-          },
-          "&.property, &.constant, &.variable, &.attr-value, &.class-name, &.string, &.char": {
-            color: theme.colors.codeVariable,
-          },
-          "&.literal-property, &.attr-name": {
-            color: theme.colors.codeAttribute,
-          },
-          "&.function": {
-            color: theme.colors.codeLiteral,
-          },
-          "&.tag .punctuation, &.attr-value .punctuation": {
-            color: theme.colors.codePunctuation,
-          },
-          "&.inserted": {
-            color: theme.colors.codeAddition,
-          },
-          "&.deleted": {
-            color: theme.colors.codeDeletion,
-          },
-          "&.url": { textDecoration: "underline" },
-          "&.bold": { fontWeight: "bold" },
-          "&.italic": { fontStyle: "italic" },
-        },
-      },
-    },
-  },
-});
-
-const CornerCopyButton = styled(CopyButton, {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  padding: "0.65em",
-  backgroundColor: theme.colors.backgroundInner,
-  border: `1px solid ${theme.colors.kindaLight}`,
-  borderTopRightRadius: theme.radii.corner,
-  borderBottomLeftRadius: theme.radii.corner,
-  transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
-});
-
-export type CodeBlockProps = ComponentPropsWithoutRef<typeof Code> & {
+export type CodeBlockProps = ComponentPropsWithoutRef<"div"> & {
   highlight?: boolean;
   withCopyButton?: boolean;
 };
 
 const CodeBlock = ({ highlight, withCopyButton, className, children, ...rest }: CodeBlockProps) => {
   return (
-    <Block highlight={highlight}>
-      {withCopyButton && <CornerCopyButton source={children} />}
-      <Code className={className?.replace("code-highlight", "").trim()} {...rest}>
+    <div className={clsx(styles.codeBlock, highlight && styles.highlight)}>
+      {withCopyButton && <CopyButton className={styles.cornerCopyButton} source={children} />}
+      <code className={clsx(styles.code, className)} {...rest}>
         {children}
-      </Code>
-    </Block>
+      </code>
+    </div>
   );
 };