Variable expansions for media queries inside styled-jsx break with Turbopack

[miselin]

Link to the code that reproduces this issue

https://github.com/miselin/next-style-jsx-var-expansion-repro

To Reproduce

1. Run npm run dev
2. Visit http://localhost:3000
3. The page should build without error, showing "Hello" text that changes size based on the browser window dimensions (i.e. the media query is using the variable-expanded 768px breakpoint correctly)
4. Terminate that process
5. Run npm run dev:turbo
6. Visit http://localhost:3000
7. You'll see a syntax error exception:

./pages/index.tsx:8:19
Parsing ecmascript source code failed
   6 |     <div>
   7 |       <h1 className="header">Hello</h1>
>  8 |       <style jsx>{`
     |                   ^
>  9 |         .header { font-size: 48px; }
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 10 |
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 11 |         @media screen and (max-width: ${MOBILE_MAX}px) {
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 12 |           .header { font-size: 12px; }
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 13 |         }
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 14 |       `}</style>
     | ^^^^^^^^
  15 |     </div>
  16 |   );
  17 | }

Error while processing css: failed to parse css using lightningcss: Invalid media query at :0:112.

Current vs. Expected behavior

Expected: I see the expected variable expansion and correct media query CSS, allowing the use of constants for controlling media query breakpoints in an application.

Current: enabling Turbopack instead triggers an exception during page build unless the variables are removed.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Thu Nov  2 07:43:57 PDT 2023; root:xnu-8796.141.3.701.17~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 8.11.0
Relevant Packages:
  next: 14.1.1-canary.42 // Latest available version is detected (14.1.1-canary.42).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Turbopack (--turbo)

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

next dev (local)

Additional context

This does not repro with Next 14.1.0. The first version that repros this issue is 14.1.1-canary.9, canary versions earlier than that work as expected.

_PACK-2446

[kdy1]

swc-project/plugins#267 will fix the issue

[kdy1]

Re-opening as swc-project/plugins#267 is not applied by #61662.
I forgot bumping the version of styled-jsx crate so it's not merged

[miselin]

I'm still seeing this repro on Next.js 14.1.1-canary.55 (turbo) (it looks like canary.53 included the swc_core version bump).

Is that expected, is there a later release that will fix this?

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.