scrabble-solver 2.16.7 → 2.18.0

package/packages/scrabble-solver/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -1,6 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Dictionary, DictionaryInput, Modal } from '@/components';
+import { Dictionary } from '@/components/Dictionary';
+import { DictionaryInput } from '@/components/DictionaryInput';
+import { Modal } from '@/components/Modal';
 import { useTranslate } from '@/state';
 
 import styles from './DictionaryModal.module.scss';

package/packages/scrabble-solver/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,6 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Arrows, Backspace, Ctrl, Del, Enter, Key, Modal, Space } from '@/components';
+import { Key } from '@/components/Key';
+import { Arrows, Backspace, Ctrl, Del, Enter, Space } from '@/components/Keys';
+import { Modal } from '@/components/Modal';
 import { selectConfig, useTranslate, useTypedSelector } from '@/state';
 
 import { Mapping } from './components';

package/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly description: string;
+  readonly group: string;
+  readonly keys: string;
+  readonly mapping: string;
+  readonly plus: string;
+  readonly slash: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss

@@ -1,5 +1,10 @@
 @use 'styles/mixins' as *;
 
+.modal {
+  // on mobile, every modal opened from the menu must cover it
+  z-index: calc(var(--z-index--modal) - 1);
+}
+
 .button {
   width: 100%;
   text-transform: none;

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly flag: string;
+  readonly modal: string;
+  readonly settings: string;
+  readonly settingsLabel: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.tsx

@@ -1,8 +1,13 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Button, Modal } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { BookHalf, CardChecklist, Cog, Github, Sack } from '@/icons';
+import { Button } from '@/components/Button';
+import { Modal } from '@/components/Modal';
+import { LOCALE_ICONS } from '@/i18n/localeIcons';
+import BookHalf from '@/icons/BookHalf.svg';
+import CardChecklist from '@/icons/CardChecklist.svg';
+import Cog from '@/icons/Cog.svg';
+import Github from '@/icons/Github.svg';
+import Sack from '@/icons/Sack.svg';
 import { GITHUB_PROJECT_URL } from '@/parameters';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
@@ -29,10 +34,16 @@ const MenuModalBase: FunctionComponent<Props> = ({
 }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const { Icon } = LOCALE_FEATURES[locale];
+  const Icon = LOCALE_ICONS[locale];
 
   return (
-    <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
+    <Modal
+      className={className}
+      isOpen={isOpen}
+      modalClassName={styles.modal}
+      title={translate('menu')}
+      onClose={onClose}
+    >
       <Button
         aria-label={translate('remaining-tiles')}
         className={styles.button}

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -6,9 +6,12 @@
 }
 
 .content {
+  --tile-size: 50px;
+
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing--l);
+  font-size: calc(var(--tile-size) * 0.6);
 }
 
 .badge {
@@ -18,5 +21,5 @@
 .character {
   display: flex;
   flex: 0 1;
-  max-width: 50px;
+  max-width: var(--tile-size);
 }

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly badge: string;
+  readonly character: string;
+  readonly content: string;
+  readonly title: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,9 +1,8 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Badge, Modal } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { getTileSizes } from '@/lib';
-import { REMAINING_TILES_TILE_SIZE } from '@/parameters';
+import { Badge } from '@/components/Badge';
+import { Modal } from '@/components/Modal';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import { Character } from './components';
@@ -20,7 +19,6 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
-  const { tileFontSize } = getTileSizes(REMAINING_TILES_TILE_SIZE);
   const { direction } = LOCALE_FEATURES[locale];
 
   return (
@@ -42,7 +40,7 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
               </span>
             }
           >
