Turbopack: fix CSS module references, take 2 (#82448)

Replaces and closes #78058
Closes PACK-4324

Before, you got duplicate modules because
`transition_to_client(postcss(webpack(source in rsc)) != postcss(webpack(transition_to_client(source in rsc))`

Now, we have:
```
rsc layer
--ESM import->
CSSModuleAsset(in rsc, contains raw SCSS source)
--CssReferenceSubType::Inner->
CssAsset(first in client layer, then processed with Webpack loader)
```

This aligns it with when you import CSS from a client component, in both cases the CSS module is first transitioned into the client layer, and then processed with Webpack

Author: mischnic

.github/workflows/build_and_test.yml

@@ -314,8 +314,6 @@ jobs:
         export TURBOPACK_BUILD=1
         export NEXT_TEST_MODE=start
         export NEXT_TEST_REACT_VERSION="${{ matrix.react }}"
-        # TODO(PACK-4578): Remove
-        export TURBOPACK_TEMP_DISABLE_DUPLICATE_MODULES_CHECK=1
 
         node run-tests.js --timings -g ${{ matrix.group }} --type production
       stepName: 'test-turbopack-production-react-${{ matrix.react }}-${{ matrix.group }}'

crates/next-api/src/app.rs

@@ -34,7 +34,7 @@ use next_core::{
     },
     next_server_utility::{NEXT_SERVER_UTILITY_MERGE_TAG, NextServerUtilityTransition},
     parse_segment_config_from_source,
-    util::NextRuntime,
+    util::{NextRuntime, module_styles_rule_condition, styles_rule_condition},
 };
 use serde::{Deserialize, Serialize};
 use tracing::Instrument;
