feat: support prefetch and preload in css extract plugin (#12237)

* feat: support prefetch and preload in css extract plugin

* feat: support prefetch and preload in css extract plugin

* feat: support prefetch and preload in css extract plugin

* feat: support prefetch and preload in css extract plugin

Author: LingyuCoder

crates/node_binding/napi-binding.d.ts

@@ -772,6 +772,11 @@ export interface JsCreateData {
   resource: string
 }
 
+export interface JsCreateLinkData {
+  code: string
+  chunk: Chunk
+}
+
 export interface JsCreateScriptData {
   code: string
   chunk: Chunk
@@ -2964,13 +2969,14 @@ export declare enum RegisterJsTapKind {
   HtmlPluginBeforeEmit = 39,
   HtmlPluginAfterEmit = 40,
   RuntimePluginCreateScript = 41,
-  RuntimePluginLinkPreload = 42,
-  RuntimePluginLinkPrefetch = 43,
-  RsdoctorPluginModuleGraph = 44,
-  RsdoctorPluginChunkGraph = 45,
-  RsdoctorPluginModuleIds = 46,
-  RsdoctorPluginModuleSources = 47,
-  RsdoctorPluginAssets = 48
+  RuntimePluginCreateLink = 42,
+  RuntimePluginLinkPreload = 43,
+  RuntimePluginLinkPrefetch = 44,
+  RsdoctorPluginModuleGraph = 45,
+  RsdoctorPluginChunkGraph = 46,
+  RsdoctorPluginModuleIds = 47,
+  RsdoctorPluginModuleSources = 48,
+  RsdoctorPluginAssets = 49
 }
 
 export interface RegisterJsTaps {
@@ -3016,7 +3022,8 @@ export interface RegisterJsTaps {
   registerHtmlPluginBeforeEmitTaps: (stages: Array<number>) => Array<{ function: ((arg: JsBeforeEmitData) => JsBeforeEmitData); stage: number; }>
   registerHtmlPluginAfterEmitTaps: (stages: Array<number>) => Array<{ function: ((arg: JsAfterEmitData) => JsAfterEmitData); stage: number; }>
   registerRuntimePluginCreateScriptTaps: (stages: Array<number>) => Array<{ function: ((arg: JsCreateScriptData) => String); stage: number; }>
-  registerRuntimePluginLinkPreloadTaps: (stages: Array<number>) => Array<{ function: ((arg: JsLinkPreloadData) => String); stage: number; }>
+  registerRuntimePluginCreateLinkTaps: (stages: Array<number>) => Array<{ function: ((arg: JsLinkPreloadData) => String); stage: number; }>
+  registerRuntimePluginLinkPreloadTaps: (stages: Array<number>) => Array<{ function: ((arg: JsCreateLinkData) => String); stage: number; }>
   registerRuntimePluginLinkPrefetchTaps: (stages: Array<number>) => Array<{ function: ((arg: JsLinkPrefetchData) => String); stage: number; }>
   registerRsdoctorPluginModuleGraphTaps: (stages: Array<number>) => Array<{ function: ((arg: JsRsdoctorModuleGraph) => Promise<boolean | undefined>); stage: number; }>
   registerRsdoctorPluginChunkGraphTaps: (stages: Array<number>) => Array<{ function: ((arg: JsRsdoctorChunkGraph) => Promise<boolean | undefined>); stage: number; }>

crates/rspack_binding_api/src/plugins/interceptor.rs

@@ -64,9 +64,10 @@ use rspack_plugin_rsdoctor::{
   RsdoctorPluginModuleSources, RsdoctorPluginModuleSourcesHook,
 };
 use rspack_plugin_runtime::{
-  CreateScriptData, LinkPrefetchData, LinkPreloadData, RuntimePluginCreateScript,
-  RuntimePluginCreateScriptHook, RuntimePluginLinkPrefetch, RuntimePluginLinkPrefetchHook,
-  RuntimePluginLinkPreload, RuntimePluginLinkPreloadHook,
+  CreateLinkData, CreateScriptData, LinkPrefetchData, LinkPreloadData, RuntimePluginCreateLink,
+  RuntimePluginCreateLinkHook, RuntimePluginCreateScript, RuntimePluginCreateScriptHook,
+  RuntimePluginLinkPrefetch, RuntimePluginLinkPrefetchHook, RuntimePluginLinkPreload,
+  RuntimePluginLinkPreloadHook,
 };
 
 use crate::{
@@ -92,7 +93,7 @@ use crate::{
   },
   runtime::{
     JsAdditionalTreeRuntimeRequirementsArg, JsAdditionalTreeRuntimeRequirementsResult,
-    JsCreateScriptData, JsLinkPrefetchData, JsLinkPreloadData, JsRuntimeGlobals,
+    JsCreateLinkData, JsCreateScriptData, JsLinkPrefetchData, JsLinkPreloadData, JsRuntimeGlobals,
     JsRuntimeRequirementInTreeArg, JsRuntimeRequirementInTreeResult,
   },
   source::JsSourceToJs,
@@ -365,6 +366,7 @@ pub enum RegisterJsTapKind {
   HtmlPluginBeforeEmit,
   HtmlPluginAfterEmit,
   RuntimePluginCreateScript,
+  RuntimePluginCreateLink,
   RuntimePluginLinkPreload,
   RuntimePluginLinkPrefetch,
   RsdoctorPluginModuleGraph,
@@ -585,6 +587,10 @@ pub struct RegisterJsTaps {
   #[napi(
     ts_type = "(stages: Array<number>) => Array<{ function: ((arg: JsLinkPreloadData) => String); stage: number; }>"
   )]
+  pub register_runtime_plugin_create_link_taps: RegisterFunction<JsCreateLinkData, Option<String>>,
+  #[napi(
+    ts_type = "(stages: Array<number>) => Array<{ function: ((arg: JsCreateLinkData) => String); stage: number; }>"
+  )]
   pub register_runtime_plugin_link_preload_taps:
     RegisterFunction<JsLinkPreloadData, Option<String>>,
   #[napi(
@@ -930,6 +936,13 @@ define_register!(
   kind = RegisterJsTapKind::RuntimePluginCreateScript,
   skip = true,
 );
+define_register!(
+  RegisterRuntimePluginCreateLinkTaps,
+  tap = RuntimePluginCreateLinkTap<JsCreateLinkData, Option<String>> @ RuntimePluginCreateLinkHook,
+  cache = true,
+  kind = RegisterJsTapKind::RuntimePluginCreateLink,
+  skip = true,
+);
 define_register!(
   RegisterRuntimePluginLinkPreloadTaps,
   tap = RuntimePluginLinkPreloadTap<JsLinkPreloadData, Option<String>> @ RuntimePluginLinkPreloadHook,
@@ -1774,6 +1787,24 @@ impl RuntimePluginCreateScript for RuntimePluginCreateScriptTap {
   }
 }
 
+#[async_trait]
+impl RuntimePluginCreateLink for RuntimePluginCreateLinkTap {
+  async fn run(&self, mut data: CreateLinkData) -> rspack_error::Result<CreateLinkData> {
+    if let Some(code) = self
+      .function
+      .call_with_sync(JsCreateLinkData::from(data.clone()))
+      .await?
+    {
+      data.code = code;
+    }
+    Ok(data)
+  }
+
+  fn stage(&self) -> i32 {
+    self.stage
+  }
+}
+
 #[async_trait]
 impl RuntimePluginLinkPreload for RuntimePluginLinkPreloadTap {
   async fn run(&self, mut data: LinkPreloadData) -> rspack_error::Result<LinkPreloadData> {

crates/rspack_binding_api/src/plugins/js_hooks_plugin.rs

@@ -65,6 +65,7 @@ pub struct JsHooksAdapterPlugin {
   register_html_plugin_before_emit_taps: RegisterHtmlPluginBeforeEmitTaps,
   register_html_plugin_after_emit_taps: RegisterHtmlPluginAfterEmitTaps,
   register_runtime_plugin_create_script_taps: RegisterRuntimePluginCreateScriptTaps,
+  register_runtime_plugin_create_link_taps: RegisterRuntimePluginCreateLinkTaps,
   register_runtime_plugin_link_preload_taps: RegisterRuntimePluginLinkPreloadTaps,
   register_runtime_plugin_link_prefetch_taps: RegisterRuntimePluginLinkPrefetchTaps,
   register_rsdoctor_plugin_module_graph_taps: RegisterRsdoctorPluginModuleGraphTaps,
@@ -427,6 +428,9 @@ async fn runtime_hooks_adapter_compilation(
   hooks
     .create_script
     .intercept(self.register_runtime_plugin_create_script_taps.clone());
+  hooks
+    .create_link
+    .intercept(self.register_runtime_plugin_create_link_taps.clone());
   hooks
     .link_preload
     .intercept(self.register_runtime_plugin_link_preload_taps.clone());
@@ -651,6 +655,10 @@ impl JsHooksAdapterPlugin {
           register_js_taps.register_runtime_plugin_create_script_taps,
           non_skippable_registers.clone(),
         ),
+        register_runtime_plugin_create_link_taps: RegisterRuntimePluginCreateLinkTaps::new(
+          register_js_taps.register_runtime_plugin_create_link_taps,
+          non_skippable_registers.clone(),
+        ),
         register_runtime_plugin_link_preload_taps: RegisterRuntimePluginLinkPreloadTaps::new(
           register_js_taps.register_runtime_plugin_link_preload_taps,
           non_skippable_registers.clone(),

crates/rspack_binding_api/src/runtime.rs

@@ -6,7 +6,7 @@ use napi::Either;
 use napi_derive::napi;
 use rspack_core::RuntimeGlobals;
 use rspack_plugin_runtime::{
-  CreateScriptData, LinkPrefetchData, LinkPreloadData, RuntimeModuleChunkWrapper,
+  CreateLinkData, CreateScriptData, LinkPrefetchData, LinkPreloadData, RuntimeModuleChunkWrapper,
 };
 use rustc_hash::FxHashMap;
 
@@ -209,6 +209,22 @@ impl From<CreateScriptData> for JsCreateScriptData {
   }
 }
 
+#[napi(object, object_from_js = false)]
+pub struct JsCreateLinkData {
+  pub code: String,
+  #[napi(ts_type = "Chunk")]
+  pub chunk: ChunkWrapper,
+}
+
+impl From<CreateLinkData> for JsCreateLinkData {
+  fn from(value: CreateLinkData) -> Self {
+    Self {
+      code: value.code,
+      chunk: value.chunk.into(),
+    }
+  }
+}
+
 #[napi(object, object_from_js = false)]
 pub struct JsLinkPreloadData {
   pub code: String,

crates/rspack_plugin_css/src/runtime/css_loading.ejs

@@ -1,4 +1,4 @@
-var uniqueName = "<%- __UNIQUE_NAME__ %>";
+var uniqueName = "<%- _unique_name %>";
 function handleCssComposes(exports, composes) {
 	for (var i = 0; i < composes.length; i += 3) {
 		var moduleId = composes[i];
@@ -8,7 +8,7 @@ function handleCssComposes(exports, composes) {
 		exports[moduleId] = exports[moduleId] + " " + composedId
 	}
 }
-var loadCssChunkData = <%- __CSS_CHUNK_DATA__ %> 
+var loadCssChunkData = <%- _css_chunk_data %> 
 var loadingAttribute = "data-webpack-loading";
 var loadStylesheet = <%- basicFunction("chunkId, url, done, hmr, fetchPriority") %> {
 	var link,
@@ -36,19 +36,7 @@ var loadStylesheet = <%- basicFunction("chunkId, url, done, hmr, fetchPriority")
 	}
 	if (!link) {
 		needAttach = true;
-		link = document.createElement("link");
-		if (<%- SCRIPT_NONCE %>) {
-			link.setAttribute("nonce", <%- SCRIPT_NONCE %>);
-		}
-		link.setAttribute("data-webpack", uniqueName + ":" + key);
-		if (fetchPriority) {
-			link.setAttribute("fetchpriority", fetchPriority);
-		}
-		link.setAttribute(loadingAttribute, 1);
-		link.rel = "stylesheet";
-		link.href = url;
-
-		<%- __CROSS_ORIGIN_LOADING_PLACEHOLDER__ %>
+		<%- _create_link %>
 	}
 	var onLinkComplete = <%- basicFunction("prev, event") %> {
 		link.onerror = link.onload = null;
@@ -61,7 +49,7 @@ var loadStylesheet = <%- basicFunction("chunkId, url, done, hmr, fetchPriority")
 	if (link.getAttribute(loadingAttribute)) {
 		var timeout = setTimeout(
 			onLinkComplete.bind(null, undefined, { type: "timeout", target: link }),
-			<%- __CHUNK_LOAD_TIMEOUT_PLACEHOLDER__ %> 
+			<%- _chunk_load_timeout %> 
 		);
 		link.onerror = onLinkComplete.bind(null, link.onerror);
 		link.onload = onLinkComplete.bind(null, link.onload);
@@ -70,4 +58,4 @@ var loadStylesheet = <%- basicFunction("chunkId, url, done, hmr, fetchPriority")
 	hmr ? document.head.insertBefore(link, hmr) : needAttach && document.head.appendChild(link);
 	return link;
 };
-<%- __INITIAL_CSS_CHUNK_DATA__ %>
+<%- _initial_css_chunk_data %>

crates/rspack_plugin_css/src/runtime/css_loading_create_link.ejs

@@ -0,0 +1,25 @@
+link = document.createElement("link");
+<% if (_charset) { %>
+link.charset = 'utf-8';
+<% } %>
+if (<%- SCRIPT_NONCE %>) {
+  link.setAttribute("nonce", <%- SCRIPT_NONCE %>);
+}
+<% if (_unique_name != "") { %>
+link.setAttribute("data-webpack", uniqueName + ":" + key);
+<% } %>
+<% if (_with_fetch_priority) { %>
+if (fetchPriority) {
+  link.setAttribute("fetchpriority", fetchPriority);
+}
+<% } %>
+link.setAttribute(loadingAttribute, 1);
+link.rel = "stylesheet";
+link.href = url;
+<% if (_cross_origin == "use-credentials") { %>
+link.crossOrigin = "use-credentials";
+<% } else if (_cross_origin != "") { %>
+if (link.href.indexOf(window.location.origin + '/') !== 0) {
+  link.crossOrigin = '<%- _cross_origin %>';
+}
+<% } %>

crates/rspack_plugin_css/src/runtime/css_loading_with_loading.ejs

@@ -10,7 +10,7 @@
 		if (installedChunkData) {
 			promises.push(installedChunkData[2]);
 		} else {
-			if (<%- __CSS_MATCHER__ %>) {
+			if (<%- _css_matcher %>) {
 				// setup Promise in chunk cache
 				var promise = new Promise(function (resolve, reject) {
 					installedChunkData = installedChunks[chunkId] = [resolve, reject];

crates/rspack_plugin_css/src/runtime/css_loading_with_prefetch.ejs

@@ -1,18 +1,9 @@
 <%- PREFETCH_CHUNK_HANDLERS %>.s =<%- basicFunction("chunkId") %> {
-  if ((!<%- HAS_OWN_PROPERTY %>(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && <%- __CSS_MATCHER__ %> ) {
+  if ((!<%- HAS_OWN_PROPERTY %>(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && <%- _css_matcher %> ) {
     installedChunks[chunkId] = null;
     if (typeof document === 'undefined') return;
 
-    var link = document.createElement('link');
-    <%- __CHARSET_PLACEHOLDER__ %>
-    <%- __CROSS_ORIGIN_PLACEHOLDER__ %>
-
-    if (<%- SCRIPT_NONCE %>) {
-      link.setAttribute("nonce", <%- SCRIPT_NONCE %>);
-    }
-    link.rel = "prefetch";
-    link.as = "style";
-    link.href = <%- PUBLIC_PATH %> + <%- GET_CHUNK_CSS_FILENAME %>(chunkId);
+    <%- _create_prefetch_link %>
     document.head.appendChild(link);
   }
 };

crates/rspack_plugin_css/src/runtime/css_loading_with_prefetch_link.ejs

@@ -0,0 +1,13 @@
+var link = document.createElement('link');
+<% if (_charset) { %>
+link.charset = 'utf-8';
+<% } %>
+<% if (_cross_origin != "") { %>
+link.crossOrigin = '<%- _cross_origin %>';
+<% } %>
+if (<%- SCRIPT_NONCE %>) {
+  link.setAttribute("nonce", <%- SCRIPT_NONCE %>);
+}
+link.rel = "prefetch";
+link.as = "style";
+link.href = <%- PUBLIC_PATH %> + <%- GET_CHUNK_CSS_FILENAME %>(chunkId);

crates/rspack_plugin_css/src/runtime/css_loading_with_preload.ejs

@@ -1,17 +1,9 @@
 <%- PRELOAD_CHUNK_HANDLERS %>.s = <%- basicFunction("chunkId") %> {
-  if ((!<%- HAS_OWN_PROPERTY %>(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && <%- __CSS_MATCHER__ %>) {
+  if ((!<%- HAS_OWN_PROPERTY %>(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && <%- _css_matcher %>) {
     installedChunks[chunkId] = null;
     if (typeof document === 'undefined') return;
 
-    var link = document.createElement('link');
-    <%- __CHARSET_PLACEHOLDER__ %> 
-    if (<%- SCRIPT_NONCE %>) {
-      link.setAttribute("nonce", <%- SCRIPT_NONCE %>);
-    }
-    link.rel = "preload";
-    link.as = "style";
-    link.href = <%- PUBLIC_PATH %> + <%- GET_CHUNK_CSS_FILENAME %>(chunkId);
-    <%- __CROSS_ORIGIN_PLACEHOLDER__ %> 
+    <%- _create_preload_link %>
     document.head.appendChild(link);
   }
 };