feat(pack): rewrite style-loader in Rust (#2658)

Author: Copilot

AGENTS.md

@@ -34,7 +34,6 @@ The `next.js/` directory is a **git submodule** (`utooland/next.js`) providing T
 | `@utoo/pack-cli` | CLI for bundler (`up`/`utoopack` commands) |
 | `@utoo/pack-shared` | Shared types and utilities |
 | `@utoo/web` | Browser-compatible toolchain via WASM |
-| `@utoo/style-loader` | Style loading support |
 
 ### Key Data Flow
 

Cargo.lock

@@ -89,6 +89,7 @@ sha1                              = "0.10"
 sha2                              = "0.10"
 url                               = "2.2.2"
 urlencoding                       = "2.1.2"
+lightningcss                      = "1.0.0-alpha.70"
 # Dependencies from nextjs, should keep the same rev!
 ## Dependencies for common cache and task. See https://github.com/utooland/next.js/blob/canary/turbopack/crates/turbopack/architecture.md
 turbo-bincode                     = { path = "./next.js/turbopack/crates/turbo-bincode" }

Cargo.toml

@@ -15,6 +15,7 @@ dunce                        = { workspace = true }
 either                       = { workspace = true, features = ["serde"] }
 futures                      = { workspace = true }
 indoc                        = { workspace = true }
+lightningcss                 = { workspace = true }
 mime_guess                   = "2.0.4"
 pathdiff                     = { workspace = true }
 qstring                      = "0.7.2"

crates/pack-core/Cargo.toml

@@ -1,3 +1,9 @@
+/**
+ * Injects styles into the DOM using <link> tags.
+ * This is a Rust-native reimplementation of webpack's style-loader.
+ * @see https://webpack.js.org/loaders/style-loader/
+ */
+
 const getTarget = (() => {
   const memo = {};
 

…r/src/runtime/injectStylesIntoLinkTag.js …rc/inline_css/injectStylesIntoLinkTag.jspackages/style-loader/src/runtime/injectStylesIntoLinkTag.js renamed to crates/pack-core/js/src/inline_css/injectStylesIntoLinkTag.js packages/style-loader/src/runtime/injectStylesIntoLinkTag.js renamed to crates/pack-core/js/src/inline_css/injectStylesIntoLinkTag.js

@@ -1,3 +1,9 @@
+/**
+ * Injects styles into the DOM using <style> tags.
+ * This is a Rust-native reimplementation of webpack's style-loader.
+ * @see https://webpack.js.org/loaders/style-loader/
+ */
+
 const isOldIE = (function isOldIE() {
   let memo;
 

…/src/runtime/injectStylesIntoStyleTag.js …c/inline_css/injectStylesIntoStyleTag.jspackages/style-loader/src/runtime/injectStylesIntoStyleTag.js renamed to crates/pack-core/js/src/inline_css/injectStylesIntoStyleTag.js packages/style-loader/src/runtime/injectStylesIntoStyleTag.js renamed to crates/pack-core/js/src/inline_css/injectStylesIntoStyleTag.js

@@ -223,8 +223,8 @@ pub async fn get_client_module_options_context(
         .await?;
     let target_browsers = env.runtime_versions();
 
-    let mut client_rules = get_client_transforms_rules(config).await?;
-    let mut foreign_client_rules = get_client_transforms_rules(config).await?;
+    let mut client_rules = get_client_transforms_rules(config, mode).await?;
+    let mut foreign_client_rules = get_client_transforms_rules(config, mode).await?;
 
     // Ignore .d.ts files - they are TypeScript declaration files and should not be bundled
     let ignore_dts_rule = ModuleRule::new(

crates/pack-core/src/client/context.rs

@@ -4,12 +4,17 @@ use turbopack::module_options::ModuleRule;
 
 use crate::{
     config::Config,
+    mode::Mode,
     shared::transforms::{
-        get_image_rule, get_wasm_rule, modularize_imports::get_modularize_imports_rule,
+        get_image_rule, get_inline_css_rule, get_wasm_rule, inline_css::module::InjectType,
+        modularize_imports::get_modularize_imports_rule,
     },
 };
 
-pub async fn get_client_transforms_rules(config: Vc<Config>) -> Result<Vec<ModuleRule>> {
+pub async fn get_client_transforms_rules(
+    config: Vc<Config>,
+    mode: Vc<Mode>,
+) -> Result<Vec<ModuleRule>> {
     let mut rules = vec![];
 
     let optimization_config = config.optimization().await?;
@@ -33,5 +38,19 @@ pub async fn get_client_transforms_rules(config: Vc<Config>) -> Result<Vec<Modul
         rules.push(get_wasm_rule().await?);
     }
 
+    if let Some(inline_css_options) = &*config.inline_css().await?
+        && let Some(obj) = inline_css_options.as_object()
+    {
+        let insert = obj.get("insert").and_then(|v| v.as_str()).unwrap_or("head");
+        let inject_type = obj
+            .get("injectType")
+            .and_then(|v| v.as_str())
+            .map(InjectType::from_str)
+            .unwrap_or(InjectType::Style);
+
+        let minify = *config.minify(mode).await?;
+        rules.push(get_inline_css_rule(insert.into(), inject_type, minify).await?);
+    }
+
     Ok(rules)
 }

crates/pack-core/src/client/transforms.rs

@@ -13,8 +13,6 @@ use turbopack_node::execution_context::ExecutionContext;
 
 use crate::{config::Config, embed_js, util::convert_to_project_relative};
 
-pub const UTOO_STYLE_LOADER: &str = "@utoo/style-loader";
-
 pub fn mdx_import_source_file() -> RcStr {
     unreachable!()
 }
@@ -39,10 +37,6 @@ pub async fn insert_shared_aliases(
     pack_path: &FileSystemPath,
 ) -> Result<()> {
     import_map.insert_singleton_alias("@swc/helpers", pack_path.join("node_modules/@swc/helpers")?);
-    import_map.insert_singleton_alias(
-        UTOO_STYLE_LOADER,
-        pack_path.join(&format!("node_modules/{UTOO_STYLE_LOADER}"))?,
-    );
     // import_map.insert_singleton_alias("styled-jsx", pack_package.clone());
     import_map.insert_singleton_alias("react", project_path.clone());
     import_map.insert_singleton_alias("react-dom", project_path.clone());

crates/pack-core/src/import_map.rs

@@ -0,0 +1,8 @@
+/// Inline CSS module — a Rust-native reimplementation of webpack's style-loader
+/// that injects CSS into the DOM at runtime via `<style>` or `<link>` tags.
+///
+/// Reference: <https://webpack.js.org/loaders/style-loader/>
+pub(crate) mod module;
+pub(crate) mod source_asset;
+
+pub use module::InlineCssModuleType;