[turbopack] using scroll() does not work while using --turbo

[meesvandongen]

Link to the code that reproduces this issue

https://github.com/meesvandongen/demo-scroll-function

To Reproduce

1. npm i
2. Start the demo with npm run dev
3. scroll down

Current vs. Expected behavior

The page should turn from red to blue, but instead it is green.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32693
  Available CPU cores: 24
Binaries:
  Node: 23.11.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 8.4.0
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: N/A
Next.js Config:
  output: N/A

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

CSS

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

next dev (local)

Additional context

Given this CSS

.page {
  animation: shrink 1s linear both;
  animation-timeline: scroll();
  height: 200vh;
  background-color: green;
}

@keyframes shrink {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

The turbopack generated CSS is

animation: 1s linear both page-module__E0kJGG__shrink scroll();`

This is not valid; the animation-timeline property may not be used in the animation shorthand.

This is the case for module imports and non-module imports.

MDN says the following;

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, ..., and animation-timeline.

But it seems that this is not the current implementation in chrome.

The output using webpack is:

    animation: page_shrink__JKp40 1s linear both;
    animation-timeline: scroll();

[asfaqahmed]

I like to contribute to this Issue