Link to the code that reproduces this issue

https://github.com/Arctomachine/next-grid-template-areas-bug

To Reproduce

1. Start dev server with --turbo flag
2. Observe devtools for different names of grid areas in grid and in cards, incorrect visuals

Current vs. Expected behavior

Expected: areas have same name in grid and cards
Current: area names mismatch. Grid will append its module name to grid-template-area, but card will append its module name to grid-area. Since they are different names, browser will not put cards into grid correctly.

Example of area name in grid:

And in card:

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 32720
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.1-canary.6 // Latest available version is detected (14.2.1-canary.6).
  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

Only happens for turbopack in dev mode. Production build is not affected

_PACK-2976