fix: add CSSStyleValue to Keyframe index signatures

[Ankita Jain Kuniya (Ankitajainkuniya)]

Summary

• Adds CSSStyleValue to the Keyframe and PropertyIndexedKeyframes index signatures
• Enables passing CSS Typed Object Model values directly to element.animate(), KeyframeEffect(), and setKeyframes()

Problem

The Web Animations API supports passing CSS Typed OM values (e.g., CSSUnitValue, CSSKeywordValue, CSSTransformValue) to animation keyframes. This is valid at runtime:

element.animate([
  { transform: new CSSTranslate(CSS.px(0), CSS.px(0)) },
  { transform: new CSSTranslate(CSS.px(100), CSS.px(100)) }
], { duration: 500 });

However, the current Keyframe interface only accepts string | number | null | undefined in its index signature, causing a TypeScript error for this valid usage.

Changes

inputfiles/overridingTypes.jsonc:

• Keyframe: [property: string]: string | number | CSSStyleValue | null | undefined
• PropertyIndexedKeyframes: [property: string]: string | string[] | number | CSSStyleValue | CSSStyleValue[] | null | (number | null)[] | undefined

ComputedKeyframe is intentionally left unchanged — getKeyframes() returns computed string values, not CSSStyleValue objects.

Motivation

• The KeyframeAnimationOptions interface already uses CSSNumericValue | CSSKeywordValue for rangeStart/rangeEnd, showing these types are recognized for animations
• CSS Typed OM Level 1 is widely supported in modern browsers
• MDN documents CSSStyleValue as valid for keyframe properties

Fixes microsoft/TypeScript#63325

[github-actions]

Thanks for the PR!

This section of the codebase is owned by Kagami Sascha Rosylight (@saschanaz) - if they write a comment saying "LGTM" then it will be merged.

[Ankita Jain Kuniya (Ankitajainkuniya)]

@microsoft-github-policy-service agree

[Adam Naji (Bashamega)]

This seems correct Kagami Sascha Rosylight (@saschanaz)

[Kagami Sascha Rosylight (saschanaz)]

const element = document.createElement('div')

element.animate([
    { transform: 'rotate(0deg)'},
    { transform: new CSSRotate(45, 0, 0, CSSNumericValue.parse('90deg'))}
], {
    duration: 500
}).effect.getKeyframes()[1]

Agreed, and this works on Safari/Chrome.

LGTM

[github-actions]

There was an issue merging, maybe try again saschanaz. Details

[Kagami Sascha Rosylight (saschanaz)]

LGTM

[github-actions]

There was an issue merging, maybe try again saschanaz. Details

[Kagami Sascha Rosylight (saschanaz)]

Jake Bailey (@jakebailey) has something happened on the token again?

[Jake Bailey (jakebailey)]

I don't think so? You were able to merge just a bit ago, I suspect a badly timed outage. Maybe try again quick

[Kagami Sascha Rosylight (saschanaz)]

LGTM

[github-actions]

There was an issue merging, maybe try again saschanaz. Details

[Kagami Sascha Rosylight (saschanaz)]

🤔

[Jake Bailey (jakebailey)]

Figured it out; it's because the PR base is before we edited workflow files, and so GitHub refuses to allow the GHA token to merge unless workflows: write is given.

https://github.com/orgs/community/discussions/194847#discussioncomment-16817164

I can fix this but for now I'll just hit merge 😄

[Jake Bailey (jakebailey)]

Agh, GHA can't grant that, only app tokens. Hm. I'll figure something out when I can, but I'm of course watching the repo.

That or, it's because the author has "first time contributor", but....