add support for global() function in animation names

[jantimon]

When working with CSS Modules, animation names are automatically localized just like class names. While this localization is generally desired, it creates significant friction when trying to use animations from third-party libraries or when sharing animations across components.

Currently, there's no clean way to reference global animation names in CSS Modules. The existing approaches all have issues:

/* ❌ Doesn't work - causes parsing error: "CssSyntaxError: Double colon" */
.component {
  animation: :global(fadeIn) 0.5s ease-in;
}

/* ❌ Also doesn't work - same parsing error */
.component {
  animation-name: :global(fadeIn);
}

/* ❌ Doesn't work as it is not pure and also does not allow using global animations  */
@keyframes :global(fadeIn) {
}

This becomes especially problematic when:

1. Using popular animation libraries (Animate.css, animate-sass, etc.)
2. Working with design systems that define animations at a global level
3. Sharing animations between components
4. Using micro-frontends where animations are defined in a shared global scope

Proposed Solution

Add support for a clean global() function specifically for animation names:

/* ✅ Clean, intuitive syntax */
.component {
  animation: global(fadeIn) 0.5s ease-in;
  /* or */
  animation-name: global(fadeIn);
}

This would:

1. Work similarly to CSS Module's :global for selectors but specifically for animation properties
2. Not cause the current parsing errors with double colons
3. Only affect the animation name, leaving other animation properties untouched
4. Make it visually clear which part of the animation declaration is being marked as global

Technical Details

The implementation would need to:

1. Handle animation and animation-name properties specifically
2. Parse the global() function in these contexts
3. Strip the global() wrapper while preventing the animation name from being localized
4. Maintain all other animation properties (duration, timing, etc.) as-is