turbopack breaks animation with css variables

[yyjhao]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/hy2fx4?file=%2Fapp%2Fpage.module.css

To Reproduce

load the page
observe that the red box is animating but the blue box is not
removing --turbopack fixes the issue

Current vs. Expected behavior

both boxes should animate

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.0.4 // There is a newer version (15.1.6) available, upgrade recommended! 
  eslint-config-next: 15.0.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.4.5
Next.js Config:
  output: N/A
 ⚠ There is a newer version (15.1.6) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

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

CSS, Turbopack

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

next dev (local), next build (local), next start (local)

Additional context

No response

[samcx]

@yyjhao Thank you for submitting another CSS issue!

I think the syntax may have to be slightly different since we're using LightningCSS → https://lightningcss.dev/css-modules.html#local-css-variables.

But it's not working when trying to reference a css variable from the other file/global, so curious if we're not on the latest LightningCSS.

Edit: we're on the latest crate, so not sure exactly why it's not working with that syntax 🤔

[yyjhao]

I don't think the syntax is the issue here because it's using local variables. It may be a bug in lightning css? here's the generated css:

/* [project]/app/page.module.css [app-client] (css) */
.page-module__E0kJGG__animate1 {
  width: 20px;
  height: 20px;
  background: red;
  animation: .2s infinite alternate page-module__E0kJGG__move1;
}

.page-module__E0kJGG__animate2 {
  --animation-time: .2s;
  width: 20px;
  height: 20px;
  background: #00f;
  animation: move2 var(--animation-time) alternate infinite;
}

@keyframes page-module__E0kJGG__move1 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}

@keyframes page-module__E0kJGG__move2 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}

looks like move2 isn't correctly replaced

[yyjhao]

Hmm maybe it's a next.js bug after all? here's my quick test with Lightning CSS:

import { transform } from "lightningcss";

let { code, map } = transform({
  filename: "style.css",
  code: Buffer.from(`.animate1 {
  width: 20px;
  height: 20px;
  background: red;
  animation: move1 200ms alternate infinite;
}

.animate2 {
  --animation-time: 200ms;
  width: 20px;
  height: 20px;
  background: blue;
  animation: move2 var(--animation-time) alternate infinite;
}

@keyframes move1 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}

@keyframes move2 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}
`),
  cssModules: true,
});

console.log(code.toString());

this outputs

pnpm tsx test.ts
.fz3d1W_animate1 {
  background: red;
  width: 20px;
  height: 20px;
  animation: .2s infinite alternate fz3d1W_move1;
}

.fz3d1W_animate2 {
  --animation-time: .2s;
  width: 20px;
  height: 20px;
  animation: fz3d1W_move2 var(--animation-time) alternate infinite;
  background: #00f;
}

@keyframes fz3d1W_move1 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}

@keyframes fz3d1W_move2 {
  from {
    margin-left: 0;
  }

  to {
    margin-left: 40px;
  }
}

which looks right

[samcx]

@yyjhao Thanks for taking a look! Yeah not completely sure yet where the root of the issue is.

Will be flagging to the team!

[samcx]

@yyjhao Just came to look at this again.

A workaround currently is to separate the animation-name out, which worked for me in your reproduction.

.foo {
  animation: var(--duration) linear infinite;
  animation-name: rotate;
}

[kdy1]

I'm not sure why does playground works, but I could confirm that the parser of lightningcss is not parsing the input correctly.

Debug dump of Rust struct

                        Unparsed(
                            UnparsedProperty {
                                property_id: Animation(
                                    VendorPrefix(
                                        None,
                                    ),
                                ),
                                value: TokenList(
                                    [
                                        Token(
                                            Ident(
                                                "move2",
                                            ),
                                        ),
                                        Token(
                                            WhiteSpace(
                                                " ",
                                            ),
                                        ),
                                        Var(
                                            Variable {
                                                name: DashedIdentReference {
                                                    ident: DashedIdent(
                                                        "--animation-time",
                                                    ),
                                                    from: None,
                                                },
                                                fallback: None,
                                            },
                                        ),
                                        Token(
                                            Ident(
                                                "alternate",
                                            ),
                                        ),
                                        Token(
                                            WhiteSpace(
                                                " ",
                                            ),
                                        ),
                                        Token(
                                            Ident(
                                                "infinite",
                                            ),
                                        ),
                                    ],
                                ),

[kdy1]

I filed parcel-bundler/lightningcss#935

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.