Skip to content

add support for global() function in animation names #75

Closed
@jantimon

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions