Unexpected token Delim('$') at [project]/app/globals.css:757:29

[J4v4Scr1pt]

Link to the code that reproduces this issue

https://github.com/J4v4Scr1pt/ThnJK/tree/upgradeToNextjs15andReact19

To Reproduce

Start the project with --turbopack enabled and navigate to any page. As soon as it compile it will fail on below error.

Current vs. Expected behavior

Current:
Fails as soon as Turbo is trying to compile a page you navigate to.

Expected:
To work as with webpack.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32470
  Available CPU cores: 12
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  next: 15.1.0 // Latest available version is detected (15.1.0).
  eslint-config-next: 15.1.0
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
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), Other (Deployed)

Additional context

I have some custom Tailwind configuration that used to work with Nextjs and webpack. With NextJs 15 and turbo being stable I wanted to use this. But then I get this error:

 ⨯ ./app/globals.css:758:30
Parsing css source code failed
  756 |   --background: ({ opacityVariable, opacityValue }) => {
  757 |           if (!isNaN(+opacityValue)) {
> 758 |             return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                              ^
  759 |           }
  760 |           if (opacityVariable) {
  761 |             return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

Unexpected token Delim('$') at [project]/app/globals.css:757:29

I can only fix the issue by removing the method or using webpack, which is not what I want :).