fix single css chunks with import context (vercel/turborepo#7775)

### Description

* add import context `layer`, `supports`, `media` to single css chunks

### Testing Instructions

<!--
  Give a quick description of steps to test your changes.
-->


Closes PACK-2797

crates/turbopack-core/src/reference_type.rs

@@ -116,6 +116,43 @@ impl ImportContext {
 
         Ok(ImportContext::new(layers, media, supports))
     }
+
+    #[turbo_tasks::function]
+    pub fn modifier(&self) -> Result<Vc<String>> {
+        use std::fmt::Write;
+        let mut modifier = String::new();
+        if !self.layers.is_empty() {
+            for (i, layer) in self.layers.iter().enumerate() {
+                if i > 0 {
+                    modifier.push(' ');
+                }
+                write!(modifier, "layer({})", layer)?
+            }
+        }
+        if !self.media.is_empty() {
+            if !modifier.is_empty() {
+                modifier.push(' ');
+            }
+            for (i, media) in self.media.iter().enumerate() {
+                if i > 0 {
+                    modifier.push_str(" and ");
+                }
+                modifier.push_str(media);
+            }
+        }
+        if !self.supports.is_empty() {
+            if !modifier.is_empty() {
+                modifier.push(' ');
+            }
+            for (i, supports) in self.supports.iter().enumerate() {
+                if i > 0 {
+                    modifier.push(' ');
+                }
+                write!(modifier, "supports({})", supports)?
+            }
+        }
+        Ok(Vc::cell(modifier))
+    }
 }
 
 #[turbo_tasks::value(serialization = "auto_for_input")]

crates/turbopack-css/src/asset.rs

@@ -25,8 +25,12 @@ use crate::{
 };
 
 #[turbo_tasks::function]
-fn modifier() -> Vc<String> {
-    Vc::cell("css".to_string())
+fn modifier(use_swc_css: bool) -> Vc<String> {
+    if use_swc_css {
+        Vc::cell("swc css".to_string())
+    } else {
+        Vc::cell("css".to_string())
+    }
 }
 
 #[turbo_tasks::value]
@@ -107,10 +111,15 @@ impl ProcessCss for CssModuleAsset {
 impl Module for CssModuleAsset {
     #[turbo_tasks::function]
     fn ident(&self) -> Vc<AssetIdent> {
-        self.source
+        let mut ident = self
+            .source
             .ident()
-            .with_modifier(modifier())
-            .with_layer(self.asset_context.layer())
+            .with_modifier(modifier(self.use_swc_css))
+            .with_layer(self.asset_context.layer());
+        if let Some(import_context) = self.import_context {
+            ident = ident.with_modifier(import_context.modifier())
+        }
+        ident
     }
 
     #[turbo_tasks::function]

crates/turbopack-css/src/chunk/mod.rs

@@ -78,33 +78,11 @@ impl CssChunk {
             }
 
             writeln!(body, "/* {} */", id)?;
-            let mut close: Vec<String> = vec![];
-            if let Some(import_context) = content.import_context {
-                let import_context = &*import_context.await?;
-                if !&import_context.layers.is_empty() {
-                    writeln!(body, "@layer {} {{", import_context.layers.join("."))?;
-                    close.push("}\n".to_owned());
-                }
-                if !&import_context.media.is_empty() {
-                    writeln!(body, "@media {} {{", import_context.media.join(" and "))?;
-                    close.push("}\n".to_owned());
-                }
-                if !&import_context.supports.is_empty() {
-                    writeln!(
-                        body,
-                        "@supports {} {{",
-                        import_context.supports.join(" and ")
-                    )?;
-                    close.push("}\n".to_owned());
-                }
-            }
+            let close = write_import_context(&mut body, content.import_context).await?;
 
             body.push_source(&content.inner_code, content.source_map.map(Vc::upcast));
-            writeln!(body)?;
 
-            for line in &close {
-                body.push_source(&Rope::from(line.to_string()), None);
-            }
+            writeln!(body, "{close}")?;
             writeln!(body)?;
         }
 
@@ -142,6 +120,33 @@ impl CssChunk {
     }
 }
 
+pub async fn write_import_context(
+    body: &mut impl std::io::Write,
+    import_context: Option<Vc<ImportContext>>,
+) -> Result<String> {
+    let mut close = String::new();
+    if let Some(import_context) = import_context {
+        let import_context = &*import_context.await?;
+        if !&import_context.layers.is_empty() {
+            writeln!(body, "@layer {} {{", import_context.layers.join("."))?;
+            close.push_str("\n}");
+        }
+        if !&import_context.media.is_empty() {
+            writeln!(body, "@media {} {{", import_context.media.join(" and "))?;
+            close.push_str("\n}");
+        }
+        if !&import_context.supports.is_empty() {
+            writeln!(
+                body,
+                "@supports {} {{",
+                import_context.supports.join(" and ")
+            )?;
+            close.push_str("\n}");
+        }
+    }
+    Ok(close)
+}
+
 #[turbo_tasks::value]
 pub struct CssChunkContent {
     pub chunk_items: Vec<Vc<Box<dyn CssChunkItem>>>,

crates/turbopack-css/src/chunk/single_item_chunk/chunk.rs

@@ -14,7 +14,7 @@ use turbopack_core::{
 };
 
 use super::source_map::SingleItemCssChunkSourceMapAsset;
-use crate::chunk::CssChunkItem;
+use crate::chunk::{write_import_context, CssChunkItem};
 
 /// A CSS chunk that only contains a single item. This is used for selectively
 /// loading CSS modules that are part of a larger chunk in development mode, and
@@ -54,7 +54,10 @@ impl SingleItemCssChunk {
 
         writeln!(code, "/* {} */", id)?;
         let content = this.item.content().await?;
+        let close = write_import_context(&mut code, content.import_context).await?;
+
         code.push_source(&content.inner_code, content.source_map.map(Vc::upcast));
+        write!(code, "{close}")?;
 
         if *this
             .chunking_context

crates/turbopack-tests/tests/snapshot/css/absolute-uri-import/output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_137d17.js → crates/turbopack-tests/tests/snapshot/css/absolute-uri-import/output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_273bd7.js

@@ -1,11 +1,11 @@
 (globalThis.TURBOPACK = globalThis.TURBOPACK || []).push([
-    "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_137d17.js",
+    "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_273bd7.js",
     {},
 ]);
 (globalThis.TURBOPACK_CHUNK_LISTS = globalThis.TURBOPACK_CHUNK_LISTS || []).push({
-  "path": "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_137d17.js",
+  "path": "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_273bd7.js",
   "chunks": [
-    "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_b63dbc._.css",
+    "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_90d01b._.css",
     "output/crates_turbopack-tests_tests_snapshot_css_absolute-uri-import_input_index_0e8055.js"
   ],
   "source": "entry"

crates/turbopack-tests/tests/snapshot/css/chained-attributes/input/b.css

@@ -1,4 +1,5 @@
 @import url("./c.css") layer(foo) (orientation: landscape);
+@import url("./c.css") layer(bar) (orientation: portrait);
 
 .imported {
   color: orange;