-            <div className={styles.content} style={{ fontSize: tileFontSize }}>
+            <div className={styles.content}>
               {tiles.map((tile) => {
                 return (
                   <div className={styles.character} key={tile.character}>

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -29,6 +29,7 @@
 }
 
 .remaining {
+  width: var(--tile-size);
   height: 6px;
   margin-top: var(--spacing--m);
   box-shadow: var(--box-shadow--raised);

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly character: string;
+  readonly count: string;
+  readonly finished: string;
+  readonly overused: string;
+  readonly remaining: string;
+  readonly tile: string;
+  readonly unused: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import { type FunctionComponent, useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Progress, Tile } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
-import { REMAINING_TILES_TILE_SIZE } from '@/parameters';
+import { Progress } from '@/components/Progress';
+import { Tile } from '@/components/Tile';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import {
   hoveredTileSlice,
   selectCharacterPoints,
@@ -75,19 +75,12 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
         highlighted={isHovered}
         isBlank={character === BLANK}
         isValid={remainingCount >= 0}
+        locale={locale}
         points={points}
         raised
-        size={REMAINING_TILES_TILE_SIZE}
       />
 
-      <Progress
-        className={styles.remaining}
-        max={count}
-        style={{
-          width: REMAINING_TILES_TILE_SIZE,
-        }}
-        value={remainingCount}
-      />
+      <Progress className={styles.remaining} max={count} value={remainingCount} />
 
       <div className={styles.count}>
         {current.toLocaleString(locale)} / {total.toLocaleString(locale)}

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly dictionary: string;
+  readonly results: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,9 +2,13 @@ import { type Result } from '@scrabble-solver/types';
 import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { Button, Dictionary, Modal, Results } from '@/components';
-import { Check, EyeFill } from '@/icons';
+import { Button } from '@/components/Button';
+import { Dictionary } from '@/components/Dictionary';
+import { Modal } from '@/components/Modal';
+import { Results } from '@/components/Results';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import Check from '@/icons/Check.svg';
+import EyeFill from '@/icons/EyeFill.svg';
 import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ResultsModal.module.scss';
@@ -18,7 +22,7 @@ interface Props {
 const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const { showResultsInModal } = useAppLayout();
+  const showResultsInModal = useMediaQuery('<l');
   const results = useTypedSelector(selectProcessedResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;

package/packages/scrabble-solver/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,7 +1,7 @@
 import { type FunctionComponent, memo } from 'react';
 
-import { Modal } from '@/components';
-import { useIsTouchDevice } from '@/hooks';
+import { Modal } from '@/components/Modal';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
 import { useTranslate } from '@/state';
 
 import {

package/packages/scrabble-solver/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectAutoGroupTiles, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './AutoGroupTilesSetting.module.scss';

package/packages/scrabble-solver/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -2,7 +2,7 @@ import { isGame } from '@scrabble-solver/types';
 import { type ChangeEvent, type FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectGame, selectLocale, settingsSlice, useTypedSelector } from '@/state';
 
 import styles from './ConfigSetting.module.scss';

package/packages/scrabble-solver/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectHighlightUnreachableCells, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './HighlightUnreachableCellsSetting.module.scss';

package/packages/scrabble-solver/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectInputMode, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './InputModeSetting.module.scss';

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly flag: string;
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
+import { Radio } from '@/components/Radio';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { LOCALE_ICONS } from '@/i18n/localeIcons';
 import { selectLocale, settingsSlice, useTypedSelector } from '@/state';
 
 import styles from './LocaleSetting.module.scss';
@@ -27,25 +28,27 @@ export const LocaleSetting: FunctionComponent<Props> = ({ className, disabled })
 
   return (
     <div className={className}>
-      {OPTIONS.map(({ Icon, ...option }) => (
-        <Radio
-          checked={locale === option.locale}
-          className={classNames(styles.option, className, {
-            [styles.checked]: locale === option.locale,
-          })}
-          disabled={disabled}
-          key={option.locale}
-          name="locale"
-          value={option.locale}
-          onChange={handleChange}
-        >
-          <span className={styles.label}>
-            <Icon aria-hidden="true" className={styles.flag} role="img" />
-
-            <span>{option.label}</span>
-          </span>
-        </Radio>
-      ))}
+      {OPTIONS.map((option) => {
+        const Icon = LOCALE_ICONS[option.locale];
+
+        return (
+          <Radio
+            checked={locale === option.locale}
+            className={classNames(styles.option, className)}
+            disabled={disabled}
+            key={option.locale}
+            name="locale"
+            value={option.locale}
+            onChange={handleChange}
+          >
+            <span className={styles.label}>
+              <Icon aria-hidden="true" className={styles.flag} role="img" />
+
+              <span>{option.label}</span>
+            </span>
+          </Radio>
+        );
+      })}
     </div>
   );
 };

package/packages/scrabble-solver/src/modals/SettingsModal/components/RemoveCellFiltersSetting/RemoveCellFiltersSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/RemoveCellFiltersSetting/RemoveCellFiltersSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectRemoveCellFilters, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import { parseValue } from './lib';

package/packages/scrabble-solver/src/modals/SettingsModal/components/ShowCoordinatesSetting/ShowCoordinatesSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/SettingsModal/components/ShowCoordinatesSetting/ShowCoordinatesSetting.tsx

@@ -2,7 +2,7 @@ import { type ShowCoordinates } from '@scrabble-solver/types';
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectShowCoordinates, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ShowCoordinatesSetting.module.scss';
@@ -18,10 +18,6 @@ export const ShowCoordinatesSetting: FunctionComponent<Props> = ({ className, di
   const value = useTypedSelector(selectShowCoordinates);
 
   const options = [
-    {
-      label: translate('settings.showCoordinates.hidden'),
-      value: 'hidden',
-    },
     {
       label: translate('settings.showCoordinates.original'),
       value: 'original',

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly badge: string;
+  readonly icon: string;
+  readonly invalid: string;
+  readonly title: string;
+  readonly valid: string;
+  readonly word: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { Badge, Modal } from '@/components';
-import { Check, Cross } from '@/icons';
+import { Badge } from '@/components/Badge';
+import { Modal } from '@/components/Modal';
+import Check from '@/icons/Check.svg';
+import Cross from '@/icons/Cross.svg';
 import { selectInvalidWords, selectLocale, selectValidWords, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './WordsModal.module.scss';

package/packages/scrabble-solver/src/modals/preload.ts

@@ -0,0 +1,24 @@
+import { waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
+
+let isScheduled = false;
+
+export function schedulePreloadModals(): void {
+  if (isScheduled || typeof window === 'undefined') {
+    return;
+  }
+
+  isScheduled = true;
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  waitForIdleOrFirstIntent().then(() =>
+    Promise.all([
+      import('./DictionaryModal'),
+      import('./KeyMapModal'),
+      import('./MenuModal'),
+      import('./RemainingTilesModal'),
+      import('./ResultsModal'),
+      import('./SettingsModal'),
+      import('./WordsModal'),
+    ]),
+  );
+}

package/packages/scrabble-solver/src/pages/_app.tsx

@@ -4,8 +4,7 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
-import { AppLayoutProvider } from '@/app-layout';
-import { SeoMessage } from '@/components';
+import { SeoMessage } from '@/components/SeoMessage';
 import { store } from '@/state';
 
 import '../styles/global.scss';
@@ -77,13 +76,11 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <AppLayoutProvider>
-        <SeoMessage />
+      <SeoMessage />
 
-        <FloatingDelayGroup delay={0}>
-          <Component {...pageProps} />
-        </FloatingDelayGroup>
-      </AppLayoutProvider>
+      <FloatingDelayGroup delay={0}>
+        <Component {...pageProps} />
+      </FloatingDelayGroup>
     </Provider>
   </>
 );

package/packages/scrabble-solver/src/pages/_document.tsx

@@ -1,11 +1,75 @@
+import { games } from '@scrabble-solver/configs';
+import { Game, Locale } from '@scrabble-solver/types';
+import fs from 'fs';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+import path from 'path';
 import { type ReactElement } from 'react';
 
-class MyDocument extends Document {
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { CONFIG_PENDING_CLASS } from '@/parameters';
+
+const GAME_DIMENSIONS = Object.fromEntries(
+  Object.values(games).map(({ boardHeight, boardWidth, game, rackSize }) => [
+    game,
+    [boardWidth, boardHeight, rackSize],
+  ]),
+);
+
+const LOCALE_DIRECTIONS = Object.fromEntries(
+  Object.entries(LOCALE_FEATURES).map(([locale, { direction }]) => [locale, direction]),
+);
+
+/**
+ * The SSR HTML is always an English Scrabble board. This runs before first paint
+ * so a returning user's persisted board dimensions and text direction apply without a flash.
+ * The board itself cannot be reshaped pre-hydration, so it is hidden (CONFIG_PENDING_CLASS,
+ * see global.scss) until hydration applies the persisted config.
+ */
+const preHydrationScript = `(function () {
+  try {
+    var settings = JSON.parse(localStorage.getItem('scrabble-solver.settings'));
+
+    if (!settings) {
+      return;
+    }
+
+    var dimensions = ${JSON.stringify(GAME_DIMENSIONS)}[settings.game];
+    var direction = ${JSON.stringify(LOCALE_DIRECTIONS)}[settings.locale];
+    var root = document.documentElement;
+
+    if (dimensions) {
+      root.style.setProperty('--board-cols', dimensions[0]);
+      root.style.setProperty('--board-rows', dimensions[1]);
+      root.style.setProperty('--rack-size', dimensions[2]);
+
+      if (settings.game !== ${JSON.stringify(Game.Scrabble)}) {
+        root.classList.add(${JSON.stringify(CONFIG_PENDING_CLASS)});
+      }
+    }
+
+    if (direction) {
+      root.dir = direction;
+      root.lang = settings.locale;
+    }
+  } catch (error) {}
+})()`;
+
+export default class MyDocument extends Document {
   render(): ReactElement {
     return (
-      <Html lang="en">
-        <Head>
+      <Html
+        /**
+         * dir must be present pre-hydration
+         */
+        dir="ltr"
+        /**
+         * lang must match the default locale
+         */
+        lang={Locale.EN_US}
+      >
+        <InlineCssHead>
+          {/* eslint-disable-next-line react/no-danger */}
+          <script dangerouslySetInnerHTML={{ __html: preHydrationScript }} />
           <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icons/apple-touch-icon-57x57.png" />
           <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114.png" />
           <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72.png" />
@@ -27,7 +91,7 @@ class MyDocument extends Document {
           <meta name="msapplication-square150x150logo" content="icons/mstile-150x150.png" />
           <meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
           <meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
-        </Head>
+        </InlineCssHead>
 
         <body>
           <Main />
@@ -38,4 +102,26 @@ class MyDocument extends Document {
   }
 }
 
-export default MyDocument;
+/**
+ * Removes render-blocking CSS requests from the critical path.
+ */
+class InlineCssHead extends Head {
+  getCssLinks(files: Parameters<Head['getCssLinks']>[0]): ReactElement[] | null {
+    try {
+      const cssFiles = files.allFiles.filter((file) => file.endsWith('.css'));
+
+      return cssFiles.map((file) => (
+        <style
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
+          }}
+          data-href={`/_next/${file}`}
+          key={file}
+        />
+      ));
+    } catch {
+      return super.getCssLinks(files);
+    }
+  }
+}