Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support ":global" scope for keyframe names #825

Open
bin1357 opened this issue Oct 7, 2024 · 1 comment
Open

Support ":global" scope for keyframe names #825

bin1357 opened this issue Oct 7, 2024 · 1 comment

Comments

@bin1357
Copy link

bin1357 commented Oct 7, 2024

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

@devongovett
Copy link
Member

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: css-modules/css-modules#390

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants
@devongovett @bin1357 and others