From 760607fddd34dd866d5833aad4becd3ec7b1353e Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Fri, 4 Mar 2022 10:52:04 -0500 Subject: [PATCH] clean up and add type checks to the modern-normalize.css -> JS translation --- lib/styles/helpers/normalize.ts | 189 ++++++++++++++++++-------------- lib/styles/stitches.config.ts | 92 ++++++++-------- yarn.lock | 42 +++---- 3 files changed, 171 insertions(+), 152 deletions(-) diff --git a/lib/styles/helpers/normalize.ts b/lib/styles/helpers/normalize.ts index 304ec8a8..6c61ce9f 100644 --- 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[] = [ + { + "*, ::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; diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index 96c72ef6..2dde0486 100644 --- 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 = { diff --git a/yarn.lock b/yarn.lock index d99e710a..cc17f89e 100644 --- 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"