Adding multiple animations to an element breaks compiler's keyframe name replacement.

[augustoZaelot]

Description

On a LWR Site, I am creating a keyframe in a lwc and the code is adding the component name to the keyframe's name.

If I add more than one animation in an element the keyframe does not have the name changed to have the component name.

If there is only one animation being set, we have the name changed and it works as expected:

If I add another one, the name is not changed and only the second keyframe (from outside of the component) works:

the keyframe updated :

Steps to Reproduce

In a LWR site create a LWC component with a keyframe.

Set more than one animation to an element.

div { animation-name : animationA, animationB; }

Expected Results

animation names should have been changed
div { animation-name : animationA-c-myComponent, animationB-c-myComponent; }

Actual Results

names are not changed

Browsers Affected

Version

• LWC: x.x.x

Possible Solution

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

[nolanlawson]

Hi @augustoZaelot this looks like a bug in our synthetic shadow DOM implementation. I would recommend migrating your component to native shadow DOM which does not have this issue. Alternatively, using light DOM with non-scoped styles may also resolve this issue since the styles should not be scoped in that case.

Do you have a reproducible test case you can share via https://playground.lwc.dev ? This would help us track down this issue. From the description, it is not clear to me how to reproduce this issue.

[nolanlawson]

One reason I'd like to see a repro is that I wonder if this also repros in light DOM *.scoped.css files.