nextjs - ✅(Solved) Fix Webpack mangles `@import ... supports(...)` syntax when inlining CSS [1 pull requests, 1 participants]

nextjs2026-02-06 13:25:12

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#89602•Fetched 2026-04-08 02:02:34

View on GitHub

Comments

Participants

Timeline

Reactions

Author

robert-j-webb

Participants

robert-j-webb

Timeline (top)

labeled ×2mentioned ×2cross-referenced ×1issue_type_added ×1

Fix Action

Fixed

Fixed by PR: [Turbopack] Include CSS URL attributes, including Layer, Media and Supports (https://github.com/vercel/next.js/pull/89300)

PR fix notes

PR #89300: [Turbopack] Include CSS URL attributes, including Layer, Media and Supports

Repository: vercel/next.js
Author: robert-j-webb
State: closed | merged: True
Link: https://github.com/vercel/next.js/pull/89300

Description (problem / solution / changelog)

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 https://github.com/vercel/next.js/issues/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

Changed files

test/e2e/app-dir/app-css/app/externalLayer/external-layer.css (added, +11/-0)
test/e2e/app-dir/app-css/app/externalLayer/page.js (added, +5/-0)
test/e2e/app-dir/app-css/app/relativeLayer/import.css (added, +3/-0)
test/e2e/app-dir/app-css/app/relativeLayer/page.js (added, +5/-0)
test/e2e/app-dir/app-css/app/relativeLayer/relative-layer.css (added, +9/-0)
test/e2e/app-dir/app-css/app/urlMedia/desktop-only.css (added, +6/-0)
test/e2e/app-dir/app-css/app/urlMedia/mobile-only.css (added, +6/-0)
test/e2e/app-dir/app-css/app/urlMedia/page.js (added, +5/-0)
test/e2e/app-dir/app-css/app/urlMedia/url-media.css (added, +2/-0)
test/e2e/app-dir/app-css/app/urlSupports/not-loaded.css (added, +3/-0)
test/e2e/app-dir/app-css/app/urlSupports/page.js (added, +5/-0)
test/e2e/app-dir/app-css/app/urlSupports/should-load.css (added, +3/-0)
test/e2e/app-dir/app-css/app/urlSupports/url-supports.css (added, +7/-0)
test/e2e/app-dir/app-css/index.test.ts (modified, +48/-0)
turbopack/crates/turbopack-css/src/chunk/mod.rs (modified, +2/-2)
turbopack/crates/turbopack-css/src/lib.rs (modified, +0/-1)
turbopack/crates/turbopack-css/src/references/import.rs (modified, +36/-4)
turbopack/crates/turbopack-css/src/util.rs (removed, +0/-53)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/import.css (added, +3/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.css (added, +9/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/input/index.js (added, +1/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js.map (added, +5/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js (added, +10/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/aaf3a_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_37fc1f24.js.map (added, +6/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/ba425_crates_turbopack-tests_tests_snapshot_css_import-url_input_index_11ff7a96.js (added, +5/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css (added, +16/-0)
turbopack/crates/turbopack-tests/tests/snapshot/css/import-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_import-url_input_fccef668._.css.map (added, +7/-0)

Code Example

npm run build && npm run start

---

npm run dev

---

@media supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

---

@supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Nov  5 21:34:00 PST 2025; root:xnu-11417.140.69.705.2~1/RELEASE_ARM64_T8132
  Available memory (MB): 24576
  Available CPU cores: 10
Binaries:
  Node: 24.10.0
  npm: 11.6.1
  Yarn: 1.22.22
  pnpm: 10.28.0
Relevant Packages:
  next: 16.2.0-canary.29 // Latest available version is detected (16.2.0-canary.29).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/robert-j-webb/nextjs-repro-webpack-import-supports-css

To Reproduce

Clone repo, npm install.

Run

npm run build && npm run start

npm run dev

Go to localhost:3000

Observe the h1 is blue.

Additionally, observe the CSS in the network tab of the inspector

@media supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

Current vs. Expected behavior

The H1 should be red.

The CSS should look like (Notice that @media supports -> @supports)

@supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

h1 {
    color: rgb(0,0,255)
}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Wed Nov  5 21:34:00 PST 2025; root:xnu-11417.140.69.705.2~1/RELEASE_ARM64_T8132
  Available memory (MB): 24576
  Available CPU cores: 10
Binaries:
  Node: 24.10.0
  npm: 11.6.1
  Yarn: 1.22.22
  pnpm: 10.28.0
Relevant Packages:
  next: 16.2.0-canary.29 // Latest available version is detected (16.2.0-canary.29).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS, Webpack

Which stage(s) are affected? (Select all that apply)

next build (local), next dev (local)

Additional context

I found this while fixing Turbopack support for the @import url in https://github.com/vercel/next.js/pull/89300

extent analysis

TL;DR

The issue can likely be fixed by updating the CSS syntax from @media supports to @supports to ensure correct styling is applied.

Guidance

Verify that the CSS file is being correctly imported and processed by Webpack in the Next.js project.
Check the Webpack configuration for any custom CSS handling or plugins that might be causing the issue.
Update the CSS syntax to use @supports instead of @media supports to match the expected behavior.
Test the application in different environments to ensure the fix works consistently.

Example

/* Incorrect syntax */
@media supports(display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

/* Corrected syntax */
@supports (display: flex) {
    h1 {
        color:rgb(255,0,0)!important
    }
}

Notes

The issue seems to be related to the CSS syntax and how it's being processed by Webpack in the Next.js project. Updating the syntax to use @supports should fix the issue, but further investigation may be needed to ensure that the CSS is being correctly imported and processed.

Recommendation

Apply workaround: Update the CSS syntax to use @supports instead of @media supports, as this is the correct syntax for CSS feature queries.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#chain error #conversation history #tool integration #LLM response #prompt template

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - ✅(Solved) Fix Webpack mangles `@import ... supports(...)` syntax when inlining CSS [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89300: [Turbopack] Include CSS URL attributes, including Layer, Media and Supports

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - ✅(Solved) Fix Webpack mangles `@import ... supports(...)` syntax when inlining CSS [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89300: [Turbopack] Include CSS URL attributes, including Layer, Media and Supports

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING