fix(runtime): dedupe string-mode SSR stylesheets via shared hasStylesheetLink (v2) (#8689)

Author: deepcoldy

.changeset/ssr-string-css-dedupe-prefetch.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/runtime': patch
+---
+
+fix(runtime): string-mode SSR no longer drops a route's stylesheet when the same CSS is referenced by a non-stylesheet `<link>` (e.g. `<link rel="prefetch">`)
+
+`LoadableCollector.emitStyleAssets` (string SSR) deduped injected route stylesheets against every `<link href>` in the template, so a `<link rel="prefetch">` for the same css URL (e.g. from `performance.prefetch`) made the real `<link rel="stylesheet">` be skipped and the route rendered unstyled. It now reuses the shared `hasStylesheetLink` helper (also used by streaming SSR), which only matches existing `<link rel="stylesheet">` tags.

packages/runtime/plugin-runtime/src/core/server/stream/beforeTemplate.ts

@@ -6,7 +6,7 @@ import { CHUNK_CSS_PLACEHOLDER } from '../constants';
 import { createReplaceHelemt } from '../helmet';
 import type { HandleRequestConfig } from '../requestHandler';
 import { type BuildHtmlCb, buildHtml } from '../shared';
-import { checkIsNode, safeReplace } from '../utils';
+import { checkIsNode, hasStylesheetLink, safeReplace } from '../utils';
 
 const readAsset = async (chunk: string) => {
   // working node env
@@ -36,42 +36,6 @@ const checkIsInline = (
   }
 };
 
-export const hasStylesheetLink = (template: string, href: string) => {
-  const linkTags = template.match(/<link\b[^>]*>/gi) ?? [];
-  return linkTags.some(linkTag => {
-    const attributes = getLinkAttributes(linkTag);
-    const linkHref = attributes.get('href');
-    const rel = attributes.get('rel');
-
-    return (
-      linkHref === href &&
-      rel
-        ?.split(/\s+/)
-        .some(relToken => relToken.toLowerCase() === 'stylesheet')
-    );
-  });
-};
-
-const getLinkAttributes = (linkTag: string) => {
-  const attributes = new Map<string, string>();
-  const attributeRegExp =
-    /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
-  let match: RegExpExecArray | null;
-
-  while ((match = attributeRegExp.exec(linkTag))) {
-    const [, name, doubleQuotedValue, singleQuotedValue, unquotedValue] = match;
-    if (name.toLowerCase() === 'link') {
-      continue;
-    }
-    attributes.set(
-      name.toLowerCase(),
-      doubleQuotedValue ?? singleQuotedValue ?? unquotedValue ?? '',
-    );
-  }
-
-  return attributes;
-};
-
 export interface BuildShellBeforeTemplateOptions {
   runtimeContext: RuntimeContext;
   entryName: string;

packages/runtime/plugin-runtime/src/core/server/string/loadable.ts

@@ -1,6 +1,6 @@
 import { type Chunk, ChunkExtractor } from '@loadable/server';
 import type { ReactElement } from 'react';
-import { attributesToString, checkIsNode } from '../utils';
+import { attributesToString, checkIsNode, hasStylesheetLink } from '../utils';
 import type { ChunkSet, Collector } from './types';
 
 declare module '@loadable/server' {
@@ -209,21 +209,14 @@ export class LoadableCollector implements Collector {
 
     const atrributes = attributesToString(this.generateAttributes());
 
-    const linkRegExp = /<link .*?href="([^"]+)".*?>/g;
-
-    const matchs = template.matchAll(linkRegExp);
-
-    const existedLinks: string[] = [];
-
-    for (const match of matchs) {
-      existedLinks.push(match[1]);
-    }
-
     const css = await Promise.all(
       chunks
         .filter(chunk => {
+          // Only an existing `<link rel="stylesheet">` should dedupe the route
+          // stylesheet we are about to inject. A `<link rel="prefetch">` for the
+          // same css URL (e.g. from `performance.prefetch`) must not block it.
           return (
-            !existedLinks.includes(chunk.url) &&
+            !hasStylesheetLink(template, chunk.url) &&
             !this.existsAssets?.includes(chunk.path)
           );
         })

packages/runtime/plugin-runtime/src/core/server/utils.ts

@@ -79,3 +79,45 @@ export function getSSRMode(ssrConfig?: SSRConfig): 'string' | 'stream' | false {
 
   return ssrConfig?.mode === 'stream' ? 'stream' : 'string';
 }
+
+const getLinkAttributes = (linkTag: string) => {
+  const attributes = new Map<string, string>();
+  const attributeRegExp =
+    /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = attributeRegExp.exec(linkTag))) {
+    const [, name, doubleQuotedValue, singleQuotedValue, unquotedValue] = match;
+    if (name.toLowerCase() === 'link') {
+      continue;
+    }
+    attributes.set(
+      name.toLowerCase(),
+      doubleQuotedValue ?? singleQuotedValue ?? unquotedValue ?? '',
+    );
+  }
+
+  return attributes;
+};
+
+/**
+ * Whether the template already contains a `<link rel="stylesheet">` for `href`.
+ * Other link rels (e.g. `<link rel="prefetch">` emitted by `performance.prefetch`,
+ * or `<link rel="preload" as="style">`) may reference the same css URL but do not
+ * apply styles, so they must not block stylesheet injection during SSR.
+ */
+export const hasStylesheetLink = (template: string, href: string) => {
+  const linkTags = template.match(/<link\b[^>]*>/gi) ?? [];
+  return linkTags.some(linkTag => {
+    const attributes = getLinkAttributes(linkTag);
+    const linkHref = attributes.get('href');
+    const rel = attributes.get('rel');
+
+    return (
+      linkHref === href &&
+      rel
+        ?.split(/\s+/)
+        .some(relToken => relToken.toLowerCase() === 'stylesheet')
+    );
+  });
+};

packages/runtime/plugin-runtime/tests/ssr/beforeTemplate.test.ts

@@ -1,4 +1,4 @@
-import { hasStylesheetLink } from '../../src/core/server/stream/beforeTemplate';
+import { hasStylesheetLink } from '../../src/core/server/utils';
 
 describe('hasStylesheetLink', () => {
   const href = '/static/css/async/about/page.css';