automatically inline critical css via critters (#760)

2025-06-30 22:26:38 -04:00 · 2022-02-07 14:40:38 -05:00
parent bcb408702a
commit da42cb074c
9 changed files with 120 additions and 78 deletions
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
 import classNames from "classnames";
 import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
-import { themeColors } from "../../lib/config";
+import themes, { toCSS } from "../../lib/themes";
 import type { PropsWithChildren, HTMLAttributes } from "react";

 import styles from "./Layout.module.css";
@ -20,15 +20,23 @@ const Layout = ({ noContainer, className, children, ...rest }: Props) => {
  return (
    <>
      <Head>
-        {resolvedTheme && <meta name="theme-color" content={themeColors[resolvedTheme]} />}
+        {/* convert themes object into inlined css variables */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
+          }}
+        />

        {/* kinda a hack to prevent dramatically fading into dark theme if we're immediately setting it on load */}
-        <style>{`.page.loading,.page.loading *{transition:none!important}`}</style>
+        <style>{`.page.no-fade,.page.no-fade *{transition:none!important}`}</style>
+
+        {/* dynamically set browser theme color to match the background color */}
+        <meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} />
      </Head>

-      {/* remove the `.loading` class above from body once the page is finished loading */}
+      {/* remove the `.no-fade` class above from body once the page is finished loading */}
      <Script id="unblock-transitions" strategy="lazyOnload">
-        {`try{const cl=document.body.classList;cl.remove("loading");cl.add("loaded")}catch(e){}`}
+        {`try{document.body.classList.remove("no-fade")}catch(e){}`}
      </Script>

      <div className={classNames(styles.flex, className)} {...rest}>
--- a/lib/config.js
+++ b/lib/config.js
@ -16,11 +16,6 @@ module.exports = {
  shortDescription: "Front-End Web Developer in Boston, MA",
  longDescription:
    "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps.",
-  themeColors: {
-    // used for `<meta name="theme-color" ...>`, should be the same as CSS `--background-outer` var in styles/colors.css
-    light: "#fcfcfc",
-    dark: "#252525",
-  },
  githubRepo: "jakejarvis/jarv.is",
  verifyGoogle: "qQhmLTwjNWYgQ7W42nSTq63xIrTch13X_11mmxBE9zk",
  verifyBing: "164551986DA47F7F6FC0D21A93FFFCA6",
--- a/lib/themes.ts
+++ b/lib/themes.ts
@ -0,0 +1,74 @@
+// Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally.
+// TODO: Probably invert the object so that *each variable* has a light and dark key.
+const themes = {
+  light: {
+    "background-inner": "#ffffff",
+    "background-outer": "#fcfcfc",
+    "background-header": "rgba(252, 252, 252, 0.7)",
+    text: "#202020",
+    "medium-dark": "#515151",
+    medium: "#5e5e5e",
+    "medium-light": "#757575",
+    light: "#d2d2d2",
+    "kinda-light": "#e3e3e3",
+    "super-light": "#f4f4f4",
+    "super-duper-light": "#fbfbfb",
+    link: "#0e6dc2",
+    "link-underline": "rgba(14, 109, 194, 0.4)",
+    success: "#44a248",
+    error: "#ff1b1b",
+    warning: "#f78200",
+
+    // Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
+    "code-text": "#313131",
+    "code-background": "#fdfdfd",
+    "code-comment": "#656e77",
+    "code-keyword": "#029cb9",
+    "code-attribute": "#70a800",
+    "code-namespace": "#f92672",
+    "code-literal": "#ae81ff",
+    "code-punctuation": "#111111",
+    "code-variable": "#d88200",
+    "code-addition": "#44a248",
+    "code-deletion": "#ff1b1b",
+  },
+  dark: {
+    "background-inner": "#1e1e1e",
+    "background-outer": "#252525",
+    "background-header": "rgba(37, 37, 37, 0.85)",
+    text: "#f1f1f1",
+    "medium-dark": "#d7d7d7",
+    medium: "#b1b1b1",
+    "medium-light": "#959595",
+    light: "#646464",
+    "kinda-light": "#535353",
+    "super-light": "#272727",
+    "super-duper-light": "#1f1f1f",
+    link: "#88c7ff",
+    "link-underline": "rgba(136, 199, 255, 0.4)",
+    success: "#78df55",
+    error: "#ff5151",
+    warning: "#f2b702",
+
+    // Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
+    "code-text": "#e4e4e4",
+    "code-background": "#212121",
+    "code-comment": "#929292",
+    "code-keyword": "#3b9dd2",
+    "code-attribute": "#78df55",
+    "code-namespace": "#f95757",
+    "code-literal": "#d588fb",
+    "code-punctuation": "#cccccc",
+    "code-variable": "#fd992a",
+    "code-addition": "#78df55",
+    "code-deletion": "#ff5151",
+  },
+};
+
+// converts each variable in a given theme object to CSS syntax and returns all of them as one long string
+export const toCSS = (theme: Record<string, string>) =>
+  Object.entries(theme)
+    .map(([name, color]) => `--${name}:${color};`)
+    .join("");
+
+export default themes;
--- a/next.config.js
+++ b/next.config.js
@ -28,6 +28,10 @@ module.exports = (phase, { defaultConfig }) => {
    images: {
      deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    },
+    experimental: {
+      // use critters to automatically inline critical css:
+      optimizeCss: true,
+    },
    webpack: (config) => {
      config.module.rules.push({
        test: /\.svg$/,
--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
    "@sentry/node": "^6.17.5",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
+    "critters": "^0.0.16",
    "date-fns": "^2.28.0",
    "escape-goat": "^4.0.0",
    "fathom-client": "^3.4.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -24,7 +24,6 @@ import "@fontsource/roboto-mono/variable-italic.css";
 // global styles
 import "modern-normalize/modern-normalize.css";
 import "../styles/settings.css";
-import "../styles/colors.css";
 import "../styles/typography.css";
 import "../styles/index.css";

--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -14,7 +14,7 @@ class MyDocument extends Document {
    return (
      <Html lang={config.siteLocale?.replace("_", "-")}>
        <Head />
-        <body className={classNames("page", "loading")}>
+        <body className={classNames("page", "no-fade")}>
          <Main />
          <NextScript />
        </body>
--- a/styles/colors.css
+++ b/styles/colors.css
@ -1,63 +0,0 @@
-:root {
-  --background-inner: #ffffff;
-  --background-outer: #fcfcfc;
-  --background-header: rgba(252, 252, 252, 0.7);
-  --text: #202020;
-  --medium-dark: #515151;
-  --medium: #5e5e5e;
-  --medium-light: #757575;
-  --light: #d2d2d2;
-  --kinda-light: #e3e3e3;
-  --super-light: #f4f4f4;
-  --super-duper-light: #fbfbfb;
-  --link: #0e6dc2;
-  --link-underline: rgba(14, 109, 194, 0.4);
-  --success: #44a248;
-  --error: #ff1b1b;
-  --warning: #f78200;
-
-  /* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
-  --code-text: #313131;
-  --code-background: #fdfdfd;
-  --code-comment: #656e77;
-  --code-keyword: #029cb9;
-  --code-attribute: #70a800;
-  --code-namespace: #f92672;
-  --code-literal: #ae81ff;
-  --code-punctuation: #111111;
-  --code-variable: #d88200;
-  --code-addition: #44a248;
-  --code-deletion: #ff1b1b;
-}
-
-[data-theme="dark"] {
-  --background-inner: #1e1e1e;
-  --background-outer: #252525;
-  --background-header: rgba(37, 37, 37, 0.85);
-  --text: #f1f1f1;
-  --medium-dark: #d7d7d7;
-  --medium: #b1b1b1;
-  --medium-light: #959595;
-  --light: #646464;
-  --kinda-light: #535353;
-  --super-light: #272727;
-  --super-duper-light: #1f1f1f;
-  --link: #88c7ff;
-  --link-underline: rgba(136, 199, 255, 0.4);
-  --success: #78df55;
-  --error: #ff5151;
-  --warning: #f2b702;
-
-  /* Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
-  --code-text: #e4e4e4;
-  --code-background: #212121;
-  --code-comment: #929292;
-  --code-keyword: #3b9dd2;
-  --code-attribute: #78df55;
-  --code-namespace: #f95757;
-  --code-literal: #d588fb;
-  --code-punctuation: #cccccc;
-  --code-variable: #fd992a;
-  --code-addition: #78df55;
-  --code-deletion: #ff5151;
-}
--- a/yarn.lock
+++ b/yarn.lock
@ -2328,6 +2328,18 @@ cosmiconfig@^7.0.1:
    path-type "^4.0.0"
    yaml "^1.10.0"

+critters@^0.0.16:
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.16.tgz#ffa2c5561a65b43c53b940036237ce72dcebfe93"
+  integrity sha512-JwjgmO6i3y6RWtLYmXwO5jMd+maZt8Tnfu7VVISmEWyQqfLpB8soBswf8/2bu6SBXxtKA68Al3c+qIG1ApT68A==
+  dependencies:
+    chalk "^4.1.0"
+    css-select "^4.2.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    postcss "^8.3.7"
+    pretty-bytes "^5.3.0"
+
 cross-env@^7.0.3:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@ -2381,7 +2393,7 @@ css-prefers-color-scheme@^6.0.3:
  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349"
  integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==

-css-select@^4.1.3:
+css-select@^4.1.3, css-select@^4.2.0:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
@ -5179,7 +5191,14 @@ parse-srcset@^1.0.2:
  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
  integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=

-parse5@^6.0.0:
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
+parse5@^6.0.0, parse5@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@ -5521,7 +5540,7 @@ postcss@8.4.5:
    picocolors "^1.0.0"
    source-map-js "^1.0.1"

-postcss@^8.3.11, postcss@^8.4.5, postcss@^8.4.6:
+postcss@^8.3.11, postcss@^8.3.7, postcss@^8.4.5, postcss@^8.4.6:
  version "8.4.6"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@ -5547,6 +5566,11 @@ prettier@^2.5.1:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==

+pretty-bytes@^5.3.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
 prismjs@~1.26.0:
  version "1.26.0"
  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"