Inconsistent localisation of @keyframes

[deadalnix]

:global {
    @keyframes myanimation {
        // ...
    }
    
    .myclass {
        animation: myanimation  0.5s 0s;
    }
}

Will fail to proceed because the @Keyframes identifier is localized, but the substitution doesn't happen in .myclass as it is assumed identifiers are global in there. As in:

@keyframes _myanimation_HHHH {
    // ...
}

.myclass {
    animation: myanimation  0.5s 0s;
}

Which fails to produce the expected results.

When in global blocks, @Keyframes 's identifier should be treated as global, not local. If the rather strange decision is made that this should be local anyways, then translation should happen within .myclass.

[jdelStrother]

Similarly, if you use css-loader with { modules: { mode: "global" } } to default to global identifiers, but try to make a keyframe local:

:local {
  @keyframes myanimation {
      // ...
  }

  .myclass {
      myanimation 0.5s 0s;
  }
}

it outputs:

@keyframes myanimation {
  // ...
}
.styles__myclass___cl8bP {
  animation: styles__myanimation___IbkbJ 0.5s 0s;
}

---

You can work around that with:

@keyframes :local(myanimation) {
    // ...
}

:local {
  .myclass {
      myanimation 0.5s 0s;
  }
}

@deadalnix untested, but I wonder if you could fix your issue with:

 @keyframes :global(myanimation) {
     // ...
 }
 :global {
    .myclass {
        animation: myanimation  0.5s 0s;
    }
}

but it's a shame the keyframe identifiers don't seem to obey the global/local scope they're declared in.