clean up and add type checks to the modern-normalize.css -> JS translation

2025-07-21 10:41:17 -04:00 · 2022-03-04 10:52:04 -05:00
parent f8b6378faf
commit 760607fddd
3 changed files with 171 additions and 152 deletions
--- a/lib/styles/helpers/normalize.ts
+++ b/lib/styles/helpers/normalize.ts
@@ -1,90 +1,109 @@
-// @sindresorhus's modern-normalize.css converted to a JS object, with a bit of cruft removed:
+// @sindresorhus's modern-normalize.css converted to a JS object, as of this commit:
 // 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.

-const normalizeCss = {
-  "*, ::before, ::after": {
-    boxSizing: "border-box",
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+import type * as Stitches from "@stitches/react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
+  {
+    "*, ::before, ::after": {
+      boxSizing: "border-box",
+    },
+    html: {
+      lineHeight: 1.15,
+      tabSize: 4,
+      // @ts-ignore
+      WebkitTextSizeAdjust: "100%",
+    },
+    body: {
+      margin: 0,
+      // fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    },
+    hr: {
+      height: 0,
+      color: "inherit",
+    },
+    "abbr[title]": {
+      textDecoration: "underline dotted",
+    },
+    "b, strong": {
+      fontWeight: "bolder",
+    },
+    "code, kbd, samp, pre": {
+      // fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
+      fontSize: "1em",
+    },
+    small: {
+      fontSize: "80%",
+    },
+    "sub, sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline",
+    },
+    sub: {
+      bottom: "-0.25em",
+    },
+    sup: {
+      top: "-0.5em",
+    },
+    table: {
+      textIndent: 0,
+      borderColor: "inherit",
+    },
+    "button, input, optgroup, select, textarea": {
+      fontFamily: "inherit",
+      fontSize: "100%",
+      lineHeight: 1.15,
+      margin: 0,
+    },
+    "button, select": {
+      textTransform: "none",
+    },
+    "button, [type='button'], [type='reset'], [type='submit']": {
+      // @ts-ignore
+      WebkitAppearance: "button",
+    },
+    "::-moz-focus-inner": {
+      borderStyle: "none",
+      padding: 0,
+    },
+    ":-moz-focusring": {
+      outline: "1px dotted ButtonText",
+    },
+    ":-moz-ui-invalid": {
+      boxShadow: "none",
+    },
+    legend: {
+      padding: 0,
+    },
+    progress: {
+      verticalAlign: "baseline",
+    },
+    summary: {
+      display: "list-item",
+    },
+    "[type='search']": {
+      outlineOffset: -2,
+      // @ts-ignore
+      WebkitAppearance: "textfield",
+    },
+    "::-webkit-search-decoration": {
+      // @ts-ignore
+      WebkitAppearance: "none",
+    },
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+      height: "auto",
+    },
+    "::-webkit-file-upload-button": {
+      font: "inherit",
+      // @ts-ignore
+      WebkitAppearance: "button",
+    },
  },
-  html: {
-    lineHeight: 1.15,
-    tabSize: 4,
-    WebkitTextSizeAdjust: "100%",
-  },
-  hr: {
-    height: 0,
-    color: "inherit",
-  },
-  "abbr[title]": {
-    textDecoration: "underline dotted",
-  },
-  "b, strong": {
-    fontWeight: "bolder",
-  },
-  small: {
-    fontSize: "80%",
-  },
-  "sub, sup": {
-    fontSize: "75%",
-    lineHeight: 0,
-    position: "relative",
-    verticalAlign: "baseline",
-  },
-  sub: {
-    bottom: "-0.25em",
-  },
-  sup: {
-    top: "-0.5em",
-  },
-  table: {
-    textIndent: 0,
-    borderColor: "inherit",
-  },
-  "button, input, optgroup, select, textarea": {
-    fontFamily: "inherit",
-    fontSize: "100%",
-    lineHeight: 1.15,
-    margin: 0,
-  },
-  "button, select": {
-    textTransform: "none",
-  },
-  "button, [type='button'], [type='reset'], [type='submit']": {
-    WebkitAppearance: "button",
-  },
-  "::-moz-focus-inner": {
-    borderStyle: "none",
-    padding: 0,
-  },
-  ":-moz-focusring": {
-    outline: "1px dotted ButtonText",
-  },
-  ":-moz-ui-invalid": {
-    boxShadow: "none",
-  },
-  legend: {
-    padding: 0,
-  },
-  progress: {
-    verticalAlign: "baseline",
-  },
-  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-    height: "auto",
-  },
-  "[type='search']": {
-    WebkitAppearance: "textfield",
-    outlineOffset: "-2px",
-  },
-  "::-webkit-search-decoration": {
-    WebkitAppearance: "none",
-  },
-  "::-webkit-file-upload-button": {
-    WebkitAppearance: "button",
-    font: "inherit",
-  },
-  summary: {
-    display: "list-item",
-  },
-};
+];

 export default normalizeCss;
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@@ -113,65 +113,65 @@ export const darkTheme = createTheme({
  },
 });

