Compiled @keyframes loses the space between css variables

[Taib-Rabah]

In my Next.js + Tailwind CSS project, I defined the following CSS keyframes:

globals.css

@keyframes simple {
  from {
    translate: var(--x) var(--y);
  }
}

And implemented them in my component like this:

page.tsx

export default function Home() {
  return (
    <div className="[animation:simple_1s_ease]">Hola</div>
  );
}

Everything is good in dev mode, but in production (pnpm run build), the compiled keyframes declaration loses the space between the CSS variables breaking the animation's expected behavior:

@keyframes simple {
  from {
    translate: var(--x)var(--y);
  }
}

Repo link: https://github.com/traflex-trash/tw-issue

Note: Only page.tsx and globals.css are modified after running pnpm create next-app

[wongjn]

Seems like a bug in Lightning CSS (playground) that Tailwind uses to transpile and minify in production. Might be related to parcel-bundler/lightningcss#976