[babel-plugin] stop adding px to unitless numbers in keyframes and viewTransitionClass

[Om-singhaI]

Fixes #1896

What changed / motivation ?

styleXKeyframes and styleXViewTransitionClass run objMapKeys(x, dashify) before transformValue. getNumberSuffix looks keys up in tables that only have camelCase names, so font-weight, line-height, z-index and animation-iteration-count all miss the unitless list and get px. fontWeight: 700 in a keyframe ends up as font-weight:700px.

stylex.create doesn't hit this because convertStyleToClassName passes the camelCase key to transformValue and only dashifies it for the rule.

• Swapped the two .pipe() steps in shared/stylex-keyframes.js and shared/stylex-view-transition-class.js. Values are transformed with the camelCase key and the keys are dashified after, same order as stylex.create.
• Added an inline snapshot test with numeric fontWeight, lineHeight and zIndex to transform-stylex-keyframes-test.js, and one with animationIterationCount: 2 to transform-stylex-viewTransitionClass-test.js.

Linked PR/Issues

None besides the issue above.

Additional Context

Output only changes where the dashed key sent transformValue down the wrong path. Besides the unitless numbers, that's:

• Numbers on the properties that take ms (animationDuration, animationDelay, transitionDuration, transitionDelay, voiceDuration). They used to get px, so animationDuration: 300 in a view transition class came out as 300px. Now it's .3s, same as stylex.create.
• fontSize with enableFontSizePxToRem. Both functions now get the rem conversion stylex.create already does.
• camelCase values in transitionProperty or willChange.

No existing snapshot changed.

shared/stylex-position-try.js has the same order, but none of the properties it allows come out any different with the camelCase key, so I left it alone.

Testing:

• The 2 new tests fail on main (4 snapshot mismatches, the CSS ones show the px values) and pass here.
• All @stylexjs/babel-plugin tests pass: 996 passed, 64 skipped (994 passed on main).
• prettier 3.5.3 and eslint 8.57.1 are clean on the changed files.
• The repro from the issue now gives font-weight:400, line-height:1.2, z-index:1 in the keyframes and animation-iteration-count:2 on the view transition group.

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[Copilot]

🟢 Approval recommended

The implementation matches stylex.create behavior and includes focused regression tests.

Pull request overview

Fixes incorrect px suffixes in keyframes and view-transition styles by transforming values before dashifying property names.

Changes:

• Reordered value transformation and key dashification.
• Added snapshot coverage for unitless numeric properties.

File summaries

File	Description
stylex-keyframes.js	Corrects keyframe value normalization order.
stylex-view-transition-class.js	Corrects view-transition value normalization order.
transform-stylex-keyframes-test.js	Tests unitless keyframe values.
transform-stylex-viewTransitionClass-test.js	Tests unitless view-transition values.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[vercel]

@Om-singhaI is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.