Closed
Description
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:
- Using popular animation libraries (Animate.css, animate-sass, etc.)
- Working with design systems that define animations at a global level
- Sharing animations between components
- 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:
- Work similarly to CSS Module's
:global
for selectors but specifically for animation properties - Not cause the current parsing errors with double colons
- Only affect the animation name, leaving other animation properties untouched
- Make it visually clear which part of the animation declaration is being marked as global
Technical Details
The implementation would need to:
- Handle
animation
andanimation-name
properties specifically - Parse the
global()
function in these contexts - Strip the
global()
wrapper while preventing the animation name from being localized - Maintain all other animation properties (duration, timing, etc.) as-is
Metadata
Metadata
Assignees
Labels
No labels