lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Support ":global" scope for keyframe names

Open bin1357 opened this issue 1 year ago • 1 comments

The CSS Modules documentation mentions the use of :global applied to keyframe names: https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions. This functionality is supported by PostCSS, and the lack of support for it in LightningCSS is disappointing.

Example input:

@keyframes :global(jump) {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

Expected output (jump name saved):

@keyframes jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

Current behavior - "ERROR: Unexpected token Colon". Click

bin1357 avatar Oct 07 '24 22:10 bin1357

I think we probably will not support that syntax, but perhaps via a different one. The reason is that the CSS spec requires an <ident> keyword there, not a selector. See this proposal: https://github.com/css-modules/css-modules/issues/390

devongovett avatar Oct 07 '24 23:10 devongovett