gatsby-matrix-theme 53.23.0 → 53.24.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [53.24.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.23.0...v53.24.0) (2026-07-02)
+
+
+* Merge branch 'critical-css-ssr' into 'master' ([5115877](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/511587745fa68b230b04f579251690bb8434e2fe))
+
+
+### Features
+
+* inject render-blocking module css on ssr routes ([aa36c7c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/aa36c7c57be4f6eba6981cb1c1f55462eacbf871))
+
 # [53.23.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.22.4...v53.23.0) (2026-06-29)
 
 

package/gatsby-node.js

@@ -4,7 +4,10 @@
  * Critical-CSS split (default OFF; enable per-site via options.criticalCss.enabled):
  *   1. onCreateWebpackConfig — split CSS so only initial-chunk CSS stays inlined; lazy-module CSS
  *      goes to separate cacheable chunks.
- *   2. onPostBuild — make each page's own chunks render-blocking (no async => no FOUC/CLS).
+ *   2. onPostBuild — make each STATIC page's own chunks render-blocking (no async => no FOUC/CLS).
+ *
+ * SSR routes (no static HTML; listed in options.criticalCss.skipRoutes) are handled by the SSR
+ * counterpart in ./gatsby-ssr.js, which injects the full module CSS render-blocking at request time.
  *
  * All hooks are guarded so a failure degrades gracefully and never breaks a consumer build.
  */

package/gatsby-ssr.js

@@ -0,0 +1,92 @@
+/**
+ * gatsby-matrix-theme — SSR-side half of the critical-CSS split (default OFF; enabled per-site via
+ * options.criticalCss.enabled).
+ *
+ * The split (see gatsby-node.js) moves lazy-module CSS into async chunks. On STATIC pages,
+ * `onPostBuild` re-links the chunks each page needs render-blocking by rewriting the emitted HTML.
+ * SSR routes (app-ssr.js + getServerData, e.g. the search page `/s`) have no static HTML on disk,
+ * so `onPostBuild` cannot touch them — it explicitly `skipRoutes` them — and their module CSS would
+ * otherwise load async at hydration => FOUC/CLS.
+ *
+ * This hook is the SSR counterpart: for exactly the `skipRoutes` (the dynamic/SSR routes) it injects
+ * every module CSS chunk render-blocking at request time, restoring the pre-split "full CSS at first
+ * paint" behaviour. That is precisely what `skipRoutes` documents — "route prefixes to leave with
+ * default (full) inlining" — so one config list drives both halves of the feature:
+ *   - onPostBuild  -> static pages: detect + render-block per page
+ *   - onRenderBody -> skipRoutes (SSR) pages: render-block the full module set
+ *
+ * Matches on the first path segment, so `/s` and `/preview` are covered without touching static
+ * pages. (SSR templates that live at arbitrary slugs — settings.app_ssr: event/tournament/… — are
+ * NOT segment-addressable; covering those needs a build-emitted SSR-path manifest, a later change.)
+ *
+ * Fully guarded — a failure degrades to split-only (no worse than before) and never breaks SSR.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const React = require('react');
+const { resolveConfig } = require('./critical-css/config');
+
+// module chunks = every emitted stylesheet except the base (`styles.*`) and route shells
+// (`component---*`), which Gatsby already inlines render-blocking for the matched route.
+const isModuleChunk = (f) =>
+  f.endsWith('.css') && !/^styles\./.test(f) && !/^component---/.test(f);
+
+let cachedLinks; // built once per server process (public/ is immutable for a given build)
+
+// Resolve the consumer site's build output dir at request time (cwd is the site root under
+// `gatsby serve` / gatsby-plugin-fastify). chunk-map.json marks a real Gatsby public/ dir.
+function resolvePublicDir() {
+  const candidates = [path.join(process.cwd(), 'public'), path.join(__dirname, 'public')];
+  for (const dir of candidates) {
+    try {
+      if (fs.existsSync(path.join(dir, 'chunk-map.json'))) return dir;
+    } catch (e) {
+      /* try next */
+    }
+  }
+  return null;
+}
+
+function getModuleCssLinks() {
+  // only cache a non-empty success; retry on failure (dir may not be resolvable on an early call)
+  if (cachedLinks && cachedLinks.length) return cachedLinks;
+  try {
+    const dir = resolvePublicDir();
+    if (!dir) return [];
+    const files = fs.readdirSync(dir).filter(isModuleChunk);
+    cachedLinks = files.map((f) =>
+      React.createElement('link', {
+        key: f,
+        rel: 'stylesheet',
+        href: `/${f}`,
+        'data-crit-ssr': f,
+      })
+    );
+    return cachedLinks;
+  } catch (e) {
+    return [];
+  }
+}
+
+function firstSegment(pathname) {
+  return (
+    String(pathname || '')
+      .split('?')[0]
+      .split('/')
+      .filter(Boolean)[0] || ''
+  );
+}
+
+exports.onRenderBody = ({ setHeadComponents, pathname }, pluginOptions) => {
+  try {
+    const cfg = resolveConfig(pluginOptions);
+    if (!cfg.enabled) return;
+    if (!cfg.skipRoutes.includes(firstSegment(pathname))) return;
+
+    const links = getModuleCssLinks();
+    if (links.length) setHeadComponents(links);
+  } catch (e) {
+    /* never break SSR over a CSS optimisation */
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.23.0",
+  "version": "53.24.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/storybook/public/project.json

@@ -1 +1 @@
-{"generatedAt":1782741537087,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"Gatsby","packageName":"gatsby","version":"5.13.6"},"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"}}}
+{"generatedAt":1782983649503,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"Gatsby","packageName":"gatsby","version":"5.13.6"},"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"}}}