[Turbopack] Include CSS URL attributes, including Layer, Media and Supports (#89300)

robert-j-webb · ijjk · web-flow · commit 7c9be45a48ea · 2026-02-08T09:55:32.000-08:00
Note that this is my first contribution in Rust, so let me know if I missed anything idiomatic or if there is a particularly better way to do something. Also, I did not use AI to create this at all, although I did chat a bit to try to wrap my head around types. - Related issues linked using Fixes #88533 - Tests added. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md Summary of changes: Adds support for all of the attributes of `@import` for Turbopack, by modifying the turbopack-css package, including Layer, Media and Supports. [W3 Reference](https://www.w3.org/TR/css-cascade-5/#at-import) --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
diff --git a/test/e2e/app-dir/app-css/app/externalLayer/external-layer.css b/test/e2e/app-dir/app-css/app/externalLayer/external-layer.css
@@ -0,0 +1,11 @@
+@import url('https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css')
+layer(default);
+/* Any external stylesheet should work. Using this css-reset because it is very small and backed by CDN */
+
+@layer default, new;
+
+@layer new {
+  h1 {
+    margin: 5px;
+  }
+}
diff --git a/test/e2e/app-dir/app-css/app/externalLayer/page.js b/test/e2e/app-dir/app-css/app/externalLayer/page.js
@@ -0,0 +1,5 @@
+import './external-layer.css'
+
+export default function Home() {
+  return <h1>Hello</h1>
+}
diff --git a/test/e2e/app-dir/app-css/app/relativeLayer/import.css b/test/e2e/app-dir/app-css/app/relativeLayer/import.css
@@ -0,0 +1,3 @@
+h2 {
+  color: rgb(0, 0, 255);
+}
diff --git a/test/e2e/app-dir/app-css/app/relativeLayer/page.js b/test/e2e/app-dir/app-css/app/relativeLayer/page.js
@@ -0,0 +1,5 @@
+import './relative-layer.css'
+
+export default function Home() {
+  return <h2>Hello</h2>
+}
diff --git a/test/e2e/app-dir/app-css/app/relativeLayer/relative-layer.css b/test/e2e/app-dir/app-css/app/relativeLayer/relative-layer.css
@@ -0,0 +1,9 @@
+@import './import.css' layer(new);
+
+@layer default, new;
+
+@layer default {
+  h2 {
+    color: rgb(255, 0, 0);
+  }
+}
diff --git a/test/e2e/app-dir/app-css/app/urlMedia/desktop-only.css b/test/e2e/app-dir/app-css/app/urlMedia/desktop-only.css
@@ -0,0 +1,6 @@
+body {
+  background: black;
+}
+h1 {
+  color: rgb(255, 255, 255);
+}
diff --git a/test/e2e/app-dir/app-css/app/urlMedia/mobile-only.css b/test/e2e/app-dir/app-css/app/urlMedia/mobile-only.css
@@ -0,0 +1,6 @@
+body {
+  background: white;
+}
+h1 {
+  color: rgb(0, 0, 0);
+}
diff --git a/test/e2e/app-dir/app-css/app/urlMedia/page.js b/test/e2e/app-dir/app-css/app/urlMedia/page.js
@@ -0,0 +1,5 @@
+import './url-media.css'
+
+export default function Home() {
+  return <h1>Hello</h1>
+}
diff --git a/test/e2e/app-dir/app-css/app/urlMedia/url-media.css b/test/e2e/app-dir/app-css/app/urlMedia/url-media.css
@@ -0,0 +1,2 @@
+@import url('./mobile-only.css') screen and (max-width: 400px);
+@import url('./desktop-only.css') screen and (min-width: 401px);
diff --git a/test/e2e/app-dir/app-css/app/urlSupports/not-loaded.css b/test/e2e/app-dir/app-css/app/urlSupports/not-loaded.css
@@ -0,0 +1,3 @@
+h1 {
+  color: rgb(0, 100, 0) !important;
+}
diff --git a/test/e2e/app-dir/app-css/app/urlSupports/page.js b/test/e2e/app-dir/app-css/app/urlSupports/page.js
@@ -0,0 +1,5 @@
+import './url-supports.css'
+
+export default function Home() {
+  return <h1>Hello</h1>
+}
diff --git a/test/e2e/app-dir/app-css/app/urlSupports/should-load.css b/test/e2e/app-dir/app-css/app/urlSupports/should-load.css
@@ -0,0 +1,3 @@
+h1 {
+  color: rgb(255, 0, 0) !important;
+}
diff --git a/test/e2e/app-dir/app-css/app/urlSupports/url-supports.css b/test/e2e/app-dir/app-css/app/urlSupports/url-supports.css
@@ -0,0 +1,7 @@
+@import url('./not-loaded.css') supports(display: not-real-value);
+@import url('./should-load.css') supports(display: flex);
+
+h1 {
+  /* this should be overwritten by the should-load css */
+  color: rgb(0, 0, 255);
+}
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
@@ -327,6 +327,54 @@ describe('app dir - css', () => {
       })
     })
 
