[v4.0.5] Used css variables are removed from @keyframes

[ramrami]

What version of Tailwind CSS are you using?

v4.0.5

What build tool (or framework if it abstracts the build tool) are you using?

Gulp + Postcss

What version of Node.js are you using?

v20

What browser are you using?

Brave

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/4MlgazRExq?file=css

Describe your issue

Given this setup

@property --angle {
  inherits: true;
  initial-value: 0deg;
  syntax: '<angle>';
}

@theme {
  --animate-rotate-angle: rotate-angle 2s infinite linear;  
  @keyframes rotate-angle {
    to {
      --angle: 360deg;
    }
  }    
}

TW v4.0.5 removes the css var from the keyframe when the animation is used and generate the keyframe like this:

@keyframes rotate-angle {
  to {
  }
}

[adamwathan]

Thanks for reporting! Just simplified the repro a bit more to make it easier to pin down:

https://play.tailwindcss.com/0vLufKbnNw?file=css

Will get a fix out on Monday at the latest 👍

[ngdangtu-vn]

It seems that is my problem as well

[philipp-spiess]

Just FYI that we reverted the change that caused CSS variables to be removed so this issue is resolved right now on the latest release. We still want to ensure this is fixed when we re-land the change so I'm going to keep this open but if you're affected by this right now, please update to 4.0.6.

[philipp-spiess]

Alright this will no longer be an issue when we re-land that PR, thanks gain!