refactor(css): Remove unnecessary and structure code, add comments (#3529)

* refactor(css): Remove unnessary and structure code, add comments

* Fix rust snapshot

* Fix rust snapshot

* Fix rust snapshot

Author: hyf0

crates/rspack_loader_sass/tests/fixtures/rspack_importer/expected/main.css

@@ -1,7 +1,6 @@
 .color-red {
   color: red;
 }
-
 @charset "UTF-8";
 body {
   font: 100% Helvetica, sans-serif;
@@ -31,4 +30,4 @@ nav a {
 }
 .bar:before {
   content: "∑";
-}
+}

crates/rspack_plugin_css/src/plugin/impl_plugin_for_css_plugin.rs

@@ -7,9 +7,10 @@ use rspack_core::rspack_sources::ReplaceSource;
 use rspack_core::{
   get_css_chunk_filename_template,
   rspack_sources::{BoxSource, ConcatSource, MapOptions, RawSource, Source, SourceExt},
-  ChunkKind, ModuleType, NormalModuleAstOrSource, ParserAndGenerator, PathData, Plugin,
-  RenderManifestEntry, SourceType,
+  Chunk, ChunkKind, ModuleType, ParserAndGenerator, PathData, Plugin, RenderManifestEntry,
+  SourceType,
 };
+use rspack_core::{Compilation, ModuleIdentifier};
 use rspack_error::Result;
 use rspack_hash::RspackHash;
 
@@ -18,6 +19,48 @@ use crate::swc_css_compiler::{SwcCssSourceMapGenConfig, SWC_COMPILER};
 use crate::utils::AUTO_PUBLIC_PATH_PLACEHOLDER_REGEX;
 use crate::CssPlugin;
 
+impl CssPlugin {
+  fn render_chunk_to_source(
+    compilation: &Compilation,
+    chunk: &Chunk,
+    ordered_css_modules: &[ModuleIdentifier],
+  ) -> rspack_error::Result<ConcatSource> {
+    let module_sources = ordered_css_modules
+      .iter()
+      .map(|module_id| {
+        let code_gen_result = compilation
+          .code_generation_results
+          .get(module_id, Some(&chunk.runtime))?;
+
+        let module_source = code_gen_result
+          .get(&SourceType::Css)
+          .map(|result| result.ast_or_source.clone().try_into_source())
+          .transpose();
+
+        module_source
+      })
+      .collect::<Result<Vec<Option<BoxSource>>>>()?;
+
+    let source = module_sources
+      .into_par_iter()
+      // TODO(hyf0): I couldn't think of a situation where a module doesn't have `Source`.
+      // Should we return a Error if there is a `None` in `module_sources`?
+      // Webpack doesn't throw. It just do a best-effort checking https://github.com/webpack/webpack/blob/5e3c4d0ddf8ae6a6e45fea42be4e8950fe49c0bb/lib/css/CssModulesPlugin.js#L565-L568
+      .flatten()
+      .fold(ConcatSource::default, |mut output, cur| {
+        output.add(cur);
+        output.add(RawSource::from("\n"));
+        output
+      })
+      .reduce(ConcatSource::default, |mut acc, cur| {
+        acc.add(cur);
+        acc
+      });
+
+    Ok(source)
+  }
+}
+
 #[async_trait::async_trait]
 impl Plugin for CssPlugin {
   fn name(&self) -> &'static str {
@@ -91,74 +134,24 @@ impl Plugin for CssPlugin {
     args: rspack_core::RenderManifestArgs<'_>,
   ) -> rspack_core::PluginRenderManifestHookOutput {
     let compilation = args.compilation;
-    let chunk = args.chunk();
+    let chunk = args.chunk_ukey.as_ref(&compilation.chunk_by_ukey);
     if matches!(chunk.kind, ChunkKind::HotUpdate) {
       return Ok(vec![]);
     }
-    let ordered_modules = Self::get_ordered_chunk_css_modules(
+
+    let ordered_css_modules = Self::get_ordered_chunk_css_modules(
       chunk,
       &compilation.chunk_graph,
       &compilation.module_graph,
       compilation,
     );
 
-    // Early bail if any of the normal modules were failed to build.
-    if ordered_modules.iter().any(|ident| {
-      args
-        .compilation
-        .module_graph
-        .module_by_identifier(ident)
-        .and_then(|module| module.as_normal_module())
-        .map(|module| {
-          matches!(
-            module.ast_or_source(),
-            NormalModuleAstOrSource::BuiltFailed(..)
-          )
-        })
-        .unwrap_or(false)
-    }) {
-      return Ok(vec![]);
-    }
-
-    let sources = ordered_modules
-      .par_iter()
-      .map(|module_id| {
-        let code_gen_result = compilation
-          .code_generation_results
-          .get(module_id, Some(&chunk.runtime))?;
-
-        code_gen_result
-          .get(&SourceType::Css)
-          .map(|result| result.ast_or_source.clone().try_into_source())
-          .transpose()
-      })
-      .filter(|result| {
-        if let Ok(result) = result {
-          return result.is_some();
-        };
-        false
-      })
-      .collect::<Result<Vec<Option<BoxSource>>>>()?;
-
-    if sources.is_empty() {
+    // Prevent generating css files for chunks which doesn't contain css modules.
+    if ordered_css_modules.is_empty() {
       return Ok(Default::default());
     }
 
-    let sources = sources
-      .into_par_iter()
-      .enumerate()
-      .fold(ConcatSource::default, |mut output, (idx, cur)| {
-        if let Some(source) = cur {
-          if idx != 0 {
-            output.add(RawSource::from("\n\n"));
-          }
-          output.add(source);
-        }
-        output
-      })
-      .collect::<Vec<ConcatSource>>();
-
-    let source = ConcatSource::new(sources);
+    let source = Self::render_chunk_to_source(compilation, chunk, &ordered_css_modules)?;
 
     let filename_template = get_css_chunk_filename_template(
       chunk,

crates/rspack_plugin_css/tests/fixtures/custom/http_import/expected/main.css

@@ -1,5 +1,4 @@
 @import url("http://example.com/test.css");
-
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/custom/modules-ident-name/expected/main.css

@@ -1,3 +1,3 @@
 ._style-module__foo---___6655ebe837449348-_66 {
   color: hotpink;
-}
+}

crates/rspack_plugin_css/tests/fixtures/postcss/default/expected/main.css

@@ -1 +1 @@
-@keyframes play {}
+@keyframes play {}

crates/rspack_plugin_css/tests/fixtures/postcss/pxtorem/expected/main.css

@@ -1,3 +1,3 @@
 .test {
   width: 2rem;
-}
+}

crates/rspack_plugin_css/tests/fixtures/postcss/simple-config/expected/main.css

@@ -1,3 +1,3 @@
 @-webkit-keyframes play {}
 @-moz-keyframes play {}
-@keyframes play {}
+@keyframes play {}

crates/rspack_plugin_css/tests/fixtures/webpack/at-charset/expected/main.css

@@ -2,43 +2,35 @@
 .ae {
   background: green;
 }
-
 @charset "utf-8";
 .aa {
   background: green;
 }
-
 @charset "utf-8";
 .ab {
   background: green;
 }
-
 @charset "utf-8";
 .ac {
   background: green;
 }
-
 @charset "utf-8";
 .ad {
   background: green;
 }
-
 @charset "utf-8";
 body {
   background: red;
 }
-
 @charset "utf-8";
 .ba {
   background: green;
 }
-
 @charset "utf-8";
 .bb {
   background: green;
 }
-
 @charset "utf-8";
 body {
   background: yellow;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/at-import-in-the-middle/expected/main.css

@@ -1,18 +1,14 @@
 body {
   background: red;
 }
-
 @import url("https://some/other/external/css");
-
 .c {
   background: red;
 }
 .c {
   color: yellow;
 }
-
 @import url("https://some/external/css");
-
 .b {
   background: red;
 }

crates/rspack_plugin_css/tests/fixtures/webpack/at-import/expected/main.css

@@ -1,35 +1,27 @@
 .ae {
   background: green;
 }
-
 .aa {
   background: green;
 }
-
 .ab {
   background: green;
 }
-
 .ac {
   background: green;
 }
-
 .ad {
   background: green;
 }
-
 body {
   background: red;
 }
-
 .ba {
   background: green;
 }
-
 .bb {
   background: green;
 }
-
 body {
   background: yellow;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/default-options/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/multiple-entry/expected/main-one.css

@@ -1,7 +1,6 @@
 body {
   background: red;
 }
-
 body {
   background: green;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/multiple-entry/expected/main-two.css

@@ -1,7 +1,6 @@
 body {
   background: green;
 }
-
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/nested/expected/main.css

@@ -1,11 +1,9 @@
 body {
   background: red;
 }
-
 .component {
   background: blue;
 }
-
 body {
   background: green;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/output-iife/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/shared-import/expected/main.css

@@ -3,11 +3,9 @@
   background-color: green;
   border: 1px solid green;
 }
-
 .shared {
   color: red;
 }
-
 .shared {
   background-color: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple-async-load-css/expected/main.css

@@ -1,7 +1,6 @@
 body {
   background: red;
 }
-
 body {
   background: green;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple-async/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple-commonjs-syntax/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple-es-module-syntax/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple-multiple/expected/main.css

@@ -1,7 +1,6 @@
 body {
   background: red;
 }
-
 body {
   background: green;
-}
+}

crates/rspack_plugin_css/tests/fixtures/webpack/simple/expected/main.css

@@ -1,3 +1,3 @@
 body {
   background: red;
-}
+}