fix some leftover stitches to-do items

2025-09-16 16:15:33 -04:00 · 2022-03-03 13:18:12 -05:00
parent dc7622a7af
commit ea4e7025ff
12 changed files with 173 additions and 155 deletions
--- a/lib/styles/fonts/comic-neue.ts
+++ b/lib/styles/fonts/comic-neue.ts
@@ -6,19 +6,24 @@ import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neu
 import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
 import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";

-export const ComicNeue = [
-  {
-    fontFamily: "Comic Neue",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 400,
-    src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Comic Neue",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 700,
-    src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
-  },
-];
+const ComicNeue = {
+  preloadUrl: null, // don't preload, only used on one page
+  family: [
+    {
+      fontFamily: "Comic Neue",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Comic Neue",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
+    },
+  ],
+};
+
+export default ComicNeue;
--- a/lib/styles/fonts/inter.ts
+++ b/lib/styles/fonts/inter.ts
@@ -10,48 +10,40 @@ import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-no

 // Variable
 import interLatinVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-full-normal.woff2";
-import interLatinExtVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-ext-variable-full-normal.woff2";

-// re-export hashed URL of the most prominent font so we can preload it
-export { interLatinVarFullNormalWoff2 as preloadUrl };
+const Inter = {
+  // re-export hashed URL of the most prominent file so we can preload it in head:
+  preloadUrl: interLatinVarFullNormalWoff2,
+  family: [
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter var",
+      fontStyle: "oblique 0deg 10deg",
+      fontDisplay: "swap",
+      fontWeight: "100 900",
+      src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
+    },
+  ],
+};

-export const Inter = [
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 400,
-    src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 500,
-    src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 700,
-    src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter var",
-    fontStyle: "oblique 0deg 10deg",
-    fontDisplay: "swap",
-    fontWeight: "100 900",
-    src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Inter var",
-    fontStyle: "oblique 0deg 10deg",
-    fontDisplay: "swap",
-    fontWeight: "100 900",
-    src: `url(${interLatinExtVarFullNormalWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-];
+export default Inter;
--- a/lib/styles/fonts/roboto-mono.ts
+++ b/lib/styles/fonts/roboto-mono.ts
@@ -7,70 +7,78 @@ import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-m
 import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
 import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
 import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
+import robotoMonoLatin400ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff";
+import robotoMonoLatin400ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff2";
+import robotoMonoLatin500ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff";
+import robotoMonoLatin500ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff2";
+import robotoMonoLatin700ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff";
+import robotoMonoLatin700ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff2";

 // Variable
 import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
-import robotoMonoLatinExtVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-normal.woff2";
 import robotoMonoLatinVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-italic.woff2";
-import robotoMonoLatinExtVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-italic.woff2";

-// re-export hashed URL of the most prominent font so we can preload it
-export { robotoMonoLatinVarWghtOnlyNormalWoff2 as preloadUrl };
+const RobotoMono = {
+  // re-export hashed URL of the most prominent file so we can preload it in head:
+  preloadUrl: robotoMonoLatinVarWghtOnlyNormalWoff2,
+  family: [
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${robotoMonoLatin400ItalicWoff2}) format("woff2"), url(${robotoMonoLatin400ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${robotoMonoLatin500ItalicWoff2}) format("woff2"), url(${robotoMonoLatin500ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${robotoMonoLatin700ItalicWoff2}) format("woff2"), url(${robotoMonoLatin700ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono var",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: "100 700",
+      src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
+    },
+    {
+      fontFamily: "Roboto Mono var",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: "100 700",
+      src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
+    },
+  ],
+};

-export const RobotoMono = [
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 400,
-    src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 500,
-    src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 700,
-    src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinExtVarWghtOnlyNormalWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "italic",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "italic",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinExtVarWghtOnlyItalicWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-];
+export default RobotoMono;
--- a/lib/styles/helpers/hex-to-rgba.ts
+++ b/lib/styles/helpers/hex-to-rgba.ts
@@ -5,7 +5,7 @@ const hex2rgba = (hex: string, alpha: number) => {
  const green = (number >> 8) & 255;
  const blue = number & 255;

-  return `rgba(${red},${green},${blue},${alpha})`;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };

 export default hex2rgba;
--- a/lib/styles/helpers/normalize.ts
+++ b/lib/styles/helpers/normalize.ts
@@ -1,7 +1,8 @@
 // @sindresorhus's modern-normalize.css converted to a JS object, with a bit of cruft removed:
 // https://github.com/sindresorhus/modern-normalize/blob/b59ec0d3d8654cbb6843bc9ea45aef5f1d680108/modern-normalize.css
+// note: re-defining any of these selector(s) anywhere else will override *every* property for them defined here.

-export const normalizeCss = {
+const normalizeCss = {
  "*, ::before, ::after": {
    boxSizing: "border-box",
  },
@@ -85,3 +86,5 @@ export const normalizeCss = {
    display: "list-item",
  },
 };
+
+export default normalizeCss;
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@@ -2,12 +2,12 @@ import { createStitches, defaultThemeMap } from "@stitches/react";
 import hex2rgba from "./helpers/hex-to-rgba";

 // modified modern-normalize.css in object form
-import { normalizeCss } from "./helpers/normalize";
+import normalizeCss from "./helpers/normalize";

 // web fonts
-import { Inter, preloadUrl as interPreloadUrl } from "./fonts/inter";
-import { RobotoMono, preloadUrl as robotoMonoPreloadUrl } from "./fonts/roboto-mono";
-import { ComicNeue } from "./fonts/comic-neue";
+import Inter from "./fonts/inter";
+import RobotoMono from "./fonts/roboto-mono";
+import ComicNeue from "./fonts/comic-neue";

 export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
  theme: {
@@ -120,7 +120,7 @@ export const globalStyles = globalCss({
  ...normalizeCss,

  // @ts-ignore
-  "@font-face": [...Inter, ...RobotoMono, ...ComicNeue],
+  "@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],

  body: {
    margin: 0,
@@ -176,9 +176,9 @@ export const globalStyles = globalCss({
 });

 // re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
-export const preloads = {
+export const preloadUrls = {
  fonts: {
-    InterVar: interPreloadUrl,
-    RobotoMonoVar: robotoMonoPreloadUrl,
+    InterVar: Inter.preloadUrl,
+    RobotoMonoVar: RobotoMono.preloadUrl,
  },
 };