(turbopack) doesn't support mixing units in sass calculations, while webpack does #65241
Description
Link to the code that reproduces this issue
https://github.com/darkroomengineering/satus
To Reproduce
- Clone the repo
- Update packages to lastest, esp. nextjs
- Replace
next devwithnext dev --turboinpackage.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 stylesheetExpected 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/AWhich 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