@modern-js/runtime 2.71.0 → 2.71.1

package/dist/cjs/core/server/stream/beforeTemplate.js

@@ -91,7 +91,7 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
       }
       const cssChunks = matchedRouteManifests ? matchedRouteManifests === null || matchedRouteManifests === void 0 ? void 0 : matchedRouteManifests.reduce((chunks, routeManifest2) => {
         const { referenceCssAssets = [] } = routeManifest2;
-        const _cssChunks = referenceCssAssets.filter((asset) => (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !template.includes(asset));
+        const _cssChunks = referenceCssAssets.filter((asset) => (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !(0, import_utils.hasStylesheetLink)(template, asset));
         return [
           ...chunks,
           ..._cssChunks

package/dist/cjs/core/server/string/loadable.js

@@ -145,15 +145,9 @@ class LoadableCollector {
     const { template, chunkSet, config, entryName } = this.options;
     const { enableInlineStyles } = config;
     const atrributes = (0, import_utils.attributesToString)(this.generateAttributes());
-    const linkRegExp = /<link .*?href="([^"]+)".*?>/g;
-    const matchs = template.matchAll(linkRegExp);
-    const existedLinks = [];
-    for (const match of matchs) {
-      existedLinks.push(match[1]);
-    }
     const css = await Promise.all(chunks.filter((chunk) => {
       var _this_existsAssets;
-      return !existedLinks.includes(chunk.url) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+      return !(0, import_utils.hasStylesheetLink)(template, chunk.url) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
     }).map(async (chunk) => {
       const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
       if ((0, import_utils.checkIsNode)() && checkIsInline(chunk, enableInlineStyles)) {

package/dist/cjs/core/server/utils.js

@@ -22,6 +22,7 @@ __export(utils_exports, {
   checkIsNode: () => checkIsNode,
   getSSRConfigByEntry: () => getSSRConfigByEntry,
   getSSRMode: () => getSSRMode,
+  hasStylesheetLink: () => hasStylesheetLink,
   safeReplace: () => safeReplace,
   serializeErrors: () => serializeErrors
 });
@@ -75,12 +76,37 @@ function getSSRMode(ssrConfig) {
   }
   return (ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.mode) === "stream" ? "stream" : "string";
 }
+const getLinkAttributes = (linkTag) => {
+  const attributes = /* @__PURE__ */ new Map();
+  const attributeRegExp = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let match;
+  while (match = attributeRegExp.exec(linkTag)) {
+    const [, name, doubleQuotedValue, singleQuotedValue, unquotedValue] = match;
+    if (name.toLowerCase() === "link") {
+      continue;
+    }
+    var _ref, _ref1;
+    attributes.set(name.toLowerCase(), (_ref1 = (_ref = doubleQuotedValue !== null && doubleQuotedValue !== void 0 ? doubleQuotedValue : singleQuotedValue) !== null && _ref !== void 0 ? _ref : unquotedValue) !== null && _ref1 !== void 0 ? _ref1 : "");
+  }
+  return attributes;
+};
+const hasStylesheetLink = (template, href) => {
+  var _template_match;
+  const linkTags = (_template_match = template.match(/<link\b[^>]*>/gi)) !== null && _template_match !== void 0 ? _template_match : [];
+  return linkTags.some((linkTag) => {
+    const attributes = getLinkAttributes(linkTag);
+    const linkHref = attributes.get("href");
+    const rel = attributes.get("rel");
+    return linkHref === href && (rel === null || rel === void 0 ? void 0 : rel.split(/\s+/).some((relToken) => relToken.toLowerCase() === "stylesheet"));
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   attributesToString,
   checkIsNode,
   getSSRConfigByEntry,
   getSSRMode,
+  hasStylesheetLink,
   safeReplace,
   serializeErrors
 });

package/dist/esm/core/server/stream/beforeTemplate.js

@@ -6,7 +6,7 @@ import { matchRoutes } from "@modern-js/runtime-utils/router";
 import { CHUNK_CSS_PLACEHOLDER } from "../constants";
 import { createReplaceHelemt } from "../helmet";
 import { buildHtml } from "../shared";
-import { checkIsNode, safeReplace } from "../utils";
+import { checkIsNode, hasStylesheetLink, safeReplace } from "../utils";
 var readAsset = function() {
   var _ref = _async_to_generator(function(chunk) {
     var fs, path, filepath;
@@ -95,7 +95,7 @@ function _buildShellBeforeTemplate() {
                   cssChunks = matchedRouteManifests ? matchedRouteManifests === null || matchedRouteManifests === void 0 ? void 0 : matchedRouteManifests.reduce(function(chunks, routeManifest2) {
                     var _routeManifest_referenceCssAssets = routeManifest2.referenceCssAssets, referenceCssAssets = _routeManifest_referenceCssAssets === void 0 ? [] : _routeManifest_referenceCssAssets;
                     var _cssChunks = referenceCssAssets.filter(function(asset) {
-                      return (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !template.includes(asset);
+                      return (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !hasStylesheetLink(template, asset);
                     });
                     return _to_consumable_array(chunks).concat(_to_consumable_array(_cssChunks));
                   }, []) : [];

package/dist/esm/core/server/string/loadable.js

@@ -6,7 +6,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { ChunkExtractor } from "@loadable/server";
-import { attributesToString, checkIsNode } from "../utils";
+import { attributesToString, checkIsNode, hasStylesheetLink } from "../utils";
 var extname = function(uri) {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
@@ -232,41 +232,18 @@ var LoadableCollector = /* @__PURE__ */ function() {
   _proto.emitStyleAssets = function emitStyleAssets(chunks) {
     var _this = this;
     return _async_to_generator(function() {
-      var _this_options, template, chunkSet, config, entryName, enableInlineStyles, atrributes, linkRegExp, matchs, existedLinks, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, match, css;
+      var _this_options, template, chunkSet, config, entryName, enableInlineStyles, atrributes, css;
       return _ts_generator(this, function(_state) {
         switch (_state.label) {
           case 0:
             _this_options = _this.options, template = _this_options.template, chunkSet = _this_options.chunkSet, config = _this_options.config, entryName = _this_options.entryName;
             enableInlineStyles = config.enableInlineStyles;
             atrributes = attributesToString(_this.generateAttributes());
-            linkRegExp = /<link .*?href="([^"]+)".*?>/g;
-            matchs = template.matchAll(linkRegExp);
-            existedLinks = [];
-            _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-            try {
-              for (_iterator = matchs[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                match = _step.value;
-                existedLinks.push(match[1]);
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
-              try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
-                }
-              } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
-                }
-              }
-            }
             return [
               4,
               Promise.all(chunks.filter(function(chunk) {
                 var _this_existsAssets;
-                return !existedLinks.includes(chunk.url) && !((_this_existsAssets = _this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+                return !hasStylesheetLink(template, chunk.url) && !((_this_existsAssets = _this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
               }).map(function() {
                 var _ref = _async_to_generator(function(chunk) {
                   var link;

package/dist/esm/core/server/utils.js

@@ -70,11 +70,38 @@ function getSSRMode(ssrConfig) {
   }
   return (ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.mode) === "stream" ? "stream" : "string";
 }
+var getLinkAttributes = function(linkTag) {
+  var attributes = /* @__PURE__ */ new Map();
+  var attributeRegExp = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  var match;
+  while (match = attributeRegExp.exec(linkTag)) {
+    var _match = _sliced_to_array(match, 5), name = _match[1], doubleQuotedValue = _match[2], singleQuotedValue = _match[3], unquotedValue = _match[4];
+    if (name.toLowerCase() === "link") {
+      continue;
+    }
+    var _ref, _ref1;
+    attributes.set(name.toLowerCase(), (_ref1 = (_ref = doubleQuotedValue !== null && doubleQuotedValue !== void 0 ? doubleQuotedValue : singleQuotedValue) !== null && _ref !== void 0 ? _ref : unquotedValue) !== null && _ref1 !== void 0 ? _ref1 : "");
+  }
+  return attributes;
+};
+var hasStylesheetLink = function(template, href) {
+  var _template_match;
+  var linkTags = (_template_match = template.match(/<link\b[^>]*>/gi)) !== null && _template_match !== void 0 ? _template_match : [];
+  return linkTags.some(function(linkTag) {
+    var attributes = getLinkAttributes(linkTag);
+    var linkHref = attributes.get("href");
+    var rel = attributes.get("rel");
+    return linkHref === href && (rel === null || rel === void 0 ? void 0 : rel.split(/\s+/).some(function(relToken) {
+      return relToken.toLowerCase() === "stylesheet";
+    }));
+  });
+};
 export {
   attributesToString,
   checkIsNode,
   getSSRConfigByEntry,
   getSSRMode,
+  hasStylesheetLink,
   safeReplace,
   serializeErrors
 };

package/dist/esm-node/core/server/stream/beforeTemplate.js

@@ -2,7 +2,7 @@ import { matchRoutes } from "@modern-js/runtime-utils/router";
 import { CHUNK_CSS_PLACEHOLDER } from "../constants";
 import { createReplaceHelemt } from "../helmet";
 import { buildHtml } from "../shared";
-import { checkIsNode, safeReplace } from "../utils";
+import { checkIsNode, hasStylesheetLink, safeReplace } from "../utils";
 const readAsset = async (chunk) => {
   const fs = await import("fs/promises");
   const path = await import("path");
@@ -58,7 +58,7 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
       }
       const cssChunks = matchedRouteManifests ? matchedRouteManifests === null || matchedRouteManifests === void 0 ? void 0 : matchedRouteManifests.reduce((chunks, routeManifest2) => {
         const { referenceCssAssets = [] } = routeManifest2;
-        const _cssChunks = referenceCssAssets.filter((asset) => (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !template.includes(asset));
+        const _cssChunks = referenceCssAssets.filter((asset) => (asset === null || asset === void 0 ? void 0 : asset.endsWith(".css")) && !hasStylesheetLink(template, asset));
         return [
           ...chunks,
           ..._cssChunks

package/dist/esm-node/core/server/string/loadable.js

@@ -1,5 +1,5 @@
 import { ChunkExtractor } from "@loadable/server";
-import { attributesToString, checkIsNode } from "../utils";
+import { attributesToString, checkIsNode, hasStylesheetLink } from "../utils";
 const extname = (uri) => {
   if (typeof uri !== "string" || !uri.includes(".")) {
     return "";
@@ -112,15 +112,9 @@ class LoadableCollector {
     const { template, chunkSet, config, entryName } = this.options;
     const { enableInlineStyles } = config;
     const atrributes = attributesToString(this.generateAttributes());
-    const linkRegExp = /<link .*?href="([^"]+)".*?>/g;
-    const matchs = template.matchAll(linkRegExp);
-    const existedLinks = [];
-    for (const match of matchs) {
-      existedLinks.push(match[1]);
-    }
     const css = await Promise.all(chunks.filter((chunk) => {
       var _this_existsAssets;
-      return !existedLinks.includes(chunk.url) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
+      return !hasStylesheetLink(template, chunk.url) && !((_this_existsAssets = this.existsAssets) === null || _this_existsAssets === void 0 ? void 0 : _this_existsAssets.includes(chunk.path));
     }).map(async (chunk) => {
       const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
       if (checkIsNode() && checkIsInline(chunk, enableInlineStyles)) {

package/dist/esm-node/core/server/utils.js

@@ -47,11 +47,36 @@ function getSSRMode(ssrConfig) {
   }
   return (ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.mode) === "stream" ? "stream" : "string";
 }
+const getLinkAttributes = (linkTag) => {
+  const attributes = /* @__PURE__ */ new Map();
+  const attributeRegExp = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let match;
+  while (match = attributeRegExp.exec(linkTag)) {
+    const [, name, doubleQuotedValue, singleQuotedValue, unquotedValue] = match;
+    if (name.toLowerCase() === "link") {
+      continue;
+    }
+    var _ref, _ref1;
+    attributes.set(name.toLowerCase(), (_ref1 = (_ref = doubleQuotedValue !== null && doubleQuotedValue !== void 0 ? doubleQuotedValue : singleQuotedValue) !== null && _ref !== void 0 ? _ref : unquotedValue) !== null && _ref1 !== void 0 ? _ref1 : "");
+  }
+  return attributes;
+};
+const hasStylesheetLink = (template, href) => {
+  var _template_match;
+  const linkTags = (_template_match = template.match(/<link\b[^>]*>/gi)) !== null && _template_match !== void 0 ? _template_match : [];
+  return linkTags.some((linkTag) => {
+    const attributes = getLinkAttributes(linkTag);
+    const linkHref = attributes.get("href");
+    const rel = attributes.get("rel");
+    return linkHref === href && (rel === null || rel === void 0 ? void 0 : rel.split(/\s+/).some((relToken) => relToken.toLowerCase() === "stylesheet"));
+  });
+};
 export {
   attributesToString,
   checkIsNode,
   getSSRConfigByEntry,
   getSSRMode,
+  hasStylesheetLink,
   safeReplace,
   serializeErrors
 };

package/dist/types/core/server/utils.d.ts

@@ -24,3 +24,10 @@ export declare function getSSRConfigByEntry(entryName: string, ssr?: ServerUserC
     loaderFailureMode?: "clientRender" | "errorBoundary";
 };
 export declare function getSSRMode(ssrConfig?: SSRConfig): 'string' | 'stream' | false;
+/**
+ * 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 declare const hasStylesheetLink: (template: string, href: string) => boolean;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.71.0",
+  "version": "2.71.1",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -218,13 +218,13 @@
     "react-is": "^18",
     "react-side-effect": "^2.1.2",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin-data-loader": "2.71.0",
-    "@modern-js/plugin": "2.71.0",
-    "@modern-js/render": "2.71.0",
-    "@modern-js/runtime-utils": "2.71.0",
-    "@modern-js/plugin-v2": "2.71.0",
-    "@modern-js/types": "2.71.0",
-    "@modern-js/utils": "2.71.0"
+    "@modern-js/plugin": "2.71.1",
+    "@modern-js/plugin-data-loader": "2.71.1",
+    "@modern-js/plugin-v2": "2.71.1",
+    "@modern-js/render": "2.71.1",
+    "@modern-js/runtime-utils": "2.71.1",
+    "@modern-js/types": "2.71.1",
+    "@modern-js/utils": "2.71.1"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -232,7 +232,7 @@
   },
   "devDependencies": {
     "@remix-run/web-fetch": "^4.1.3",
-    "@rsbuild/core": "1.7.5",
+    "@rsbuild/core": "1.7.6",
     "@testing-library/react": "^13.4.0",
     "@types/cookie": "0.6.0",
     "@types/invariant": "^2.2.30",
@@ -247,11 +247,11 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5",
-    "webpack": "^5.103.0",
-    "@modern-js/app-tools": "2.71.0",
+    "webpack": "^5.108.0",
+    "@modern-js/app-tools": "2.71.1",
     "@scripts/build": "2.66.0",
     "@scripts/jest-config": "2.66.0",
-    "@modern-js/core": "2.71.0"
+    "@modern-js/core": "2.71.1"
   },
   "sideEffects": false,
   "publishConfig": {