vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.19k stars 27.02k forks source link

[Turbopack] No Media Queries breakpoints in Chrome Device Emulation mode #72559

Open snl4ch opened 1 week ago

snl4ch commented 1 week ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/turbopack-forked-plfd58

To Reproduce

  1. Add media quires with CSS Modules
  2. Start the dev server via turbopack (next dev --turbo)
  3. Open the Chrome and go to the device emulation section in the DevTools
  4. Toggle media queries in options

image

  1. Created media queries breakpoints will not shown. But all media queries still work

Current vs. Expected behavior

Current (With Turbopack):

image

Expected (If using without Turbopack):

image

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32601
  Available CPU cores: 12
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.5.0
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-5c56b873-20241107
  react-dom: 19.0.0-rc-5c56b873-20241107
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local)

Additional context

The problem is that Turbopack for example when using @media screen and (max-width: 768px) converts this to @media screen and (width <= 768px). Because of this, Chrome doesn't show media breakpoints.

snl4ch commented 1 week ago

Found out that the problem is that Turbopack uses Lightingcss, if you set experimental: { turbo: { useSwcCss: true } } in the config to turn off it, then everything will show. So this problem is not related to turbopack and I will close this issue

timneutkens commented 1 week ago

That flag is legacy and will be removed in an upcoming patch release. We'll want to figure out why LightningCSS is causing problems for this case 🙂

mischnic commented 1 week ago

LightningCSS apparently always (if supported by your browserslist config) turns (max-width: 768px) into (width <= 768px). That makes sense when minification is enabled because this save a few bytes. But unfortunately Chrome doesn't visualize that. Example