fix(rsc): handle server component css by server entry scope (#13844)

* fix(rsc): handle server component css by server entry scope

* samply RscEntryModule identifier

* chore: add css test case

* chore: refactor plugin state

* feat: fix shared css in root and page

* fix: RscEntryModule create_identifier

Author: SyMind

crates/rspack_plugin_rsc/src/client_plugin.rs

@@ -6,8 +6,8 @@ use rspack_collections::IdentifierSet;
 use rspack_core::{
   ChunkGraph, ChunkGroup, ChunkGroupUkey, ChunkUkey, Compilation, CompilationAfterProcessAssets,
   CompilationParams, CompilerCompilation, CompilerFailed, CompilerId, CompilerMake,
-  CrossOriginLoading, DependenciesBlock, Dependency, DependencyId, DependencyType, Logger,
-  ModuleGraph, ModuleId, ModuleIdentifier, Plugin,
+  CrossOriginLoading, DependenciesBlock, Dependency, DependencyId, DependencyType, EntryDependency,
+  Logger, ModuleGraph, ModuleId, ModuleIdentifier, Plugin,
 };
 use rspack_error::{Diagnostic, Result};
 use rspack_hook::{plugin, plugin_hook};
@@ -98,8 +98,8 @@ fn record_module(
 
   if is_css_mod(module.as_ref()) {
     let mut matched_server_entries = Vec::new();
-    for (server_entry, imports) in &entry_state.css_imports_per_server_entry {
-      if imports.contains(resource.as_ref()) {
+    for (server_entry, server_entry_state) in &entry_state.server_entries {
+      if server_entry_state.css_imports.contains(resource.as_ref()) {
         matched_server_entries.push(server_entry.clone());
       }
     }
@@ -128,9 +128,10 @@ fn record_module(
 
     for server_entry in matched_server_entries {
       entry_state
-        .entry_css_files
-        .entry(server_entry.clone())
+        .server_entries
+        .entry(server_entry)
         .or_default()
+        .css_files
         .extend(css_files.clone());
     }
 
@@ -261,7 +262,10 @@ fn record_chunk_group(
   }
 }
 
-fn collect_entry_js_files(compilation: &Compilation, plugin_state: &mut PluginState) -> Result<()> {
+fn collect_bootstrap_scripts(
+  compilation: &Compilation,
+  plugin_state: &mut PluginState,
+) -> Result<()> {
   for (entry_name, chunk_group_ukey) in &compilation.build_chunk_graph_artifact.entrypoints {
     let Some(entry_state) = plugin_state.entries.get_mut(entry_name.as_str()) else {
       continue;
@@ -281,7 +285,7 @@ fn collect_entry_js_files(compilation: &Compilation, plugin_state: &mut PluginSt
       .expect("module_loading should be initialized in traverse_modules before recording modules")
       .prefix;
 
-    let entry_js_files = chunk_group
+    let bootstrap_scripts = chunk_group
       .get_files(&compilation.build_chunk_graph_artifact.chunk_by_ukey)
       .into_iter()
       .filter(|chunk_file| chunk_file.ends_with(".js"))
@@ -297,7 +301,7 @@ fn collect_entry_js_files(compilation: &Compilation, plugin_state: &mut PluginSt
       .map(|file| prefixed_asset_path(prefix, &file))
       .collect::<FxIndexSet<String>>();
 
-    entry_state.entry_js_files = entry_js_files;
+    entry_state.bootstrap_scripts = bootstrap_scripts;
   }
   Ok(())
 }
@@ -520,6 +524,7 @@ async fn compilation(
   params: &mut CompilationParams,
 ) -> Result<()> {
   compilation.set_dependency_factory(DependencyType::RscEntry, Arc::new(RscEntryModuleFactory));
+  compilation.set_dependency_factory(DependencyType::Entry, params.normal_module_factory.clone());
   compilation.set_dependency_factory(
     DependencyType::RscClientReference,
     params.normal_module_factory.clone(),
@@ -543,29 +548,30 @@ async fn make(&self, compilation: &mut Compilation) -> Result<()> {
     )
   })?;
 
-  let mut include_dependencies = vec![];
   for (entry_name, entry_state) in &plugin_state.entries {
     let client_modules = &entry_state.injected_client_entries;
-    {
-      if compilation.entries.get(entry_name.as_ref()).is_none() {
-        compilation.push_diagnostic(Diagnostic::error(
-          "RSC Client Entry Mismatch".to_string(),
-          format!(
-            "Entry '{}' not found in the client compiler. Failed to inject the following client modules: {}",
-            entry_name,
-            client_modules
-              .iter()
-              .map(|m| m.request.as_str())
-              .collect::<Vec<_>>()
-              .join(", ")
-          ),
-        ));
-        continue;
-      }
+    if compilation.entries.get(entry_name.as_ref()).is_none() {
+      compilation.push_diagnostic(Diagnostic::error(
+        "RSC Client Entry Mismatch".to_string(),
+        format!(
+          "Entry '{}' not found in the client compiler. Failed to inject the following client modules: {}",
+          entry_name,
+          client_modules
+            .iter()
+            .map(|m| m.request.as_str())
+            .collect::<Vec<_>>()
+            .join(", ")
+        ),
+      ));
+      continue;
+    }
 
+    let mut include_dependencies = Vec::new();
+    if !client_modules.is_empty() || entry_state.has_css_imports_by_server_entry() {
       let dependency = Box::new(RscEntryDependency::new(
         entry_name.clone(),
         client_modules.clone(),
+        entry_state.css_imports_by_server_entry(),
         false,
       ));
       self
@@ -580,8 +586,23 @@ async fn make(&self, compilation: &mut Compilation) -> Result<()> {
         .add_dependency(dependency);
     }
 
+    let mut entry_dependencies = Vec::new();
+    for request in &entry_state.root_css_imports {
+      let dependency = Box::new(EntryDependency::new(
+        request.clone(),
+        compilation.options.context.clone(),
+        None,
+        false,
+      ));
+      entry_dependencies.push(*dependency.id());
+      compilation
+        .get_module_graph_mut()
+        .add_dependency(dependency);
+    }
+
     #[allow(clippy::unwrap_used)]
     let entry_data = compilation.entries.get_mut(entry_name.as_ref()).unwrap();
+    entry_data.dependencies.append(&mut entry_dependencies);
     entry_data
       .include_dependencies
       .append(&mut include_dependencies);
@@ -614,8 +635,8 @@ async fn after_process_assets(
     self.traverse_modules(compilation, &mut plugin_state)?;
     logger.time_end(start);
 
-    let start = logger.time("record entry js files");
-    collect_entry_js_files(compilation, &mut plugin_state)?;
+    let start = logger.time("record bootstrap scripts");
+    collect_bootstrap_scripts(compilation, &mut plugin_state)?;
     logger.time_end(start);
 
     for (entry_name, client_entries) in self.client_entries_per_entry.borrow().iter() {

crates/rspack_plugin_rsc/src/component_info.rs

@@ -9,27 +9,23 @@ use rspack_plugin_javascript::dependency::{
   ESMImportSpecifierDependency,
 };
 use rspack_util::fx_hash::{FxIndexMap, FxIndexSet};
-use rustc_hash::FxHashMap;
 use swc_core::atoms::{Atom, Wtf8Atom};
 
 use crate::{
   constants::{IMAGE_REGEX, LAYERS_NAMES},
-  plugin_state::ActionIdNamePair,
+  plugin_state::{ActionIdNamePair, CssImportsByServerEntry, RootCssImports},
   utils::{get_module_resource, is_css_mod},
 };
 
 // { [request to inject into client compilation]: [exported names] }
-// CSS requests are represented by an empty export set.
 pub type ClientComponentImports = FxIndexMap<String, FxIndexSet<Atom>>;
-// { [server entry path]: [css imports] }
-// Used only to map emitted CSS files back to server entries in the manifest.
-pub type CssImportsPerServerEntry = FxHashMap<String, FxIndexSet<String>>;
 
 #[derive(Debug, Default)]
 pub struct ComponentInfo {
   pub should_inject_ssr_modules: bool,
   pub client_component_imports: ClientComponentImports,
-  pub css_imports_per_server_entry: CssImportsPerServerEntry,
+  pub css_imports_by_server_entry: CssImportsByServerEntry,
+  pub root_css_imports: RootCssImports,
   pub action_imports: Vec<(String, Vec<ActionIdNamePair>)>,
 }
 
@@ -114,6 +110,46 @@ fn filter_client_components(
     return;
   }
 
+  // CSS ownership depends on the current parent chain, so record it before the
+  // `visited` short-circuit. A stylesheet may be seen first through a
+  // `use server-entry` component and later through the root RSC tree; the later
+  // root visit still needs to update `root_css_imports` and remove any earlier
+  // server-entry ownership.
+  if is_css_mod(module) {
+    let side_effect_free = module_declared_side_effect_free(module).unwrap_or(false);
+
+    if side_effect_free {
+      let exports_info = compilation
+        .exports_info_artifact
+        .get_exports_info_data(&module.identifier());
+      let unused = !exports_info.is_module_used(Some(runtime));
+      if unused {
+        return;
+      }
+    }
+
+    if server_entries.is_empty() {
+      // CSS with no `use server-entry` in its parent chain should load with
+      // the client entry rather than through RSC server-entry CSS metadata.
+      component_info.root_css_imports.insert(resource.to_string());
+      component_info
+        .css_imports_by_server_entry
+        .retain(|_, css_imports| {
+          css_imports.shift_remove(resource.as_ref());
+          !css_imports.is_empty()
+        });
+    } else if !component_info.root_css_imports.contains(resource.as_ref()) {
+      for server_entry in server_entries.iter() {
+        component_info
+          .css_imports_by_server_entry
+          .entry(server_entry.clone())
+          .or_default()
+          .insert(resource.to_string());
+      }
+    }
+    return;
+  }
+
   if visited.contains(&module.identifier()) {
     if component_info
       .client_component_imports
@@ -151,32 +187,7 @@ fn filter_client_components(
   }
 
   let module_graph = compilation.get_module_graph();
-  if is_css_mod(module) {
-    let side_effect_free = module_declared_side_effect_free(module).unwrap_or(false);
-
-    if side_effect_free {
-      let exports_info = compilation
-        .exports_info_artifact
-        .get_exports_info_data(&module.identifier());
-      let unused = !exports_info.is_module_used(Some(runtime));
-      if unused {
-        return;
-      }
-    }
-
-    component_info
-      .client_component_imports
-      .entry(resource.to_string())
-      .or_default();
-
-    for server_entry in server_entries.iter() {
-      component_info
-        .css_imports_per_server_entry
-        .entry(server_entry.clone())
-        .or_default()
-        .insert(resource.to_string());
-    }
-  } else if is_client_component_entry_module(module) {
+  if is_client_component_entry_module(module) {
     if !component_info
       .client_component_imports
       .contains_key(resource.as_ref())

crates/rspack_plugin_rsc/src/manifest_runtime_module.rs

@@ -80,8 +80,8 @@ impl RuntimeModule for RscManifestRuntimeModule {
       client_manifest,
       server_consumer_module_map,
       module_loading,
-      entry_css_files: &entry_state.entry_css_files,
-      entry_js_files: &entry_state.entry_js_files,
+      server_entries: &entry_state.server_entries,
+      bootstrap_scripts: &entry_state.bootstrap_scripts,
     };
 
     Ok(formatdoc! {

crates/rspack_plugin_rsc/src/plugin_state.rs

@@ -15,6 +15,8 @@ use crate::reference_manifest::{
 };
 
 pub type ActionIdNamePair = (Atom, Atom);
+pub type CssImportsByServerEntry = FxHashMap<String, FxIndexSet<String>>;
+pub type RootCssImports = FxIndexSet<String>;
 
 /// Structured info about a client module to inject into the client compiler.
 #[rspack_cacheable::cacheable]
@@ -25,24 +27,50 @@ pub struct ClientModuleImport {
   pub ids: FxIndexSet<Atom>,
 }
 
+#[derive(Debug, Default)]
+pub struct ServerEntryState {
+  /// CSS import paths referenced by this server entry.
+  pub css_imports: FxIndexSet<String>,
+  /// CSS chunk file paths emitted for this server entry.
+  pub css_files: FxIndexSet<String>,
+}
+
 /// State for one compilation entry.
 #[derive(Debug, Default)]
 pub struct EntryState {
+  pub server_entries: FxHashMap<String, ServerEntryState>,
   pub injected_client_entries: Vec<ClientModuleImport>,
   pub client_modules: FxHashMap<String, ManifestExport>,
-  /// Server entry resource -> CSS import paths.
-  pub css_imports_per_server_entry: FxHashMap<String, FxIndexSet<String>>,
+  /// Root CSS import paths reached through a parent chain without `use server-entry`.
+  /// These are attached directly to the matching client compiler entry.
+  pub root_css_imports: RootCssImports,
   /// Dependency path -> action id/name pairs.
   pub client_actions: FxHashMap<String, Vec<ActionIdNamePair>>,
   pub server_actions: ServerReferenceManifest,
-  /// Server entry resource -> CSS chunk file paths.
-  pub entry_css_files: FxHashMap<String, FxIndexSet<String>>,
-  pub entry_js_files: FxIndexSet<String>,
+  pub bootstrap_scripts: FxIndexSet<String>,
   pub changed_server_components: IdentifierSet,
   /// Precomputed in chunk_ids hook.
   pub server_consumer_module_map: Option<FxHashMap<String, ManifestNode>>,
 }
 
+impl EntryState {
+  pub fn has_css_imports_by_server_entry(&self) -> bool {
+    self
+      .server_entries
+      .values()
+      .any(|server_entry| !server_entry.css_imports.is_empty())
+  }
+
+  pub fn css_imports_by_server_entry(&self) -> CssImportsByServerEntry {
+    self
+      .server_entries
+      .iter()
+      .filter(|(_, server_entry)| !server_entry.css_imports.is_empty())
+      .map(|(name, server_entry)| (name.clone(), server_entry.css_imports.clone()))
+      .collect()
+  }
+}
+
 #[derive(Debug, Default)]
 pub struct PluginState {
   pub module_loading: Option<ModuleLoading>,

crates/rspack_plugin_rsc/src/reference_manifest.rs

@@ -10,7 +10,7 @@ use serde::{Deserialize, Serialize, Serializer, ser::SerializeMap};
 use crate::{
   constants::LAYERS_NAMES,
   loaders::action_entry_loader::{ACTION_ENTRY_LOADER_IDENTIFIER, parse_action_entries},
-  plugin_state::PluginState,
+  plugin_state::{PluginState, ServerEntryState},
   utils::{ChunkModules, get_module_resource},
 };
 
@@ -65,6 +65,28 @@ where
   }
 }
 
+fn serialize_server_entries_css_files<S>(
+  server_entries: &FxHashMap<String, ServerEntryState>,
+  serializer: S,
+) -> Result<S::Ok, S::Error>
+where
+  S: Serializer,
+{
+  let mut map = serializer.serialize_map(Some(
+    server_entries
+      .values()
+      .filter(|server_entry| !server_entry.css_files.is_empty())
+      .count(),
+  ))?;
+  for (server_entry, state) in server_entries {
+    if state.css_files.is_empty() {
+      continue;
+    }
+    map.serialize_entry(server_entry, &state.css_files)?;
+  }
+  map.end()
+}
+
 #[derive(Debug, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct RscEntryManifest<'a> {
@@ -73,8 +95,13 @@ pub struct RscEntryManifest<'a> {
   #[serde(serialize_with = "serialize_none_as_empty_object")]
   pub server_consumer_module_map: Option<&'a FxHashMap<String, ManifestNode>>,
   pub module_loading: &'a ModuleLoading,
-  pub entry_css_files: &'a FxHashMap<String, FxIndexSet<String>>,
-  pub entry_js_files: &'a FxIndexSet<String>,
+  #[serde(
+    rename = "entryCssFiles",
+    serialize_with = "serialize_server_entries_css_files"
+  )]
+  pub server_entries: &'a FxHashMap<String, ServerEntryState>,
+  #[serde(rename = "entryJsFiles")]
+  pub bootstrap_scripts: &'a FxIndexSet<String>,
 }
 
 /// Full manifest (all entries) for the onManifest callback. Map from entry name to per-entry manifest.