@@ -99,37 +99,6 @@ pub struct AppProject {
 pub struct OptionAppProject(Option<ResolvedVc<AppProject>>);
 
 impl AppProject {}
-
-fn styles_rule_condition() -> RuleCondition {
-    RuleCondition::any(vec![
-        RuleCondition::all(vec![
-            RuleCondition::ResourcePathEndsWith(".css".into()),
-            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.css".into())),
-        ]),
-        RuleCondition::all(vec![
-            RuleCondition::ResourcePathEndsWith(".scss".into()),
-            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.scss".into())),
-        ]),
-        RuleCondition::all(vec![
-            RuleCondition::ResourcePathEndsWith(".sass".into()),
-            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.sass".into())),
-        ]),
-        RuleCondition::all(vec![
-            RuleCondition::ContentTypeStartsWith("text/css".into()),
-            RuleCondition::not(RuleCondition::ContentTypeStartsWith(
-                "text/css+module".into(),
-            )),
-        ]),
-    ])
-}
-fn module_styles_rule_condition() -> RuleCondition {
-    RuleCondition::any(vec![
-        RuleCondition::ResourcePathEndsWith(".module.css".into()),
-        RuleCondition::ResourcePathEndsWith(".module.scss".into()),
-        RuleCondition::ResourcePathEndsWith(".module.sass".into()),
-        RuleCondition::ContentTypeStartsWith("text/css+module".into()),
-    ])
-}
 impl AppProject {
     pub fn client_transition_name() -> RcStr {
         rcstr!("next-ecmascript-client-reference")
@@ -406,10 +375,10 @@ impl AppProject {
             transition_rules: vec![
                 // Mark as client reference (and exclude from RSC chunking) the edge from the
                 // CSS Module to the actual CSS
-                TransitionRule::new_internal(
+                TransitionRule::new(
                     RuleCondition::all(vec![
                         RuleCondition::ReferenceType(ReferenceType::Css(
-                            CssReferenceSubType::Internal,
+                            CssReferenceSubType::Inner,
                         )),
                         module_styles_rule_condition(),
                     ]),
@@ -678,6 +647,18 @@ impl AppProject {
         Ok(ModuleAssetContext::new(
             TransitionOptions {
                 named_transitions: transitions,
+                transition_rules: vec![
+                    // Change context, this is used to determine the list of CSS module classes.
+                    TransitionRule::new(
+                        RuleCondition::all(vec![
+                            RuleCondition::ReferenceType(ReferenceType::Css(
+                                CssReferenceSubType::Analyze,
+                            )),
+                            module_styles_rule_condition(),
+                        ]),
+                        ResolvedVc::upcast(self.client_transition().to_resolved().await?),
+                    ),
+                ],
                 ..Default::default()
             }
             .cell(),
@@ -738,6 +719,18 @@ impl AppProject {
         Ok(ModuleAssetContext::new(
             TransitionOptions {
                 named_transitions: transitions,
+                transition_rules: vec![
+                    // Change context, this is used to determine the list of CSS module classes.
+                    TransitionRule::new(
+                        RuleCondition::all(vec![
+                            RuleCondition::ReferenceType(ReferenceType::Css(
+                                CssReferenceSubType::Analyze,
+                            )),
+                            module_styles_rule_condition(),
+                        ]),
+                        ResolvedVc::upcast(self.client_transition().to_resolved().await?),
+                    ),
+                ],
                 ..Default::default()
             }
             .cell(),

crates/next-core/src/next_client/context.rs

@@ -64,7 +64,10 @@ use crate::{
         get_decorators_transform_options, get_jsx_transform_options,
         get_typescript_transform_options,
     },
-    util::{OptionEnvMap, defines, foreign_code_context_condition, internal_assets_conditions},
+    util::{
+        OptionEnvMap, defines, foreign_code_context_condition, internal_assets_conditions,
+        module_styles_rule_condition,
+    },
 };
 
 #[turbo_tasks::function]
@@ -316,6 +319,7 @@ pub async fn get_client_module_options_context(
         },
         css: CssOptionsContext {
             source_maps,
+            module_css_condition: Some(module_styles_rule_condition()),
             ..Default::default()
         },
         environment: Some(env),

crates/next-core/src/next_server/context.rs

@@ -75,6 +75,7 @@ use crate::{
     util::{
         NextRuntime, OptionEnvMap, defines, foreign_code_context_condition,
         get_transpiled_packages, internal_assets_conditions, load_next_js_templateon,
+        module_styles_rule_condition,
     },
 };
 
@@ -583,6 +584,7 @@ pub async fn get_server_module_options_context(
         environment: Some(environment),
         css: CssOptionsContext {
             source_maps,
+            module_css_condition: Some(module_styles_rule_condition()),
             ..Default::default()
         },
         tree_shaking_mode: tree_shaking_mode_for_user_code,

crates/next-core/src/next_server/transforms.rs

@@ -3,7 +3,7 @@ use next_custom_transforms::transforms::strip_page_exports::ExportFilter;
 use turbo_rcstr::RcStr;
 use turbo_tasks::{ResolvedVc, Vc};
 use turbopack::module_options::{ModuleRule, ModuleRuleEffect, RuleCondition};
-use turbopack_core::reference_type::{ReferenceType, UrlReferenceSubType};
+use turbopack_core::reference_type::{CssReferenceSubType, ReferenceType, UrlReferenceSubType};
 
 use crate::{
     mode::NextMode,
@@ -21,7 +21,7 @@ use crate::{
         next_page_static_info::get_next_page_static_info_assert_rule,
         next_pure::get_next_pure_rule, server_actions::ActionsTransform,
     },
-    util::NextRuntime,
+    util::{NextRuntime, module_styles_rule_condition, styles_rule_condition},
 };
 
 /// Returns a list of module rules which apply server-side, Next.js-specific
@@ -51,35 +51,18 @@ pub async fn get_next_server_transforms_rules(
 
     if !matches!(context_ty, ServerContextType::AppRSC { .. }) {
         rules.extend([
-            // Ignore the internal ModuleCssAsset -> CssModuleAsset references
-            // The CSS Module module itself is still needed for class names
-            ModuleRule::new_internal(
-                RuleCondition::any(vec![
-                    RuleCondition::ResourcePathEndsWith(".module.css".into()),
-                    RuleCondition::ContentTypeStartsWith("text/css+module".into()),
-                ]),
-                vec![ModuleRuleEffect::Ignore],
-            ),
-        ]);
-        rules.extend([
-            // Ignore all non-module CSS references
+            // Ignore the inner ModuleCssAsset -> CssModuleAsset references
+            // The CSS Module module itself (and the Analyze reference) is still needed to generate
+            // the class names object.
             ModuleRule::new(
-                RuleCondition::any(vec![
-                    RuleCondition::all(vec![
-                        RuleCondition::ResourcePathEndsWith(".css".into()),
-                        RuleCondition::not(RuleCondition::ResourcePathEndsWith(
-                            ".module.css".into(),
-                        )),
-                    ]),
-                    RuleCondition::all(vec![
-                        RuleCondition::ContentTypeStartsWith("text/css".into()),
-                        RuleCondition::not(RuleCondition::ContentTypeStartsWith(
-                            "text/css+module".into(),
-                        )),
-                    ]),
+                RuleCondition::all(vec![
+                    RuleCondition::ReferenceType(ReferenceType::Css(CssReferenceSubType::Inner)),
+                    module_styles_rule_condition(),
                 ]),
                 vec![ModuleRuleEffect::Ignore],
             ),
+            // Ignore all non-module CSS references
+            ModuleRule::new(styles_rule_condition(), vec![ModuleRuleEffect::Ignore]),
         ]);
     }
 

crates/next-core/src/util.rs

@@ -16,6 +16,7 @@ use turbo_tasks_fs::{
     self, File, FileContent, FileSystem, FileSystemPath, json::parse_json_rope_with_source_context,
     rope::Rope,
 };
+use turbopack::module_options::RuleCondition;
 use turbopack_core::{
     asset::AssetContent,
     compile_time_info::{CompileTimeDefineValue, CompileTimeDefines, DefinableNameSegment},
@@ -793,3 +794,48 @@ pub async fn load_next_js_templateon<T: DeserializeOwned>(
 
     Ok(result)
 }
+
+pub fn styles_rule_condition() -> RuleCondition {
+    RuleCondition::any(vec![
+        RuleCondition::all(vec![
+            RuleCondition::ResourcePathEndsWith(".css".into()),
+            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.css".into())),
+        ]),
+        RuleCondition::all(vec![
+            RuleCondition::ResourcePathEndsWith(".sass".into()),
+            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.sass".into())),
+        ]),
+        RuleCondition::all(vec![
+            RuleCondition::ResourcePathEndsWith(".scss".into()),
+            RuleCondition::not(RuleCondition::ResourcePathEndsWith(".module.scss".into())),
+        ]),
+        RuleCondition::all(vec![
+            RuleCondition::ContentTypeStartsWith("text/css".into()),
+            RuleCondition::not(RuleCondition::ContentTypeStartsWith(
+                "text/css+module".into(),
+            )),
+        ]),
+        RuleCondition::all(vec![
+            RuleCondition::ContentTypeStartsWith("text/sass".into()),
+            RuleCondition::not(RuleCondition::ContentTypeStartsWith(
+                "text/sass+module".into(),
+            )),
+        ]),
+        RuleCondition::all(vec![
+            RuleCondition::ContentTypeStartsWith("text/scss".into()),
+            RuleCondition::not(RuleCondition::ContentTypeStartsWith(
+                "text/scss+module".into(),
+            )),
+        ]),
+    ])
+}
+pub fn module_styles_rule_condition() -> RuleCondition {
+    RuleCondition::any(vec![
+        RuleCondition::ResourcePathEndsWith(".module.css".into()),
+        RuleCondition::ResourcePathEndsWith(".module.scss".into()),
+        RuleCondition::ResourcePathEndsWith(".module.sass".into()),
+        RuleCondition::ContentTypeStartsWith("text/css+module".into()),
+        RuleCondition::ContentTypeStartsWith("text/sass+module".into()),
+        RuleCondition::ContentTypeStartsWith("text/scss+module".into()),
+    ])
+}

turbopack/crates/turbo-tasks/src/raw_vc.rs

@@ -1,4 +1,9 @@
-use std::{fmt::Display, future::Future, pin::Pin, task::Poll};
+use std::{
+    fmt::{Debug, Display},
+    future::Future,
+    pin::Pin,
+    task::Poll,
+};
 
 use anyhow::Result;
 use auto_hash_map::AutoSet;
@@ -54,7 +59,7 @@ impl Display for CellId {
 /// otherwise be treated as an internal implementation detail of `turbo-tasks`.
 ///
 /// [monomorphization]: https://doc.rust-lang.org/book/ch10-01-syntax.html#performance-of-code-using-generics
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+#[derive(Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub enum RawVc {
     /// The synchronous return value of a task (after argument resolution). This is the
     /// representation used by [`OperationVc`][crate::OperationVc].
@@ -74,6 +79,28 @@ pub enum RawVc {
     LocalOutput(ExecutionId, LocalTaskId, TaskPersistence),
 }
 
+impl Debug for RawVc {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            RawVc::TaskOutput(task_id) => f
+                .debug_tuple("RawVc::TaskOutput")
+                .field(&**task_id)
+                .finish(),
+            RawVc::TaskCell(task_id, cell_id) => f
+                .debug_tuple("RawVc::TaskCell")
+                .field(&**task_id)
+                .field(&cell_id.to_string())
+                .finish(),
+            RawVc::LocalOutput(execution_id, local_task_id, task_persistence) => f
+                .debug_tuple("RawVc::LocalOutput")
+                .field(&**execution_id)
+                .field(&**local_task_id)
+                .field(task_persistence)
+                .finish(),
+        }
+    }
+}
+
 impl RawVc {
     pub fn is_resolved(&self) -> bool {
         match self {

turbopack/crates/turbo-tasks/src/vc/mod.rs

@@ -357,7 +357,7 @@ where
     T: ?Sized,
 {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("Vc").field("node", &self.node).finish()
+        f.debug_tuple("Vc").field(&self.node).finish()
     }
 }
 

turbopack/crates/turbo-tasks/src/vc/resolved.rs

@@ -295,9 +295,7 @@ where
     T: ?Sized,
 {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("ResolvedVc")
-            .field("node", &self.node.node)
-            .finish()
+        f.debug_tuple("ResolvedVc").field(&self.node.node).finish()
     }
 }
 

turbopack/crates/turbopack-core/src/module_graph/mod.rs

@@ -348,8 +348,6 @@ impl SingleModuleGraph {
         #[cfg(debug_assertions)]
         {
             use once_cell::sync::Lazy;
-
-            // TODO(PACK-4578): This is temporary while the last issues are being addressed.
             static CHECK_FOR_DUPLICATE_MODULES: Lazy<bool> = Lazy::new(|| {
                 match std::env::var_os("TURBOPACK_TEMP_DISABLE_DUPLICATE_MODULES_CHECK") {
                     Some(v) => v != "1" && v != "true",