+    describe('css import URLs', () => {
+      it('should not mangle external layers', async () => {
+        const browser = await next.browser('/externalLayer')
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('h1')).margin`
+          )
+        ).toBe('5px')
+      })
+
+      it('should not mangle relative layers', async () => {
+        const browser = await next.browser('/relativeLayer')
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('h2')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+      })
+
+      // Broken in webpack, see https://github.com/vercel/next.js/issues/89602
+      if (process.env.IS_TURBOPACK_TEST) {
+        it('should allow the supports attribute', async () => {
+          const browser = await next.browser('/urlSupports')
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('h1')).color`
+            )
+          ).toBe('rgb(255, 0, 0)')
+        })
+      }
+
+      it('should work with the media attribute', async () => {
+        const browser = await next.browser('/urlMedia')
+        await browser.setDimensions({ width: 1000, height: 1000 })
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('h1')).color`
+          )
+        ).toBe('rgb(255, 255, 255)')
+        await browser.setDimensions({ width: 300, height: 300 })
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('h1')).color`
+          )
+        ).toBe('rgb(0, 0, 0)')
+      })
+    })
+
     if (isNextDev) {
       it('should not affect css orders during HMR', async () => {
         const filePath = 'app/ordering/page.js'
diff --git a/turbopack/crates/turbopack-css/src/chunk/mod.rs b/turbopack/crates/turbopack-css/src/chunk/mod.rs
@@ -36,7 +36,7 @@ use turbopack_core::{
 };
 
 use self::{single_item_chunk::chunk::SingleItemCssChunk, source_map::CssChunkSourceMapAsset};
-use crate::{ImportAssetReference, util::stringify_js};
+use crate::ImportAssetReference;
 
 #[turbo_tasks::value]
 pub struct CssChunk {
@@ -130,7 +130,7 @@ impl CssChunk {
         }
 
         for external_import in external_imports {
-            writeln!(code, "@import {};", stringify_js(&external_import))?;
+            writeln!(code, "{}", &external_import)?;
         }
 
         let built = &body.build();
diff --git a/turbopack/crates/turbopack-css/src/lib.rs b/turbopack/crates/turbopack-css/src/lib.rs
@@ -13,7 +13,6 @@ mod lifetime_util;
 mod module_asset;
 pub(crate) mod process;
 pub(crate) mod references;
-pub(crate) mod util;
 
 use bincode::{Decode, Encode};
 use turbo_tasks::{NonLocalValue, TaskInput, trace::TraceRawVcs};
diff --git a/turbopack/crates/turbopack-css/src/references/import.rs b/turbopack/crates/turbopack-css/src/references/import.rs
@@ -1,8 +1,10 @@
 use anyhow::Result;
 use lightningcss::{
     media_query::MediaList,
-    rules::{import::ImportRule, layer::LayerName, supports::SupportsCondition},
+    printer::PrinterOptions,
+    rules::{Location, import::ImportRule, layer::LayerName, supports::SupportsCondition},
     traits::ToCss,
+    values::string::CowArcStr,
 };
 use turbo_rcstr::RcStr;
 use turbo_tasks::{ResolvedVc, ValueToString, Vc};
@@ -159,15 +161,45 @@ impl CodeGenerateable for ImportAssetReference {
         _context: Vc<Box<dyn ChunkingContext>>,
     ) -> Result<Vc<CodeGeneration>> {
         let mut imports = vec![];
+
         if let Request::Uri {
             protocol,
             remainder,
             ..
         } = &*self.request.await?
         {
-            imports.push(CssImport::External(ResolvedVc::cell(
-                format!("{protocol}{remainder}").into(),
-            )))
+            match &*self.attributes.await? {
+                ImportAttributes::LightningCss {
+                    layer_name,
+                    supports,
+                    media,
+                } => {
+                    let layer = if layer_name.is_none() {
+                        None
+                    } else {
+                        Some(layer_name.clone())
+                    };
+                    let css_rule = ImportRule {
+                        url: CowArcStr::from(format!("{protocol}{remainder}")),
+                        layer,
+                        supports: supports.clone(),
+                        media: media.clone(),
+                        loc: Location {
+                            source_index: 0,
+                            line: 0,
+                            column: 0,
+                        },
+                    };
+                    let css = css_rule
+                        .to_css_string(PrinterOptions {
+                            minify: true,
+                            ..PrinterOptions::default()
+                        })
+                        .unwrap();
+
+                    imports.push(CssImport::External(ResolvedVc::cell(css.into())));
+                }
+            }
         }
 
         Ok(CodeGeneration { imports }.cell())
diff --git a/turbopack/crates/turbopack-css/src/util.rs b/turbopack/crates/turbopack-css/src/util.rs
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/import.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/import.css
@@ -0,0 +1,3 @@
+h2 {
+  color: rgb(0, 0, 255);
+}
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.css
@@ -0,0 +1,9 @@
+@import './import.css' layer(new);
+
+@layer default, new;
+
+@layer default {
+  h2 {
+    color: rgb(255, 0, 0);
+  }
+}
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.js b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.js
@@ -0,0 +1 @@
+import './index.css'
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js.map b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js.map
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js.map b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js.map
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/ba425_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/ba425_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js
@@ -0,0 +1,5 @@
+(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([
+    "output/ba425_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js",
+    {"otherChunks":["output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css","output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js"],"runtimeModuleIds":["[project]/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.js [test] (ecmascript)"]}
+]);
+// Dummy runtime
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css.map b/turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css.map

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+h2 {`
	`2`	`+ color: rgb(0, 0, 255);`
	`3`	`+}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +body {
 +  background: black;
 +}
 +h1 {
 +  color: rgb(255, 255, 255);
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import url('./mobile-only.css') screen and (max-width: 400px);`
	`2`	`+@import url('./desktop-only.css') screen and (min-width: 401px);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+h1 {`
	`2`	`+ color: rgb(0, 100, 0) !important;`
	`3`	`+}`