fix: handle css with BOM (#9467)

Author: inottn

crates/rspack_core/src/utils/mod.rs

@@ -24,6 +24,7 @@ mod module_rules;
 mod property_access;
 mod property_name;
 mod queue;
+mod remove_bom;
 mod runtime;
 mod source;
 pub mod task_loop;
@@ -45,6 +46,7 @@ pub use self::module_rules::*;
 pub use self::property_access::*;
 pub use self::property_name::*;
 pub use self::queue::*;
+pub use self::remove_bom::*;
 pub use self::runtime::*;
 pub use self::source::*;
 pub use self::template::*;

crates/rspack_core/src/utils/remove_bom.rs

@@ -0,0 +1,13 @@
+use std::sync::Arc;
+
+use rspack_sources::{ReplaceSource, Source, SourceExt};
+
+pub fn remove_bom(s: Arc<dyn Source>) -> Arc<dyn Source> {
+  if s.source().starts_with('\u{feff}') {
+    let mut s = ReplaceSource::new(s);
+    s.replace(0, 3, "", None);
+    s.boxed()
+  } else {
+    s
+  }
+}

crates/rspack_plugin_css/src/parser_and_generator/mod.rs

@@ -12,6 +12,7 @@ use rspack_cacheable::{
 };
 use rspack_core::{
   diagnostics::map_box_diagnostics_to_module_parse_diagnostics,
+  remove_bom,
   rspack_sources::{BoxSource, ConcatSource, RawStringSource, ReplaceSource, Source, SourceExt},
   BuildMetaDefaultObject, BuildMetaExportsType, ChunkGraph, Compilation, ConstDependency,
   CssExportsConvention, Dependency, DependencyId, DependencyRange, DependencyTemplate,
@@ -133,6 +134,7 @@ impl ParserAndGenerator for CssParserAndGenerator {
       BuildMetaDefaultObject::Redirect
     };
 
+    let source = remove_bom(source);
     let source_code = source.source();
     let resource_path = &resource_data.resource_path;
     let cached_source_code = OnceCell::new();

crates/rspack_plugin_javascript/src/parser_and_generator/mod.rs

@@ -7,10 +7,10 @@ use rspack_cacheable::{cacheable, cacheable_dyn};
 use rspack_core::diagnostics::map_box_diagnostics_to_module_parse_diagnostics;
 use rspack_core::rspack_sources::{BoxSource, ReplaceSource, Source, SourceExt};
 use rspack_core::{
-  render_init_fragments, AsyncDependenciesBlockIdentifier, BuildMetaExportsType, ChunkGraph,
-  Compilation, DependenciesBlock, DependencyId, DependencyRange, GenerateContext, Module,
-  ModuleGraph, ModuleType, ParseContext, ParseResult, ParserAndGenerator, SideEffectsBailoutItem,
-  SourceType, TemplateContext, TemplateReplaceSource,
+  remove_bom, render_init_fragments, AsyncDependenciesBlockIdentifier, BuildMetaExportsType,
+  ChunkGraph, Compilation, DependenciesBlock, DependencyId, DependencyRange, GenerateContext,
+  Module, ModuleGraph, ModuleType, ParseContext, ParseResult, ParserAndGenerator,
+  SideEffectsBailoutItem, SourceType, TemplateContext, TemplateReplaceSource,
 };
 use rspack_error::miette::Diagnostic;
 use rspack_error::{DiagnosticExt, IntoTWithDiagnosticArray, Result, TWithDiagnosticArray};
@@ -344,13 +344,3 @@ impl ParserAndGenerator for JavaScriptParserAndGenerator {
     None
   }
 }
-
-fn remove_bom(s: Arc<dyn Source>) -> Arc<dyn Source> {
-  if s.source().starts_with('\u{feff}') {
-    let mut s = ReplaceSource::new(s);
-    s.replace(0, 3, "", None);
-    s.boxed()
-  } else {
-    s
-  }
-}

packages/rspack-test-tools/tests/configCases/css/css-with-bom/index.css

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

packages/rspack-test-tools/tests/configCases/css/css-with-bom/index.js

@@ -0,0 +1,11 @@
+import "./index.css";
+
+it("should not contain BOM at the start of the CSS file", async () => {
+	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
+	const css = await fs.promises.readFile(
+		path.resolve(__dirname, "bundle0.css"),
+		"utf-8"
+	);
+	expect(css[0]).not.toBe("\uFEFF");
+});

packages/rspack-test-tools/tests/configCases/css/css-with-bom/rspack.config.js

@@ -0,0 +1,11 @@
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+	target: "web",
+	node: false,
+	entry: {
+		main: "./index.js"
+	},
+	experiments: {
+		css: true
+	}
+};