Missing CSS module renaming for nested @keyframes

[joelmoss]

I have the following CSS which has a nested @keyframes:

.loading {
  animation: ball;

  @keyframes ball {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
}

Passing this to lightningcss with nesting and css modules enabled gives me this out ouput:

.EgL3uq_loading {
  animation: EgL3uq_ball;
  @keyframes ball {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
}

Which as you can see, renames the ball keyframe when it is used, but does not rename the actual declaration.

Un-nesting the @keyframe results in correctly renaming both the call and the declaration.

thx

[devongovett]

Hmm I'm not sure nesting key frames is valid? I think only conditional rules like media, supports, and layer can be nested.

[joelmoss]

Yeah I think you may be right. However, if that is true, the keyframe should probably not be renamed.

Declaring the keyframe within the CSS module (but not nested) does end up renamed. So all is fine. But if the keyframe is declared outside the CSS module (global), then the declaration is obviously not renamed, but the calling code within the CSS module does rename it.

[devongovett]

Yeah there's currently no way to reference a global identifier like you can use :global(.foo) in a selector. Haven't seen a good syntax for that yet.

[devongovett]

Looks like there is already a warning for this - example.

I also made a proposal to css modules to enable referencing global identifiers: css-modules/css-modules#390. Going to close this issue since that is tracked elsewhere.