`@supports` is generated inside `@keyframes`

[sapphi-red]

What version of Tailwind CSS are you using?

v4.1.17

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

Vite v7.2.6

What version of Node.js are you using?

20.19.1 (StackBlitz)

What browser are you using?

Chrome 142, 143

What operating system are you using?

macOS, Windows

Reproduction URL

https://play.tailwindcss.com/RTMJ0q6ocV?file=css

https://stackblitz.com/github/neurotech/empty-keyframes-issue?file=vite.config.ts

Describe your issue

@keyframes gradient-success-in {
  0% {
    --tw-gradient-from: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
  }
  100% {
    --tw-gradient-from: color-mix(in oklab, var(--color-emerald-600) 20%, transparent);
  }
}

seems to be transformed to

@keyframes gradient-success-in {
  0% {
    --tw-gradient-from: color-mix(in srgb, oklch(59.6% 0.145 163.225) 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
    }
  }
  100% {
    --tw-gradient-from: color-mix(in srgb, oklch(59.6% 0.145 163.225) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-600) 20%, transparent);
    }
  }
}

which is probably an invalid code. Browsers seem to ignore the invalid @supports block, but it seems lightningcss drops the whole keyframe in this case (parcel-bundler/lightningcss#1103), which makes the whole animation to not work.

This was originally reported at vitejs/vite#21232.

[thecrypticace]

This will be fixed in the next release 👍