(turbopack) doesn't support mixing units in sass calculations, while webpack does

[stabildev]

Link to the code that reproduces this issue

https://github.com/darkroomengineering/satus

To Reproduce

1. Clone the repo
2. Update packages to lastest, esp. nextjs
3. Replace next dev with next dev --turbo in package.json

Current vs. Expected behavior

Current behavior:

⨯ ModuleBuildError: ./styles/global.scss
Error evaluating Node.js code
SassError: SassError: calc(1600px * 1vw) isn't a valid CSS value.
   ╷
27 │   @return math.div($pixels * 100vw, $base-vw);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles/_functions.scss 27:11  mobile-vw()
  styles/_layout.scss 38:27     @import
  styles/global.scss 7:9        root stylesheet

Expected behavior:
Tolerate mixing units like webpack does

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:11:05 PDT 2024; root:xnu-10063.101.17~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 21.6.2
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
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

Not affiliated with satus

Can't provide more in depth context as I am not familiar with sass

_PACK-3032

[timneutkens]

Seems the root cause is that this Sass option is used but that won't work with Turbopack as it's passing JavaScript functions: https://github.com/darkroomengineering/satus/blob/d1e3a0aa6798ebcc8ed470080c1d330e7739ba25/next.config.js#L45-L56
We'll have to implement a hard error when such config is passed. For Turbopack the config is serialized so that it can be passed to the loader.

[stabildev]

Is there a workaround to somehow use Turbopack in this scenario?

[timneutkens]

Removing the function config and just setting the value directly in Sass instead.