From 295301aa9ebac51e7f4789ff5a6505f86135bbe6 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 7 Jul 2022 16:19:28 -0400 Subject: [PATCH] clean up stitches theme config --- components/Layout/Layout.tsx | 10 ++++++---- contexts/ThemeContext.tsx | 2 +- lib/config/themes.ts | 19 ------------------- lib/styles/stitches.config.ts | 13 +++++++++++-- lib/styles/{helpers => utils}/normalize.ts | 0 pages/_app.tsx | 3 +-- pages/_document.tsx | 14 ++++++++++---- 7 files changed, 29 insertions(+), 32 deletions(-) delete mode 100644 lib/config/themes.ts rename lib/styles/{helpers => utils}/normalize.ts (100%) diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 453b5dc8..7b286099 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -3,8 +3,7 @@ import Header from "../Header"; import Footer from "../Footer"; import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent"; import { useTheme } from "../../hooks/use-theme"; -import { styled, theme } from "../../lib/styles/stitches.config"; -import { themeColors } from "../../lib/config/themes"; +import { styled, theme, darkTheme } from "../../lib/styles/stitches.config"; import type { ComponentProps } from "react"; const Flex = styled("div", { @@ -45,8 +44,11 @@ const Layout = ({ container = true, children, ...rest }: LayoutProps) => { return ( <> - {/* dynamically set browser theme color to match the background color; default to light for SSR */} - + diff --git a/contexts/ThemeContext.tsx b/contexts/ThemeContext.tsx index 4bbdc6da..69d54b0a 100644 --- a/contexts/ThemeContext.tsx +++ b/contexts/ThemeContext.tsx @@ -1,6 +1,6 @@ import { createContext, useCallback, useEffect, useState } from "react"; import { useLocalStorage, useMedia } from "react-use"; -import { themeStorageKey } from "../lib/config/themes"; +import { themeStorageKey } from "../lib/styles/stitches.config"; import type { Context, PropsWithChildren } from "react"; export const ThemeContext: Context<{ diff --git a/lib/config/themes.ts b/lib/config/themes.ts deleted file mode 100644 index 6c814b2f..00000000 --- a/lib/config/themes.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { theme, darkTheme } from "../styles/stitches.config"; - -// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there -export const themeClassNames = { - light: theme.className, - dark: darkTheme.className, -}; - -// colors used for `` (see components/Layout/Layout.tsx) -export const themeColors = { - light: theme.colors.backgroundOuter?.value, - dark: darkTheme.colors.backgroundOuter?.value, -}; - -// default/fallback theme -export const themeDefault = "light"; - -// local storage key -export const themeStorageKey = "theme"; diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index d2d9631b..ddf97ebc 100644 --- a/lib/styles/stitches.config.ts +++ b/lib/styles/stitches.config.ts @@ -2,12 +2,12 @@ import { createStitches } from "@stitches/react"; // misc. helpers import hexToRgba from "hex-to-rgba"; -import normalizeStyles from "./helpers/normalize"; +import normalizeStyles from "./utils/normalize"; // web fonts import { Inter, RobotoMono } from "./fonts"; -export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config } = createStitches({ +export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config, reset } = createStitches({ theme: { fonts: { sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, @@ -165,5 +165,14 @@ export const globalStyles = globalCss( } ); +// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there +export const themeClassNames = { + light: theme.className, + dark: darkTheme.className, +}; + +// local storage key +export const themeStorageKey = "theme"; + // re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts]; diff --git a/lib/styles/helpers/normalize.ts b/lib/styles/utils/normalize.ts similarity index 100% rename from lib/styles/helpers/normalize.ts rename to lib/styles/utils/normalize.ts diff --git a/pages/_app.tsx b/pages/_app.tsx index b8a692cc..034a62d3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,8 +6,7 @@ import { ThemeProvider } from "../contexts/ThemeContext"; import Layout from "../components/Layout"; import * as config from "../lib/config"; import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo"; -import { themeClassNames } from "../lib/config/themes"; -import { globalStyles } from "../lib/styles/stitches.config"; +import { globalStyles, themeClassNames } from "../lib/styles/stitches.config"; import type { ReactElement, ReactNode } from "react"; import type { NextPage } from "next"; import type { AppProps as NextAppProps } from "next/app"; diff --git a/pages/_document.tsx b/pages/_document.tsx index d0e75ee4..bbb7e8a9 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,19 @@ import { Html, Head, Main, NextScript } from "next/document"; import ThemeScript from "../components/ThemeScript/ThemeScript"; -import { getCssText, preloadFonts } from "../lib/styles/stitches.config"; -import { themeClassNames, themeDefault, themeStorageKey } from "../lib/config/themes"; +import { getCssText, reset, themeClassNames, themeStorageKey, preloadFonts } from "../lib/styles/stitches.config"; import * as config from "../lib/config"; +// ensure the server can handle multiple requests without accumulating previous visitors' stylesheets +const getCssAndReset = () => { + const css = getCssText(); + reset(); + return css; +}; + // https://nextjs.org/docs/advanced-features/custom-document const Document = () => { return ( - + {/* inject a small script to set/restore the user's theme ASAP */} @@ -25,7 +31,7 @@ const Document = () => { ))} {/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */} -