-export const globalStyles = globalCss({
-  // https://github.com/sindresorhus/modern-normalize
-  ...normalizeCss,
-
+export const globalStyles = globalCss(
  // @ts-ignore
-  "@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
+  ...normalizeCss,
+  {
+    "@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],

-  body: {
-    margin: 0,
-    backgroundColor: "$backgroundInner",
-    fontFamily: "$sans",
-
-    // light-dark theme switch fading
-    transition: "background 0.25s ease",
-  },
-
-  "code, kbd, samp, pre": {
-    fontFamily: "$mono",
-  },
-
-  // variable font support
-  "@supports (font-variation-settings: normal)": {
    body: {
-      fontFamily: "$sansVar",
-      fontOpticalSizing: "auto",
+      backgroundColor: "$backgroundInner",
+      fontFamily: "$sans",
+
+      // light-dark theme switch fading
+      transition: "background 0.25s ease",
    },

    "code, kbd, samp, pre": {
-      fontFamily: "$monoVar",
+      fontFamily: "$mono",
    },

-    // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
-    // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
-    em: {
-      fontStyle: "normal",
-      fontVariationSettings: `"ital" 1, "slnt" -10`,
+    // variable font support?
+    // @ts-ignore
+    "@supports (font-variation-settings: normal)": {
+      body: {
+        fontFamily: "$sansVar",
+        fontOpticalSizing: "auto",
+      },

-      // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
-      "& code, & kbd, & samp, & pre": {
-        fontStyle: "italic !important",
-        fontVariationSettings: "initial !important",
+      "code, kbd, samp, pre": {
+        fontFamily: "$monoVar",
+      },
+
+      // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
+      // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
+      em: {
+        fontStyle: "normal",
+        fontVariationSettings: `"ital" 1, "slnt" -10`,
+
+        // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
+        "& code, & kbd, & samp, & pre": {
+          fontStyle: "italic !important",
+          fontVariationSettings: "initial !important",
+        },
      },
    },
-  },

-  // reduced motion preference:
-  // https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
-  "@media (prefers-reduced-motion: reduce)": {
-    "*, ::before, ::after": {
-      animationDelay: "-1ms !important",
-      animationDuration: "1ms !important",
-      animationIterationCount: "1 !important",
-      backgroundAttachment: "initial !important",
-      scrollBehavior: "auto !important",
-      transitionDuration: "0s !important",
-      transitionDelay: "0s !important",
+    // reduced motion preference:
+    // https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
+    "@media (prefers-reduced-motion: reduce)": {
+      "*, ::before, ::after": {
+        animationDelay: "-1ms !important",
+        animationDuration: "1ms !important",
+        animationIterationCount: "1 !important",
+        backgroundAttachment: "initial !important",
+        scrollBehavior: "auto !important",
+        transitionDuration: "0s !important",
+        transitionDelay: "0s !important",
+      },
    },
-  },
-});
+  }
+);

 // re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
 export const preloadUrls = {
--- a/yarn.lock
+++ b/yarn.lock
@@ -2067,9 +2067,9 @@ camelcase@^6.2.0:
  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

 caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001312:
-  version "1.0.30001312"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
-  integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
+  version "1.0.30001313"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz#a380b079db91621e1b7120895874e2fd62ed2e2f"
+  integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==

 ccount@^1.0.0:
  version "1.1.0"
@@ -2343,9 +2343,9 @@ csso@^4.2.0:
    css-tree "^1.1.2"

 csstype@^3.0.2:
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
-  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==

 damerau-levenshtein@^1.0.7:
  version "1.0.8"
@@ -2514,9 +2514,9 @@ emoji-regex@^9.2.2:
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

 enhanced-resolve@^5.7.0:
-  version "5.9.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.1.tgz#e898cea44d9199fd92137496cff5691b910fb43e"
-  integrity sha512-jdyZMwCQ5Oj4c5+BTnkxPgDZO/BJzh/ADDmKebayyzNwjVX1AFCeGkOfxNx0mHi2+8BKC5VxUYiw3TIvoT7vhw==
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
+  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
  dependencies:
    graceful-fs "^4.2.4"
    tapable "^2.2.0"
@@ -5759,9 +5759,9 @@ trough@^2.0.0:
  integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==

 tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
-  integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz#f3e9b8f6876698581d94470c03c95b3a48c0e3d7"
+  integrity sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==
  dependencies:
    "@types/json5" "^0.0.29"
    json5 "^1.0.1"
@@ -5965,9 +5965,9 @@ unist-util-stringify-position@^2.0.0:
    "@types/unist" "^2.0.2"

 unist-util-stringify-position@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.1.tgz#9dd6d1817aed14ea35c39227c47eb9bd192b7165"
-  integrity sha512-HDVOJ704Uj5QWqoB6KV4CDP62OW9wam9BEuwGE4fvunhVraZcO/fFNBCpvmDDSlkFBG/GAYdHfKvKvDAJxzcWA==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.2.tgz#5c6aa07c90b1deffd9153be170dce628a869a447"
+  integrity sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==
  dependencies:
    "@types/unist" "^2.0.0"

@@ -6119,9 +6119,9 @@ vfile-message@^2.0.0:
    unist-util-stringify-position "^2.0.0"

 vfile-message@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.1.tgz#b45c17a074ba4fec4319b32ffddf71ed1c52b97e"
-  integrity sha512-pz5xA88aupQPuXmY46xnGAv8MzAcU1Xi2Do3UftjTdvQHreXCWvJT/BbzYixPNYRek+EAioI0kP3crJu37xa6Q==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
+  integrity sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==
  dependencies:
    "@types/unist" "^2.0.0"
    unist-util-stringify-position "^3.0.0"
@@ -6137,9 +6137,9 @@ vfile@^4.0.0, vfile@^4.2.1:
    vfile-message "^2.0.0"

 vfile@^5.0.0, vfile@^5.3.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.1.tgz#5e8ae0aa1d3359e6123d5051451e03f355768ca0"
-  integrity sha512-EWkoULWVDBV3ozmE21TA0qekXreWJXV1jKcF8rgnvmmH0L9Vm8eTSnuuSSpH2XpLXZLJ0uMMIHUqDLHjK5lh4w==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.2.tgz#b499fbc50197ea50ad3749e9b60beb16ca5b7c54"
+  integrity sha512-w0PLIugRY3Crkgw89TeMvHCzqCs/zpreR31hl4D92y6SOE07+bfJe+dK5Q2akwS+i/c801kzjoOr9gMcTe6IAA==
  dependencies:
    "@types/unist" "^2.0.0"
    is-buffer "^2.0.0"