feat(plugin-css): should handle css layer supports media (#9221)

Author: JSerFeng

crates/rspack_plugin_css/src/dependency/import.rs

@@ -1,3 +1,5 @@
+use std::fmt::Display;
+
 use rspack_cacheable::{cacheable, cacheable_dyn};
 use rspack_core::{
   AsContextDependency, Compilation, Dependency, DependencyCategory, DependencyId, DependencyRange,
@@ -11,16 +13,47 @@ pub struct CssImportDependency {
   id: DependencyId,
   request: String,
   range: DependencyRange,
+  media: Option<String>,
+  supports: Option<String>,
+  layer: Option<CssLayer>,
+}
+
+#[cacheable]
+#[derive(Debug, Clone)]
+pub enum CssLayer {
+  Anonymous,
+  Named(String),
 }
 
 impl CssImportDependency {
-  pub fn new(request: String, range: DependencyRange) -> Self {
+  pub fn new(
+    request: String,
+    range: DependencyRange,
+    media: Option<String>,
+    supports: Option<String>,
+    layer: Option<CssLayer>,
+  ) -> Self {
     Self {
       id: DependencyId::new(),
       request,
       range,
+      media,
+      supports,
+      layer,
     }
   }
+
+  pub fn media(&self) -> Option<&str> {
+    self.media.as_deref()
+  }
+
+  pub fn supports(&self) -> Option<&str> {
+    self.supports.as_deref()
+  }
+
+  pub fn layer(&self) -> Option<&CssLayer> {
+    self.layer.as_ref()
+  }
 }
 
 #[cacheable_dyn]
@@ -61,6 +94,24 @@ impl ModuleDependency for CssImportDependency {
   }
 }
 
+#[derive(Clone)]
+pub struct CssMedia(pub String);
+
+#[derive(Clone)]
+pub struct CssSupports(pub String);
+
+impl Display for CssMedia {
+  fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+    self.0.fmt(f)
+  }
+}
+
+impl Display for CssSupports {
+  fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+    self.0.fmt(f)
+  }
+}
+
 #[cacheable_dyn]
 impl DependencyTemplate for CssImportDependency {
   fn apply(

crates/rspack_plugin_css/src/parser_and_generator/mod.rs

@@ -15,9 +15,9 @@ use rspack_core::{
   rspack_sources::{BoxSource, ConcatSource, RawStringSource, ReplaceSource, Source, SourceExt},
   BuildMetaDefaultObject, BuildMetaExportsType, ChunkGraph, Compilation, ConstDependency,
   CssExportsConvention, Dependency, DependencyId, DependencyRange, DependencyTemplate,
-  GenerateContext, LocalIdentName, Module, ModuleDependency, ModuleGraph, ModuleIdentifier,
-  ModuleType, NormalModule, ParseContext, ParseResult, ParserAndGenerator, RuntimeSpec, SourceType,
-  TemplateContext, UsageState,
+  DependencyType, GenerateContext, LocalIdentName, Module, ModuleDependency, ModuleGraph,
+  ModuleIdentifier, ModuleType, NormalModule, ParseContext, ParseResult, ParserAndGenerator,
+  RuntimeSpec, SourceType, TemplateContext, UsageState,
 };
 use rspack_core::{ModuleInitFragments, RuntimeGlobals};
 use rspack_error::{
@@ -26,14 +26,6 @@ use rspack_error::{
 use rspack_util::ext::DynHash;
 use rustc_hash::{FxHashMap, FxHashSet};
 
-use crate::{
-  dependency::CssSelfReferenceLocalIdentDependency,
-  utils::{css_modules_exports_to_string, LocalIdentOptions},
-};
-use crate::{
-  dependency::CssSelfReferenceLocalIdentReplacement,
-  utils::{export_locals_convention, unescape},
-};
 use crate::{
   dependency::{
     CssComposeDependency, CssExportDependency, CssImportDependency, CssLocalIdentDependency,
@@ -44,6 +36,14 @@ use crate::{
     replace_module_request_prefix,
   },
 };
+use crate::{
+  dependency::{CssLayer, CssSelfReferenceLocalIdentReplacement, CssSupports},
+  utils::{export_locals_convention, unescape},
+};
+use crate::{
+  dependency::{CssMedia, CssSelfReferenceLocalIdentDependency},
+  utils::{css_modules_exports_to_string, LocalIdentOptions},
+};
 
 static REGEX_IS_MODULES: LazyLock<Regex> =
   LazyLock::new(|| Regex::new(r"\.module(s)?\.[^.]+$").expect("Invalid regex"));
@@ -184,7 +184,13 @@ impl ParserAndGenerator for CssParserAndGenerator {
           dependencies.push(dep.clone());
           code_generation_dependencies.push(dep);
         }
-        css_module_lexer::Dependency::Import { request, range, .. } => {
+        css_module_lexer::Dependency::Import {
+          request,
+          range,
+          media,
+          supports,
+          layer,
+        } => {
           if request.is_empty() {
             presentational_dependencies.push(Box::new(ConstDependency::new(
               range.start,
@@ -204,6 +210,15 @@ impl ParserAndGenerator for CssParserAndGenerator {
           dependencies.push(Box::new(CssImportDependency::new(
             request.to_string(),
             DependencyRange::new(range.start, range.end),
+            media.map(|s| s.to_string()),
+            supports.map(|s| s.to_string()),
+            layer.map(|s| {
+              if s.is_empty() {
+                CssLayer::Anonymous
+              } else {
+                CssLayer::Named(s.to_string())
+              }
+            }),
           )));
         }
         css_module_lexer::Dependency::Replace { content, range } => presentational_dependencies
@@ -476,17 +491,44 @@ impl ParserAndGenerator for CssParserAndGenerator {
           data: generate_context.data,
         };
 
+        let module_graph = compilation.get_module_graph();
         module.get_dependencies().iter().for_each(|id| {
-          if let Some(dependency) = compilation
-            .get_module_graph()
+          let dep = module_graph
             .dependency_by_id(id)
-            .expect("should have dependency")
-            .as_dependency_template()
-          {
+            .expect("should have dependency");
+          if let Some(dependency) = dep.as_dependency_template() {
             dependency.apply(&mut source, &mut context)
           }
         });
 
+        for conn in module_graph.get_incoming_connections(&module.identifier()) {
+          let Some(dep) = module_graph.dependency_by_id(&conn.dependency_id) else {
+            continue;
+          };
+
+          if matches!(dep.dependency_type(), DependencyType::CssImport) {
+            let Some(css_import_dep) = dep.downcast_ref::<CssImportDependency>() else {
+              panic!(
+                "dependency with type DependencyType::CssImport should only be CssImportDependency"
+              );
+            };
+
+            if let Some(media) = css_import_dep.media() {
+              let media = CssMedia(media.to_string());
+              context.data.insert(media);
+            }
+
+            if let Some(supports) = css_import_dep.supports() {
+              let supports = CssSupports(supports.to_string());
+              context.data.insert(supports);
+            }
+
+            if let Some(layer) = css_import_dep.layer() {
+              context.data.insert(layer.clone());
+            }
+          }
+        }
+
         if let Some(dependencies) = module.get_presentational_dependencies() {
           dependencies
             .iter()

crates/rspack_plugin_css/src/plugin/impl_plugin_for_css_plugin.rs

@@ -1,12 +1,13 @@
 #![allow(clippy::comparison_chain)]
 
+use std::borrow::Cow;
 use std::hash::Hash;
 use std::sync::Arc;
 
 use async_trait::async_trait;
 use rayon::prelude::*;
 use rspack_collections::DatabaseItem;
-use rspack_core::rspack_sources::{BoxSource, CachedSource, ReplaceSource};
+use rspack_core::rspack_sources::{BoxSource, CachedSource, RawSource, ReplaceSource};
 use rspack_core::{
   get_css_chunk_filename_template,
   rspack_sources::{ConcatSource, RawStringSource, Source, SourceExt},
@@ -25,6 +26,7 @@ use rspack_hook::plugin_hook;
 use rspack_plugin_runtime::is_enabled_for_chunk;
 use rustc_hash::{FxHashMap as HashMap, FxHashSet as HashSet};
 
+use crate::dependency::{CssLayer, CssMedia, CssSupports};
 use crate::parser_and_generator::{CodeGenerationDataUnusedLocalIdent, CssParserAndGenerator};
 use crate::runtime::CssLoadingRuntimeModule;
 use crate::utils::AUTO_PUBLIC_PATH_PLACEHOLDER;
@@ -131,11 +133,13 @@ impl CssPlugin {
           .code_generation_results
           .get(module_id, Some(chunk.runtime()));
 
-        Ok(
-          code_gen_result
-            .get(&SourceType::Css)
-            .map(|source| (CssModuleDebugInfo { module: *module }, source)),
-        )
+        Ok(code_gen_result.get(&SourceType::Css).map(|source| {
+          (
+            CssModuleDebugInfo { module: *module },
+            &code_gen_result.data,
+            source,
+          )
+        }))
       })
       .collect::<Result<Vec<_>>>()?;
 
@@ -147,11 +151,42 @@ impl CssPlugin {
       .flatten()
       .fold(
         ConcatSource::default,
-        |mut acc, (debug_info, cur_source)| {
+        |mut acc, (debug_info, data, cur_source)| {
           let (start, end) = Self::render_module_debug_info(compilation, &debug_info);
           acc.add(start);
+
+          let mut num_close_bracket = 0;
+
+          // TODO: use PrefixSource to create indent
+          if let Some(media) = data.get::<CssMedia>() {
+            num_close_bracket += 1;
+            acc.add(RawSource::from(format!("@media {}{{\n", media)));
+          }
+
+          if let Some(supports) = data.get::<CssSupports>() {
+            num_close_bracket += 1;
+            acc.add(RawSource::from(format!("@supports ({}) {{\n", supports)));
+          }
+
+          if let Some(layer) = data.get::<CssLayer>() {
+            num_close_bracket += 1;
+            acc.add(RawSource::from(format!(
+              "@layer{} {{\n",
+              if let CssLayer::Named(layer) = &layer {
+                Cow::Owned(format!(" {}", layer))
+              } else {
+                Cow::Borrowed("")
+              }
+            )));
+          }
+
           acc.add(cur_source.clone());
+
+          for _ in 0..num_close_bracket {
+            acc.add(RawStringSource::from_static("\n}"));
+          }
           acc.add(RawStringSource::from_static("\n"));
+
           acc.add(end);
           acc
         },

packages/rspack-test-tools/tests/__snapshots__/Config.test.js.snap

@@ -220,6 +220,33 @@ exports[`config config/chunk-index/available-modules-order-index exported tests
 }
 `;
 
+exports[`config config/css/at-import exported tests at-import-in-the-top 1`] = `
+@import url("https://fonts.googleapis.com/css2?family=Inter");
+@media  (prefers-color-scheme: dark){
+
+
+.b {
+	color: red;
+}
+
+}
+@supports (display: grid) {
+@layer {
+.c {
+	color: pink;
+}
+
+}
+}
+
+
+
+
+.a {
+	color: blue;
+}
+`;
+
 exports[`config config/css/at-import-in-the-top exported tests at-import-in-the-top 1`] = `
 @import url("https://fonts.googleapis.com/css2?family=Roboto");
 @import url("https://fonts.googleapis.com/css2?family=Inter");

packages/rspack-test-tools/tests/__snapshots__/NewCodeSplitting-config.test.js.snap

@@ -220,6 +220,33 @@ exports[`new-code-splitting config cases new-code-splitting config cases/chunk-i
 }
 `;
 
+exports[`new-code-splitting config cases new-code-splitting config cases/css/at-import exported tests at-import-in-the-top 1`] = `
+@import url("https://fonts.googleapis.com/css2?family=Inter");
+@media  (prefers-color-scheme: dark){
+
+
+.b {
+	color: red;
+}
+
+}
+@supports (display: grid) {
+@layer {
+.c {
+	color: pink;
+}
+
+}
+}
+
+
+
+
+.a {
+	color: blue;
+}
+`;
+
 exports[`new-code-splitting config cases new-code-splitting config cases/css/at-import-in-the-top exported tests at-import-in-the-top 1`] = `
 @import url("https://fonts.googleapis.com/css2?family=Roboto");
 @import url("https://fonts.googleapis.com/css2?family=Inter");

packages/rspack-test-tools/tests/configCases/css/at-import/a.css

@@ -0,0 +1,7 @@
+@import url("./b.css") (prefers-color-scheme: dark);
+
+@import url("./c.css") layer supports(display: grid);
+
+.a {
+	color: blue;
+}

packages/rspack-test-tools/tests/configCases/css/at-import/b.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter");
+
+.b {
+	color: red;
+}

packages/rspack-test-tools/tests/configCases/css/at-import/c.css

@@ -0,0 +1,3 @@
+.c {
+	color: pink;
+}

packages/rspack-test-tools/tests/configCases/css/at-import/index.js

@@ -0,0 +1,12 @@
+require("./a.css");
+const fs = __non_webpack_require__("fs");
+const path = __non_webpack_require__("path");
+
+it("at-import-in-the-top", async () => {
+	const css = await fs.promises.readFile(
+		path.resolve(__dirname, "bundle0.css"),
+		"utf-8"
+	);
+
+	expect(css).toMatchSnapshot();
+});