Lwc: CSS Keyframes are not scoped and being aliased

[AlexBryner]

Description

I am seeing this on platform within an Aura Application. The first keyframe animation in each component seems to be aliased to "a". With multiple components using animations they are each now referencing an animation "a" which is not unique. This results in all components applying the first animation declared in the component style tags in the header.

This is not happening with Debug mode turned on which leads me to believe it is in the web pack config.

Steps to Reproduce

I have created a basic example in the playground to try to showcase this but the playground doesn't seem to go through the same compiler that produces the results I'm seeing in an Aura Application on platform.

https://developer.salesforce.com/docs/component-library/tools/playground/_1DUyGLmz/15/edit

Possible Solution

There is a blog post linked at the bottom of this Github Issue with possible solutions

https://github.com/webpack-contrib/css-loader/issues/243

https://gravitydept.com/blog/keyframe-animations-in-css-modules

[caridy]

is this related to https://github.com/salesforce/lwc/pull/1042?

[caridy]

cc @pmdartus

[pmdartus]

This is a bug in the CSS transformer, none of the CSS at-rules are currently scoped. On top of @keyframe we have the same issue with @font-face.

Here is how the stylesheet should actually be transformed.

.fade-in {
  animation: fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Actual (incorrect) */
function stylesheet$1(hostSelector, shadowSelector, nativeShadow) {
   return ".fade-in" + shadowSelector + " {animation: fadeIn;}\n" +
          "@keyframes fadeIn {0% {opacity: 0;}\n100% {opacity: 1;}\n}";
}

/* Expected */
function stylesheet$1(hostSelector, shadowSelector, nativeShadow) {
   return ".fade-in" + shadowSelector + " {animation: fadeIn" + shadowSelector + ";}\n" +
          "@keyframes fadeIn" + shadowSelector + " {0% {opacity: 0;}\n100% {opacity: 1;}\n}";
}

[git2gus[bot]]

This issue has been linked to a new work item: W-6681159

[caridy]

We now need a brave soul that can work on this fix :), any volunteer?

[AlexBryner]

Thank you

[pmdartus]

I was looking into this today and it is more challenging than expected.

Currently, the CSS compiler does style scoping using attributes. The transformation related to the keyframes at rule introduces a brand new scoping mechanism at both the CSS declaration value level and at the at rule name level. Adding support for such a feature would require a large rewrite for the CSS transform and serializer.

[AlexBryner]

There is a simple workaround with loading animations through a static resource