@keyframes :global() selector not properly handled in CSS modules - Unexpected token Colon

[jantimon]

When using the :global() selector with @keyframes the animation name cannot be parsed and LightningCSS throws a syntax error Unexpected token Colon

Example CSS

@keyframes :global(foo) {
  to {
    opacity: 1
  }
}

Current Behavior

Unexpected token Colon

Expected Behavior

Same result as PostCSS (Stackblitz Demo):

@keyframes foo {
  to {
    opacity: 1
  }
}

[devongovett]

Duplicate of #825. This syntax is not supported.

[jantimon]

Okay - I really like the idea of @global - do you think it makes sense to start working on a @global pr?

What about using global keyframes?
That's not possible with @global

postcss supports the following syntax:

animation: global(animation-name);

postcss allows mixing it with non global animation names in the same declaration

[devongovett]

The "referencing an identifier" section of the proposal has a more general way to do that which would allow importing names from other files in addition to the global namespace.

[jantimon]

okay so instead of

animation: global(animation-name);

you would prefer

animation: import(animation-name from global);

do you think we could already implement import(XXX from global)?
in that case I would create an issue and a pr

[devongovett]

Not sure. It was just a proposal. I was hoping to get consensus between implementations. Sounds like postcss implemented global() recently? Do they have a way to use an animation name defined in another file?

[jantimon]

That's correct - it was added last month

Right now it's not possible in postcss to import an identifier from another file so the only solution is defining it global either in a non css module or using :global() like this:

@keyframes :global(fade-in) {
  
}

once defined it can be consume with global() from another file:

animation: global(animation-name);

global() also allows using pre defined keyframes from libraries like https://animate.style/ or open-props

and global() also allows using page wide defined animations which can be used in different islands