Animation with CSS variables transforms incorrect

[Megoos]

Hello!

If you just try:

.container {
  --duration: 1.8s;
  animation: rotate var(--duration) linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

on the Playground it will result to:

.EgL3uq_container {
  --duration: 1.8s;
  animation: rotate var(--duration) linear infinite
}

@keyframes EgL3uq_rotate {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(-360deg)
  }
}

As you can see in the animation CSS property, the name of animation is without hash. If you remove the css variable, the transformation will succeed.

[devongovett]

CSS variables are tricky. This might be a challenge to solve, but maybe possible if we assume the first identifier is the name (but it might not be...). A bigger problem is when the variable includes the animation name:

.foo {
  --animation: rotate;
  animation: var(--animation) 200ms;
}

Then we definitely can't handle this.

[devongovett]

I'd recommend using the longhand properties for this. Either:

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

or:

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

[Megoos]

@devongovett Thank you. This solution fits!

[devongovett]

A possible solution would be to search for identifiers in the animation property that aren't one of the CSS-defined keywords (e.g. linear, infinite, forwards, etc.) and assume that is the animation name. I don't think there's a way to handle it if the animation name itself is a var but could help with some cases.

Currently properties with variables or other unknown syntax are preserved as-is and remain unparsed. We could possibly handle that here

lightningcss/src/properties/animation.rs

Lines 414 to 419 in baa1a2b

	Unparsed(val) if is_animation_property(&val.property_id) => {
	self.flush(dest, context);
	dest.push(Property::Unparsed(
	val.get_prefixed(context.targets, Feature::Animation),
	));
	}

We'd need to search through the tokens as I described above, and if we find one that is probably the animation name, replace it with a CustomIdent which should get renamed during CSS modules processing. Looks like we don't currently have a token type for that here

lightningcss/src/properties/custom.rs

Line 218 in baa1a2b

pub enum TokenOrValue<'i> {

so that would need to get added too.